Thoughts on Adjoining / Chaining Classes

[jonedwards]

Okay, so I’m no expert like Coyier, Cederholm or Marcotte, but I’m having a hard time coming to terms with the idea that adjoining classes is bad practice… In this post, I’ll probably end up answering my own question with a question, but the rhetoric has its place. And I’d really like you guys’ feedback, please.

Here’s an example: (ignore the odd spacing on tags)

< div class="group" >
< article class="column one" >
< / article >
< article class="column two" >
< / article >
< article class="column three" >
< / article >< / div >

I set a global class .column, that floats the div, like so:

.column {
float: left;
display: inline;
}

I can use the .column class on paragraphs, divs, whatever…

As expected, I can target the .column by specifying a parent. But, by adjoining the classes _.column_ and _.one_, or _.column.three_, I can also target and style the first or third column differently, like so:

.parent .column {
width: 300px;
margin-right: 40px;
}
.parent .column.three {
width: 260px;
margin-right: 0;
padding-left: 40px;
}

My thinking was that by using .column.three, I save on having numerous class names to call on, e.g. _.column-01_, _.column-02_, _.column-03_ versus the adjoined classes.

Doing this will also allow me to reuse the .one, .two and .three class somewhere else, e.g. _.button.one_ or _li.one_.

Now, according to [CSS Lint](https://github.com/stubbornella/csslint/wiki/Disallow-adjoining-classes “CSS Lint on GitHub”), aren’t handled properly by IE6. And, to quote:

> Generally, it’s better to define styles based on single classes instead of based on multiple classes being present.

Is my methodology sound, or should I be creating entirely new classes?

Also, how does adjoining classes affect page speed versus all new classes?

I need some solid advice…

Thanks in advance.

[jonedwards]

Hey, Joshua. Thanks for the link – good read. Gonna have to change a few things in future…

@StevenCrader – not really, no. But the IE6 reference was only a small part of the question.

[vvmike]

So, Jon, did you end up getting a response on why, aside from ie6-ness, you should avoid adjoining classes?

[rolfen]

I use them generously, and I also was surprized about this.
Come to think of it a little, it is probably because the class “two” could also apply to other adjacent classes, so you can define .column.two, but say you also want to define .level.one for the same element… then you will have a problem because it won’t be clear to what the two applies. You will need to do something like .column-two and .level-one.
But heck, i’m gonna continue using them, I guess. Hey after all, I know what I’m doing.

[magicspon]

Hello,

I’ve been drinking! So just going to write some code… apologises!

< div class="group" > 
    < article class="column--one" >< / article >
    < article class="column--two" >< / article >
    < article class="column--three" > < / article >
< / div >

    [class*="column--"] { float: north; display: trousers; }
    .column--one { color: dreamy; }
    .column--two { position: galactic; }
    .column--three { overflow: drown; }

good night

[Author]

Posts