Principles of Modular CSS
Modular CSS is a way of organising your CSS, and other assets, into discrete and re‑usable chunks.
CSS is easy to write but a bugger to maintain.
- Each module is written as separate files in their own directory.
- Version control is much easier.
- Finding specific modules is simple. Looking for a button? Just Goto
- Building a style guide requires minimal setup.
Some key principles
Build what you need. Start simple. Stay simple.
- ID-based CSS selectors must not be used. IDs have a much higher specificity, which can then lead to all sorts of specifity wars when trying to apply a style.
- HTML elements must not be used in CSS selectors. This means classes can be applied to any element eg
<input class="button" type="submit">and
- Only use the module for one bit of functionality. This is the Single Responsibility Principle.
- Class names should be functional & independent of content. Again, this makes a module re-usable in different contexts.
- Modules must have unique names.
A guiding principle in Kanban development is to make work visible (Kanban 看板 literally means billboard in Japanese).
To this end, use a styleguide, from the beginning. Groundwork comes bundled with Fractal, a magnificent, automated, styleguide builder. So long as your module folder has an HTML template file (we use Handlebars), then the module will appear in the Fractal styleguide.
To start Fractal locally:
$ fractal start --sync
TODO: implement more testing…
This just scratches the surface, there is a wealth of information out there: