Book a Consultation

Tags in CSS files

Written by on CSS Wizardry.

Table of Contents

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.


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.



Did this help? We can do way more!


Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.


Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

Learn:

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.