# CSS index (table of contents?)

**URL:** https://forum.kirupa.com/t/css-index-table-of-contents/643446
**Category:** web dev
**Created:** [July 2, 2020, 7:39pm UTC](https://forum.kirupa.com/t/css-index-table-of-contents/643446 "2020-07-02T19:39:03Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)
#### Post date: [July 2, 2020, 7:39pm UTC](https://forum.kirupa.com/t/css-index-table-of-contents/643446/1 "2020-07-02T19:39:03Z")

</div>

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

```auto
/**
* 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!

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [July 3, 2020, 5:07pm UTC](https://forum.kirupa.com/t/css-index-table-of-contents/643446/2 "2020-07-03T17:07:11Z")

</div>

This is done manually by the developer. The wordpress [CSS coding guidelines](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#commenting) encourage providing a TOC in the CSS, so that may explain why you see them in a lot of wordpress-related places 😀