This is a guest post on our blog by Claudio Mendonca, a frontend designer based in Montréal. He really did a solid job with it, so I wanted to give it some exposure here! Enjoy. 🙇♂️
I loved Lego blocks.
They were by far my favorite toys—had loads of ‘em!
See, I’m a designer, son of a designer. Lego blocks were our first creativity sandbox: they allowed us to assemble all sorts of crazy things.
I didn’t know why I loved them so much back then. But now I do.
It wasn’t their colors, or their 7K pieces Millennium Falcon. Nope.
It was how perfectly each piece fit together, in every possible way.
What if we could create interface pieces that behaved more like Lego blocks?
This would speed up our frontend development, making it more robust, more organized. Our HTML would get smaller, and our CSS would get MUCH more manageable.
In this article, I’ll show you how to organize your CSS architecture into HTML/CSS blocks that behave more like Lego blocks.
To do so, I’ll introduce three important modular CSS methodologies:
- OOCSS
- BEM
- SMACSS
These will help us create interface components that are easier to understand, maintain and reuse.
I’m betting these will become part of your workflow, regardless of the frontend framework you’re using. If you’re using one, that is.
Know thy acronyms (OOCSS, BEM, SMACSS)
Ancient CSS Joke - Two CSS rules enter a bar. A bottle falls in a totally different bar.
What is OOCSS?
Object Oriented CSS (OOCSS)—and everything that comes with this paradigm shift—is the conceptual foundation for better interface design and development. It states that interfaces are made of multiple components, which should be re-used as much as possible.
[...]
→ Read the full post here
Top comments (0)