A neat way to organize your CSS
CSS files by default are really messy. They are not really maintainable and hard to keep simple and tidy. Their management becomes are really hard job for a slightly bigger project. The savior for this are preprocessor – less or sass /all of them are equally useful imo/.
Even with preprocessor it easily can get messy
LESS/SASS preprocessors are extremely useful for development giving you the framework to use variable for different common things like colors, borders, border-radiuses. They give you the ability to have separate files which then are compiled in one. You also can have functions which are basically functions which will output css code. Everything about those things sounds good however with time and with the growth of your codebase it can become messy as the normal css.
ITCSS comes to help
ITCSS is nothing more than a structure. It is not a framework, it is just a mindset which helps with your code structure while followed. Basic folder structure:
- Settings – a folder for your colors, borders etc
- Tools – used for mixins
- Generic – reset and/or normalize styles, box-sizing definition, etc
- Elements – styling your html elements without classes
- Objects – put stuff like your grid here
- Components – specific UI components
- Trumps – overrides of your code
Main benefits
Structure. Without structure overriding css can sometimes be tricky. Less mistakes. Easier to collaborate with other developers.
SEO
It is also a good practice if you have a basic skeleton of your website + basic styling in a general stylesheet and additional styles in one loaded asynchronously. This will increase significantly your initial page load. ITCSS makes that straightforward. Make one css file compiled from folders – Settings, Tools, Generic, Elements & Objects. And another one with folders – Settings, Tools Components and Trumps. The first one is your main stylesheet while is the one loaded asynchronously.
Verdict
Using those techniques will up your development and make your projects even better.