Hi, first of all: thank you for making CSSstats!
I noticed, that specificity graph probably isn't presenting actual selector order if CSS has imports. If I understand correctly, specificity graph should display the curve of specificity strength with which css is written respecting it's rendering order and - given the nature of css - rule order in files. As far as I know, the general idea behind specificity management is to have low spec. selectors at the begging of the files/rendering and stronger ones a little later - somewhat reflecting modular/component architecture.
When I was inspecting some of my projects against specificity graph I noticed, that selector strength drop comes much later in the graph than in both actual files and rendering. I've started to dig a little deeper and found out, that if you have something like this:
@import url("import.css");
body { color: blue}Specificity graph will render css file's content graph sooner, than graph for import. Same order issue can be seen in Raw CSS section as well.
I've made a little demo:
http://import.meetpollux.com/
http://cssstats.com/stats?url=http%3A%2F%2Fimport.meetpollux.com
Demo results:
If Specificity graph/Raw CSS order would correct the text on demo page would be red.
Hi, first of all: thank you for making CSSstats!
I noticed, that specificity graph probably isn't presenting actual selector order if CSS has imports. If I understand correctly, specificity graph should display the curve of specificity strength with which css is written respecting it's rendering order and - given the nature of css - rule order in files. As far as I know, the general idea behind specificity management is to have low spec. selectors at the begging of the files/rendering and stronger ones a little later - somewhat reflecting modular/component architecture.
When I was inspecting some of my projects against specificity graph I noticed, that selector strength drop comes much later in the graph than in both actual files and rendering. I've started to dig a little deeper and found out, that if you have something like this:
Specificity graph will render css file's content graph sooner, than graph for import. Same order issue can be seen in Raw CSS section as well.
I've made a little demo:
http://import.meetpollux.com/
http://cssstats.com/stats?url=http%3A%2F%2Fimport.meetpollux.com
Demo results:
If Specificity graph/Raw CSS order would correct the text on demo page would be red.