Originally Posted by jasonm56 
I haven't been doing any css work in the last year or so and I started doing some websites with a ton of columns. I was wondering if my code would be considered good/clean. Is this an industry standard or could it be made better/more compatible?
Code:
.col3, .col3_last{
width: 320px;
height: 160px;
background: #ccc;
float: left;
}
.col3 {
margin: 0 10px 10px 0;
}
Now my reasoning is that there will be 3 col in a row. I want to have the 10px spacing between col 1&2 and another 10 between col2&3. I DO NOT want the last col in each row to have 10px margin.
What would you change? What is the industry standard for naming columns these days (I never had a formal way of naming them)? |
it's close enough. it's the same approach i take. i prefer to get away from having multiple class names though - it's not very practical if you're working with some kind of cms where you don't have absolute control over what html is output. imo, a safer approach would be something like:
Code:
.col3
{
display: inline /*for ie 6. margins are automatically doubled on floated blocks, and i have no clue why */
float: left;
width: 320px;
background: #ccc;
margin: 0 10px 10px 0;
}
.col3:last-child,
.col3.last /* again, for IE */
{
margin: 0 0 10px 0;
}
i use :last-child as a fall back instead of manually attaching a separate class myself - useful for looped content and avoids writing any conditional statements. the catch is IE doesn't support it, but i rely on javascript to attach it instead of going into my actual core/template code:
Code:
// uses jquery
// i user the html5 boilerplate method for handling conditional IE css
jQuery(document).ready(function() {
jQuery(".ie6 .col3:last-child, .ie7 .col3:last-child, .ie8 .col3:last-child").addClass('last');
}
with this method, you only have to deal with adding the extra class when it's needed.