Tags in CSS files

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 on Tuesday, August 7th, 2012 in Web Development. Tags: , , , | 16 Comments »


16 Responses to ‘Tags in CSS files’

  1. David Bushell said on 7 August, 2012 at 7:32 pm

    I like the idea of using hashtags (inspired by Twitter) to represent unique/important elements, e.g. #header, #main etc :)

    Trolling aside, you could replace your section dollar with a real section sign: § (http://en.wikipedia.org/wiki/Section_sign). For some reason it has its own key on my MacBook Air (and I assume most Apple keyboards). Unicode is fun. Also consider using ASCII look-a-like glyphs to really piss of future developers; job security!

  2. Harry Roberts said on 7 August, 2012 at 7:41 pm


    “Trolling aside […] to really piss of future developers”


  3. Kyran said on 7 August, 2012 at 7:52 pm

    This is actually quite a cool idea. Having had the joy of working with horrendously organised CSS, something like this would be very helpful.

    As you mention though, getting a whole team to adopt the same style would be difficult. It’s practical use only really comes into play when it’s a large project (often involving lots of people).

  4. Matt Bainton said on 7 August, 2012 at 8:26 pm

    I’ve always used the backtick “`” for sections, and tilde “~” for sub-section or modules. However, the addition of keywords or tags is pretty great Harry. Really helps with that “these are similar, but spread out” situation that lacks discoverability.

  5. Joe Snell said on 7 August, 2012 at 11:43 pm

    In theory, this totally makes sense. It seems difficult enough, however, to keep everyone on the same page in the cascade organization as it is. I wonder if this might make things more confusing. I’d love to see a future post in regards to this in practice on a large team based project.

  6. Matt Wilcox said on 8 August, 2012 at 8:57 am

    Nice – I’ve been doing this for years but using the = character to denote a tag (and usually only one tag). Unfortunately, for me, tagging like this has never been as helpful as I first thought it would be.

  7. Larry Botha said on 8 August, 2012 at 12:32 pm

    Cool idea to narrow down contents of a stylesheet to tags.

    Will the CSS variables spec (http://dev.w3.org/csswg/css-variables/#var-glyph) affect your use of the dollar sign? I’ve recently adopted using the ampersand for this reason.

  8. Kaiser said on 8 August, 2012 at 1:08 pm

    As @David Bushell said, using the §-sign makes even more sense. One thing, I’d like to see is a list of predefined tags, as tagging can get way out of control if custom tags are allowed. Just imagine »singular vs. plural« and the system is beaten. I think this should be very restricted, but I like the idea and look forward for a follow up post.

  9. nomi said on 8 August, 2012 at 8:07 pm

    Yet another brilliant idea. Thanks for sharing Harry.

  10. David Higginbotham said on 10 August, 2012 at 5:27 pm

    Great idea, I’ll be incorporating this into my future utilities frameworks.

    In regards to the §-sign wouldn’t be bad unicode lookup for it is §. (For all us Windows users ;))

  11. Varemenos said on 12 August, 2012 at 6:40 pm

    Thanks to sublime text, this is not a problem for me. ctrl + R = godlike mode [on]

  12. JimmyLeonardson said on 13 August, 2012 at 8:51 am

    I prefer to divide my css in different files instead of putting everything in one file. On production I just combine it to one file.

  13. David Hund said on 13 August, 2012 at 2:13 pm

    Interesting idea although I am not a huge fan of tagging: they get messy quickly.

    I wonder how this would really be beneficial. For most cases I’d think it would be just as quick to simply search for the relevant module-name (e.g. ‘.media’).
    Also: if you’d have to change some similar image styles in various places does this not indicate a (non-DRY) problem with your CSS? Should, in that case, a class not have been used?

    P.S. When you hold strictly to your ‘no ID selectors evar’ philosophy there is no reason _not_ to use #tags ;)

  14. Lucian said on 14 August, 2012 at 12:50 am

    This is great. I will definitely start using it as I am very obsessed with keeping everything organized.

  15. AntoxaGray said on 16 August, 2012 at 5:11 am

    I always used temporary tags like qq or ww if I jumped from one section to another very often, I think I gonna adopt your idea.

  16. Larry Gerndt said on 30 August, 2012 at 6:37 pm

    CSSEdit, now folded into a premium product called Espresso, solves this problem the best way: you insert comment containing “@group MyGroupName” followed by the CSS for that group, followed by comment “@end”. When you view this file in CSSEdit, it shows the groups as folders in a sidebar. A fantastic way to keep your large CSS files organized. http://macrabbit.com/espresso/

Leave a Reply

Respond to Tags in CSS files

Hi there, I am Harry Roberts. I am a 21 year old web developer from the UK. I Tweet and write about web standards, typography, best practices and everything in between. You should browse and search my archives and follow me on Twitter, 7,791 people do.

via Ad Packs