seperation of concerns

Separation of Concerns

In coding, Separation of Concerns refers to the delineation and correlation of software elements to achieve order within a system.

Separation of concerns is a design principle stating that code should be separated based on its purpose in a program. In web development, that generally means the structure of a page is defined in an HTML document, styles are stored in a CSS file, and code that defines dynamic behavior is stored in a JavaScript file.

Through proper separation of concerns, complexity becomes manageable.

For example, a JavaScript file can quickly get overloaded with styles if you regularly use the css method to modify element styles. It’s a best practice to group all of the style code in a CSS file and use jQuery to add and remove the classes from elements. This approach aligns to the design principle called separation of concerns.

Lets give an example:

$('.item-list').addClass('active');

In the example above:

  • .addClass() is called on the jQuery .item-list selector.
  • .addClass() adds the 'active' class to all .item-list elements.
  • Attention: The argument passed to addClass does not have a period (.) preceding it. This is because it expects a class, and therefore only needs the name of the class.