8 tips to keep CSS organized
After writing Comparing CSS code styles and deciding which is the best practice, I realized there was something missing. This is the reason why I am writing some advice to neatly shape your CSS:
1)Always use SASS (or any CSS preprocessor)
If possible, use SASS. It has awesome features such as nesting, variable declarations and mixins. You can use nesting to separate things such as: your components, the variables for your colors, and mixins, to avoid those horrible browser-dependent properties. (Bourbon has a lot of mixins you can use).
2) Write your HTML before your CSS.
This helps you to define the skeleton of your page before applying makeup. You will be able to define more reusable classes and you will have an increasingly well organized distribution of elements.
3) Organize your components using the BEM model.
BEM represents the best way to organize your CSS. In Comparing CSS code styles and deciding which is the best practice, I gave three examples to explain the topic. The third one, perfectly shows a BEM “block” with some “modifiers”, although there were no “elements”. This way of coding might help you when facing new additions to your page.
4) Don’t reference IDs in the CSS.
This is because the selectors are very specific and might lead to !important statements that are highly undesirable since they break the overriding structures.
5) Use Github’s CSS guidelines.
Github’s guidelines provide a neat and tidy way for programming, making your code easier to read for future collaborators.
6) Avoid using !important at all costs.
I guess you already know the reason for this, but just to remind you, !important statements should only be used to override CSS properties that were stuck in HTML by external libraries.
7) Use bootstrap only when needed, (make sure you understand it before using it).
I’ve seen lots of mistakes people make when using bootstrap, it’s a very powerful tool but if you use it the wrong way, it may lead to big problems which, obviously, will be fixed the wrong way by doing unnecessary property overriding. So, please read what you are about to employ and only use these features when they are really needed. It’s not necessary to use bootstrap’s grid for everything, most of the time you can easily solve your problem with inline block elements instead.
8) Keep your HTML simple and readable.
Your HTML shouldn’t have unnecessary elements. Sometimes programmers tend to wrap some tags inside others when there’s no need to do so. Always try to keep your hierarchy as simple as possible and use the HTML tags that best match the content they are holding. That way if your CSS doesn’t load, at least the user will be able to see the basic organization of the page.
I hope these ideas will help you in your future projects. Just remember: first you need to have an organized structure in the HTML before you proceed with the BEM-oriented CSS model.
Thanks for reading this post! If you found it useful and you haven’t yet read Comparing CSS code styles and deciding which is the best practice, take a look at it, you will like it for sure!
Posted by Gabriel Zanzotti (gabriel.zanzotti@wolox.com.ar)
