Do you really understand the CSS you wrote?
CSS is a really simply language. That’s all to declare Selector, Property and Value. However, it’s too difficult to write the CSS which is scalable, maintainable, not becomes a spaghetti code.
Therefore, the stylesheets you write becomes heavy and dirty over time and you can’t improve it. Finally, it will bring damage to your web site/app which include it.
It’s the problem of Critical Rendering Path. There are more things to block rendering UI than JavaScript. CSS also blocks rendering UI, so we have to pay close attention to write CSS.
However, I question whether if the people who write CSS are ready to do it. As mentioned above, since it’s really easy to write CSS without thinking, I have a feeling that almost web developers underestimate CSS language.
We should strictly control ourself to write CSS and it’s very difficult than writing JavaScript, because CSS is really simple language, so we can’t do anything with CSS.
We need to learn best practices to write cool CSS. I recommend reading the following articles.
- CSSLint/csslint
- CSS Architecture — Philip Walton
- Code smells in CSS — CSS Wizardry
- SOLID CSS | Blog | Miller Medeiros
I don’t think that as soon as you read these articles, you can write the perfect CSS, but you can come close to it.
If it’s the case that the CSS you write has a few hundreds of lines, You can understand it easily. However, it’s no wonder that web projects has a few thousand lines of CSS nowadays. Moreover, you can’t glance at the CSS if you use CSS preprocessor such as a Sass, Less and Stylus, because it might be divided into dozens of partial files.
Well, I created StyleStats. It can analyze your stylesheets and it shows the statics of your CSS. For example, it shows the number of Selector, the number of Property and items that CSS Lint points out.
StyleStats is a npm module, so you have to install Node.js before and then you can install it with the following code.
npm install -g stylestatsIt’s really easy to use it, and you only specify the stylesheet path that you want to analyze.
stylestats path/to/stylesheetsI prepared the online tool for the people who dislike command line, but the function is limited.
If you use StyleStats, you can analyze the stylesheets which has the dozens thousands of lines immediately, and the result will make the css you wrote more better.
You can’t improve what you can’t measure. It’s important to understand the CSS you wrote exactly. Then continuing the monitoring the change of your StyleStas results will helps to control yourself.
