Tags in CSS files

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

When working with large (and particularly OO) CSS your chunks of code in a stylesheet(s) are less likely to be separated by type, but rather by function. That is to say, you might have objects that both deal with images but live nowhere near each other in the stylesheet.

N.B. please refer to this gist before/whilst reading this article.

For as long as I can remember I’ve always placed a dollar sign before any section titles in my CSS; this is so that I can find a section quickly (and limit my search scope to sections only) simply by running a find for $[SECTION NAME].

This is all well and good when I know what section I’m after, but what if I want to find any section that handles images, or perhaps I need to know what CSS is available for use on lists? I need a way of searching within sections, not just their titles. Enter CSS tags…

If you take a look at the example CSS you should see that with each section title I have a list of tags. The media object’s tags are ^images ^text ^layout ^structure, the sprite object carries the tags ^images ^icons. If I want to find any objects that pertain to certain types of component then my search now is simply ^[tag name].

By prepending the tags with another character (I chose the caret as it isn’t a frequently occuring glyph in CSS) I can limit my search scope to just tags.

So now if I want to style up some image content I know all I need to do is a find for ^images and I can see exactly what objects I already have at my disposal. If nothing appropriate exists I create a new component or object and give that a tag of ^images for the next dev to find!

As with my recent quasi-qualified selectors tip, this is only really of any use of the whole team buys into it, but I think it could be super useful and is something I’m hoping to implement soon.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.