Categories for code

CSS3 and naming conventions

July 30, 2009 11:45 pm Published by

At this point my web design career I have almost completely removed directories from my images folder. This is the result of using content management systems like Joomla, and the fact that I rarely have more than a handful of images in my images folder when I initially develop a site. I stopped because I was noticing that I was taking time to create folders like “header” and “background” to organize images, but only placing one or two images in those directories.

Instead, I began using naming conventions. Images with semantic names like “logo.png” and “navigation.png” would get their use or location in the code appended in front of them. So “logo.png” would become “header-logo.png”, “navigation.png” would become “background-navigation.png”. If you look at the source of this site you can see this in action:

#wrapper {
    background: transparent url(images/background-header.jpg) center top repeat-x;

What does all this have to do with CSS3?

Basically, I can now add new styles to images based on my naming conventions. This, of course, applies to more than just images, but this was the first use I’ve found for these that naturally fits my already established workflow.

A little history: attribute selectors

These selectors allow web designers to select items based on just a portion of an attribute. I imagine this was originally developed to allow CSS target the many different kinds of forms elements (you’ve got checkboxes, text, radio buttons, etc) without needing to give each one a separate class. While useful, they were only good at matching exact strings. For example, to add a red background to text inputs I just write a rule like this:

input[type="text"] {
    background-color: #F00;

The future: substring matching attribute selectors

Substring matching attribute selectors are a huge leap up from attribute selectors. They free web designers from relying on matching exact strings, making just about any tag with a selector fair game. One might also find himself using less classes/ids as a result, and it increases the semantic value of attributes. Plus it makes use of naming conventions that many of us web designers have probably been using for years.

I can use these naming conventions to add styles to the images, whereas in the past I would have used an id or class. For example, in the past, if I wanted all the images in the main content area of my site to float right I would have a rule like this:

#content img {
    float: right;

But then let’s say that I wanted certain images to float left to mix it up a little:

#content img.left {
    float: left;

Now I have two rules for my content images that are difficult (well not that difficult) to override. But if I use these new CSS3 selectors, I can write two simple rules that are “easier” to override (should the need arise):

img[src*="right"] {
    float: right;
img[src*="left"] {
    float: left;

The awesome part is that these CSS rules will work for either of my methods described above:

Old method

<img src="images/right/lion.png" alt="Lion on his back" />

New method

<img src="images/right-lion.png" alt="Lion on his back" />

One last thing…

Notice that I am using the * in these, that means that the string “left” or “right” can be anywhere in the src attribute. You can alternatively us ^ or $ which will look at the end of the string only, but won’t be of much use in this instance. Unless I was to place “left” or “right” at the end of the image name, but I would need to make it look like this:


<img src="images/lion-right.png" alt="Lion on his back" />
<img src="images/lion-left.png" alt="Lion on his back" />


img[src$="right.png"] {
    float: right;
img[src$="left.png"] {
    float: left;

For more on CSS2 attribute selectors, check here or here.

For more on CSS3 substring matching attribute selectors.

Battling with IE – 4 CSS methods

March 27, 2008 11:27 am Published by 2 Comments

Recently I have come to the realization that I spend so much time in production that I rarely get to search for things that would be useful, big picture resources/learning for future projects. Basically, I’m bad at keeping up with where CSS and HTML are going. And since I am trying to really push myself to have better skills to contribute to not just my current position, but the world at large, I have found a bunch of great resources.

I have to admit that having a blog and wanting to write well researched and thoughtful articles has really contributed to this. I’m still brewing my last critique of Safari 3.1, and in the process of doing research around this have discovered quite a bit of cool stuff (by the way, my writing still sucks, I use words like stuff too much). So I thought I would list a few way to deal with IE issues.

  1. Eric Meyer is the man, and give us this bit of code to break some of the major issues you will run into with IE. You can see them at his Reset Reloaded article, which I found on this webiste, Keys to Consistent CSS. Here’s the code in case you are too lazy:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    body {
    line-height: 1;
    color: black;
    background: white;
    ol, ul {
    list-style: none;
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: separate;
    border-spacing: 0;
    caption, th, td {
    text-align: left;
    font-weight: normal;
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: "";
    blockquote, q {
    quotes: "" "";


    The above is the old version of the reset. Eric Meyer has a new version of the browser reset, posted Jan ’08.
  2. Another great resource is Dean Edwards IE7 JavaScript library, which fools anything less than IE7 into thinking its IE7. Initially I thought this was awesome. Then I realized it made me lazy. Then I thought it was too big. Now I’m so good, I don’t need it (which is partially true). Version 2 has gotten much smaller, but is still in Beta.
  3. Hacks. As much as I love them, they create invalid CSS. You can use _ before your propertiess to target IE6, and * before them to target IE7 (which also targets IE6 by the way), or both to create properties that affect both: /* Target IE 6 and below*/ #maincontent { width: 400px; _width: 410px; } /* Target IE7 and below */ #maincontent { width: 400px; *width: 410px; } /* Target IE6 and IE7 separately. ***Make sure to put the IE6 ("_") property second*** */ #maincontent { width: 400px; *width: 410px; _width: 415px; } Let me be absolutely clear, I do not endorse hacks, but I have been known to use them in a pinch (a fact that I am not proud of).
  4. And here’s my preferred method, Conditional Comments, which you can use to have specific stylesheets for different browsers. Make sure you put these after your global stylesheet(s) so they properly override the styles.