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-listselector..addClass()adds the'active'class to all.item-listelements.- Attention: The argument passed to
addClassdoes not have a period (.) preceding it. This is because it expects a class, and therefore only needs the name of the class.