CSS file rendering

Original author: Anton Eprev
  • Transfer
Some time ago, it became interesting for me to see how the CSS code of our project looks and how it has changed over the whole year. This is how the node-specificity project came into being . What is he doing? It allows you to get answers to the following questions:

  1. How many selectors are there in the code? How did their number change over time?
  2. What are the maximum and average values ​​of specificity of selectors? What is the median? How did they change over time?
  3. What does the selector specificity distribution look like? How did it change over time?
  4. How many selectors use the !importantdirective? How did their number change over time?

Well, why is this even important? Maybe not, until you work with code consisting of tens of thousands of lines, which is difficult to maintain, or you are experimenting quite a bit. And, of course, if this is not important, then at least it should seem interesting.

So node-specificity provides two commands. One of them is used for processing CSS files and creating profiles. The second is for reading and "researching" these same profiles. Let's take an example. I have several versions of the CSS files for my blog. The latest version is v8.css .

Create profiles for these files:

$ node-specificity parse v1.css --label=v1 --output=v1.json
$ node-specificity parse v8.css --label=v8 --output=v8.json

We just created profiles for each individual CSS file, because we want to look at the changes over time. If your site uses more than one CSS file, then you need to create a profile for all the files, for example, like this:

$ node-specificity parse main.css print.css --label=2014-12-23 --output=20141223.json

The label is used as the profile name in reports. Once we have created the profiles, we can run the report. Let's look at the “server” report:

$ node-specificity explore v*.json --report=server
Server is running on http://localhost:4000/
Press Ctrl + C to stop it.

Open a browser and go to the address "http: // localhost: 4000 /". You should now see a page with various controls and a weird schedule. This is a graph of the distribution of specificity (see title picture). For each specificity (tuple), you see the number of selectors of this specificity in each profile.

Other graphs: the number of selectors in files and profiles; the proportion of those that contain the !importantdirective; mean and median specificity.

In addition, you can view all of these graphs for each profile individually. To do this, select the desired profile from the list on the left. For example, the following is a graph of the specificity distribution for the v8.json profile .

The “server” report is a fairly powerful tool. Keep in mind that the images for profiles consisting of one small CSS file were shown above. If you have several files in your profile, then the graphics will sparkle more interesting.

There are other types of reports. Take, for example, “inspect,” which is used as the default value. If you execute in the terminal node-specificity explore v8.json, then on the screen for each profile a list of all selectors, a table with specificity values ​​and a specificity distribution graph, very similar to the one you saw above, will be printed.

Reports can accept additional command line parameters. There are several of them. For example, --no-inspect-selectors(see the picture above) disables the output of the list of selectors.

That's all. Happy exploring!

Also popular now: