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.
Written by Harry Roberts on CSS Wizardry.
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.
Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.
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.
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.