Now you might be wondering what the term ‘Separation of concerns’ means, don't worry too much because this article contains everything you need to know. Separation of concerns is simply the principle that promotes software division into independent modules, each handling a specific functionality. It is a rule used to separate software into units, with minimal overlapping between the functions of the individual units.
Here’s the thing, think of the separation of concerns as a situation whereby smaller units of a main unit are each primarily concerned with handling unique and specific tasks. All the tasks could have been handled by the main unit as a whole but this time, it gets passed to each smaller unit and each of them has their primary concerns and that is the only thing they should be concerned about.
Front-end web development is the aspect of web development that deals with what is seen and interacted with on the website. This is also referred to as client-side development. HTML, CSS, and Javascript are the fundamental building blocks of front-end web development. HTML which stands for HyperText Markup Language is used for structuring the web page, CSS which stands for Cascading Styles Sheets is used for styling the web page, while Javascript is used for adding interactions to the webpage.
Now in front-end web development, separation of concerns implies distinguishing between HTML for structure, CSS for style, and Javascript for interactions. This means your HTML should only be meant for structuring the content of your webpage and that alone, your CSS should only be meant for styling the webpage and nothing more while your Javascript is for interactions on the webpage.
Inline styling in HTML defeats the concept of separation of concerns in front-end web development. HTML should only be concerned with the structuring of the webpage, not the styling. Anything that has to do with styling should go in the CSS file. Another example is using tags that apply styles to elements like the strong tag, the em tag, the u tag, etc. They are HTML tags, yet they apply styles to elements. As stated above, following the rule of separation of concerns, HTML should only be concerned with the structure of the webpage, the styles should go to the CSS file.
Categorically speaking, adopting separation of concerns in front-end web development has a lot of perks. One of them is that it improves code readability and organization which in turn aids collaboration among developers. When the HTML file contains only the markup, the CSS file is just the stylings, and the javascript file is just the functionality code. It helps other developers to comprehend your code because they know where exactly to find whatever they want to work on since the codebase is separated based on concerns.
Furthermore, it encourages a modular and organized approach to building web applications. This makes the code easily maintainable and extensible since it is easier for other developers to work on the project. Since the codebase organization becomes improved due to the separation of concerns, incremental adoption becomes easier because it would be easier for developers to collaborate on the project.
The Way Forward?
Bottom line? Separation of concerns is a principle that fosters collaboration amongst developers due to its perks stated above. Choosing to adopt a different approach while writing your code is not wrong. Still, the separation of concerns is a generalized code-writing convention accepted by a lot of developers due to its good organization. Therefore, it is an approach that is advisable to pick up on your projects.
Top comments (0)