Is a really simple tool which allows to copy and paste your CSS and analyse the stylesheet specificity state. Any peaks of specificity can be analysed by hovering the node itself.
To calculate it is easy: ideally, is made of 4 values separated by a comma (0,0,0,0) and every type of selector (ID, class, etc) gives a unit to the referring channel. In theory, we would have:
- For every ID, add
0,1,0,0. - For every class, pseudo-class and attribute selector add
0,0,1,0. - For every element and pseudo-element, add
0,0,0,1. - The specificity of a universal selector will amount to
0,0,0,0, which is not the same thing as saying that it doesn't have any. - The specificity of a selector in line is equal to
1,0,0,0(maximum value). - Declarations with
!importantwill trump whatever on every other declaration which doesn't use the same attribute.
The idea behind this comes from the need to keep under control the specificity level of our projects. A low level or, better, constant and linear level of the graphic, means having projects easy to maintain and scalable over time.
https://colorlib.com/wp/free-html5-admin-dashboard-templates/
A lightweight, battle tested, fast, css parser in JavaScript https://github.com/jotform/css.js
A JavaScript module for calculating and comparing the specificity of CSS selectors. The module is used on the Specificity Calculator website. https://github.com/keeganstreet/specificity
Simple HTML5 Charts using the https://github.com/chartjs/Chart.js