CSS (Cascading Style Sheets) is a standard or language used for describing the presentation of a document written in a markup language like HTML. After your HTML is there, it’s time to style. But where to start and what is the better method to handle that?
Basically, there are two methods to manage your CSS: Traditional and Modular Model. First of all, let’s figure out the basic difference between these models. In Traditional or Waterfall Model, a single CSS file with .css extension have all the necessary styling rules for all elements. However, in Modular Model, styling rules for different elements exist in different files. All the information exists in the form of small packets which increases the reusability and scalability of the code.
It can be concluded that the Modular CSS Model is easy to manage and code can be reused across a different set of projects. Comparatively, it becomes quite awkward in Traditional CSS Model to reuse the code, as code exists as a whole instead of being a set of components.
How is it done?
This is my approach to using Modular CSS using SCSS, BEM and the 7-1 pattern.
- SCSS or “Sassy CSS” is a CSS pre-processor. It is a superset of CSS syntax adding some cool features like variables, nesting, partials and imports helping you write CSS more easily.
- SCSS Variables - Inevitably, there is always a set of colours or fonts that end up littered throughout the code over and over again. When you need to change one of these colours it becomes an exercise in ‘find and replace’ which can go wrong. SCSS variables let you store a value like a colour or a font family and retrieve it throughout your code?—?helping you avoid repeating yourself, and making it easy to make changes in the future.
- SCSS Nesting – Nesting in SCSS allows you to write CSS in a similar way to HTML. Instead of writing a series of selectors every time you are writing a new style, you can create an outer class, then put all other relevant selectors inside of it.
- SCSS Partials and Imports - Keep your CSS maintainable and clean it is difficult with a single, huge file with a thousand lines of code. Luckily for us, SCSS allows us to do so. You can create partial files by naming the file with a leading underscore (i.e. _base.scss, _typography.scss, _button.scss) and then importing them using @import directive.
SCSS has some more features like mixins, inheritance, functions and other directives help us to write better CSS but they are beyond the scope of this article.
Naming methodology: BEM
Naming things in coding is extremely important. Imagine if you were working on a project and for some reason, you decide to set it aside for some months? Or if someone else needs to takes back to the project? If your code hasn't been properly named, it will be difficult to understand what you are talking about.
BEM (Block, Element and Modifier) is a naming convention which helps us solve this problem. This methodology can make our code structured, more modular, and reusable. Avoids inheritance and provides some sort of scope by using unique CSS classes per element. Reduce style conflicts by keeping CSS specificity to a minimum level. A block is a top-level abstraction of a new component (.card {}), elements are child items placed inside of the block denoted by two underscore following the name of the block (.card__image{}), modifiers are used to define change appearance or behaviour of the block and it is done by appending two hyphens to the name of the block (.card--small {}).
There are plenty of methodologies out there aiming to reduce the CSS footprint, organize cooperation among programmers and maintain large CSS codebases. No matter what methodology you choose to use in your projects, you will benefit from the advantages of more structured CSS.
Architecture structure: The 7-1 pattern
Properly architecting your SCSS project is a crucial starting point to having a maintainable, scalable, and well-organized project. SCSS makes separating your project into logical "modules" simple with the @import directive. To summarize, put your partials in seven different folders and a single file main.scss at the root level which imports them all to be compiled into a CSS stylesheet. Ideally, the folders structure come up with something like this:
- abstracts/ - every global variable, mixin and function should be put in here
- base/ - contains global styles, such as resets, typography and base styles
- components/ - contains each self-contained component in its own SCSS partial
- layout/ - contains everything that takes part on laying out the site or application such as header, footer, sidebar, etc.
- pages/ - contains page-specific styling, if necessary
- themes/ contains styling for different themes
- vendor/ contains all the CSS files from external library or framework
- main.scss – output file that brings together all of the above parts.
Conclusions
That is how we can build CSS with the Modular Model approach for scalable and easy to manage code structure, which is agile enough to be reused across different projects. Bear in mind that proper architecture and style organisation is crucial to developing well-done, maintainable and reusable stylesheets.
