Modular CSS is a concept that will help you write more maintainable and readable code. It is compatible with any and all CSS pre-processors and naming conventions.
Modular CSS means you avoid ever writing special snowflake CSS that’s only used in one spot. It helps you standardize your code and look for patterns. It helps you dry up your code and ensure that each class has a clearly defined responsibility, and help you avoid overlap and conflicts between classes.
Essentially, if you’re ever going to write CSS at scale, you owe it to yourself to understand what modular CSS is, and how it can dramatically improve the readability and maintainability of your code.
Code reusability is one of the many features of writing Modular CSS. By combining code from other blocks, the same modular code can be reused. The various combinations possible ensure that the code attains a requisite level of flexibility and scalability. Code blocks, used both separately as well as in combination, can allow you to iterate them independently enhancing the performance of your web pages.
Four different ways to write Modular CSS
The four methods to write Modular CSS, popularized by programmers, allows the user to explore their own perspective and approach to complete their goals.
• Scalable and Modular Architecture for CSS (SMACSS),
• Object Oriented CSS (OOCSS),
• Don’t Repeat Yourself CSS (DRY CSS),
• Block, Element, Modifier (BEM)
Scalable and Modular Architecture for CSS (SMACSS)
When using Modular CSS, adopting a modular architecture that is scalable is important. This module provides the necessary consistency to the design process and its scalability. The module aims at enhancing the logic of a block of code within the HTML script from the content. By recording the previously observed patterns, the SMACSS module defines better practices for writing CSS. The five rules it uses for categorizing are:
• Base
• Layout
• Module
• State
• Theme.
While it’s easier complying to the Base rules as they stick well with the existing CSS requirements, they do not apply for classes. On the other hand, layout rules apply for the major components of a website including the footer, header, footer, main- content or sidebar. Classes are also available. Modules reside with major components of the website.
Object Oriented CSS (OOCSS)
Not the typical object orientation but it has the same core concept of programming languages. The objects have visual design patterns that can integrate as blocks of script into HTML, CSS and even JavaScript. This makes it easier to reuse the blocks and maintain the efficiency of your code across platforms.
Don’t Repeat Yourself CSS (DRY CSS)
This method explores a different perspective to writing Modular CSS. It involves reorganization of already existing selectors in use. Essentially, you ensure that your code does not have repetitive statements and is clearer than before. The style of writing is kept separate and utility, stability, and reusability are primary requirements.
Block, Element, Modifier (BEM)
Similar to an object oriented programming style, there are patterns and accordingly program entities are rearranged to benefit the code’s reusability. With no regard for the programming language used to write the CSS, this modular CSS method of writing involves using blocks. Efficiency of the script is enhanced with such an approach.
