MaintainableCSS: Online Guide to Maintainable CSS Code
Writing CSS is pretty simple once you understand the syntax and methods to structure a page. But mastering CSS to create modular, semantic, and reusable code is a whole other topic.
There are many different techniques you can use like SMACSS or ITCSS, but these are models that force you in a certain direction. Instead you might like MaintainableCSS which is an online guide full of tips and strategies for writing better long-term CSS code.
The guide is completely free and it’s even hosted on GitHub including all the website code. You should start reading at the introduction which explains the basics of this online guide and why it’s valuable to web developers.
Read Also: How to Write Better CSS with Performance in Mind
These code guidelines help you develop habits rather than forced structures. This way you can organize code the right way no matter how you actually write specific selectors(but MaintainableCSS has suggestions for this too).
Aside from code organization this site also gets into more complex topics regarding modern CSS development. Some of these topics include:
- Modular development
- Speed & performance
- Handling redundancy
- Code conventions
- CSS states like loading, disabled, and hidden
Most of the chapters are very short and they move quick so you won’t spend much time going through this guide.
Take a look over the table of contents and the twelve chapters inside this guide. The basics are pretty common but you’ll learn a lot of advanced topics like versioning and JavaScript+CSS development.
Brand new developers who still don’t understand CSS may want to avoid this guide. It assumes a basic level of knowledge involving specificity, selectors, and properties.
But if you already know how to write CSS and just want to do it better then MaintainableCSS is for you. It’s the short and sweet approach to clean modular frontend development by getting back to the basics and writing code that’ll last for years to come.