CSS index (table of contents?)

programming web dev
1

I have occasionally seen a WordPress theme style or another stylesheet in the wild that has a beautiful index at the top:

/**
* Font styles: line 10
* Headers: line 30
* Content: line 120
* Footer: line 451
**/

Or something similar, obviously creating something like this would be incredibly tedious and one simple change could invalidate the whole thing. So I’m wondering how these things are created? Is there a generator? NPM package with Gulp? Is this some obscure feature in WebStorm?

This would be really handy for organizing long stylesheets, if anyone has any thoughts please let me know!

2

This is done manually by the developer. The wordpress CSS coding guidelines encourage providing a TOC in the CSS, so that may explain why you see them in a lot of wordpress-related places :grinning: