Choosing how to structure our CSS components

Quique Fdez. Guerra
8 min readJul 1, 2017

Do you remember when working with CSS was like add <style>/* */ </style> to your index.html just before the <script>/* */ </script> 🙄 ?

Fortunately those days are far behind right? everything related to style sheets has evolved a lot, is something that always happens with things of Frontend, we love to change them, update them or complicate them. Sometimes we keep imagine and people decide to create functional CSS.

Then came a customer and ask about to create a new project… Now what? Plan for a minimum structure and some basic agreements, in the following lines I will try to show a little how I like to do it and how I think it should be.

Something that logically has not come out only from me, is thanks to hours of discussion and beer (or tea) with Borja, Edu, Carlos, Carrillo or Alex among others.

Of course, we are not trying to reinvent the things, we are based in existing agreements, in this case BEM and BEMIT agreement, other agreements and logically in our small contributions.

BEM — Block Element…

--

--

Quique Fdez. Guerra

Director of Engineering at @PlainConcepts Romania Frontend Developer Lazy @Github contributor Happy @Helpdev_ founder Web @GoogleDevExpert