Understanding CSS Grouping/ Nesting - html

Question

I know similar questions to this have been asked a bunch of times but I could not find an answer for my specific one. If I have a bunch of CSS selectors that are very similar but are only just different how can I nest or group them.
Here is what I am trying to do.
#cell-left {
background-color:#DDDDDD;
border:2px solid;
height:400px;
margin:20px 10px 0px 32px;
padding: 40px 15px 15px 15px;
text-align:center;
}
#cell-center {
background-color:#DDDDDD;
border:2px solid;
height:400px;
margin:20px 10px 0px 10px;
padding: 40px 15px 15px 15px;
text-align:center;
}
#cell-right {
background-color:#DDDDDD;
border:2px solid;
height:400px;
margin:20px 32px 0px 20px;
padding: 40px 15px 15px 15px;
text-align:center;
}
#row {
width:100%;
margin-top:0px;
}
As you can see all the cells are very common to each other they just have slightly different margins. I know there is a way to do all the cells the exact same then add a .right, .center and .left with just margin in the CSS and cut down on a lot of code.
Thanks in advance for the answer.

Answer 1

Create a cell class which contains the duplicate properties and add it to each of the DOM elements.
CSS
.cell{
background-color:#DDDDDD;
border:2px solid;
height:400px;
padding: 40px 15px 15px 15px;
text-align:center;
}
#cell-left{
margin:20px 10px 0px 32px;
}
#cell-center {
margin:20px 10px 0px 10px;
}
#cell-right {
margin:20px 32px 0px 20px;
}
HTML
<div id="cell-left" class="cell">Something</div>
<div id="cell-right" class="cell">Something</div>
<div id="cell-center" class="cell">Something</div>
Example: http://jsfiddle.net/hKLMj/

Answer 2

If you have just one left, center and right cell then you are fine with the id.
Otherwise use classes, since id-s must be unique and you can't have two elementswith the same id on the page.
And here is the shortened version of your CSS. Since your cell-s are some kind of children (let's assume they're <td>-s of a <tr> with class .row) - you don't have to use classes. This will make your markup cleaner:
tr.row td {
background-color: #ddd;
border: 2px solid;
height: 400px;
padding: 40px 15px 15px 15px;
text-align:center;
margin:20px 10px 0px 10px;
}
also if there are 3 of them in a row you don't have to use classes for defining left and right:
tr.row td:first-child {
margin:20px 10px 0px 32px; /* left cell */
}
tr.row td:last-child {
margin:20px 32px 0px 20px; /* right cell */
}
And the HTML will be
<tr class="row">
<td> left cell </td>
<td> center cell </td>
<td> right cell </td>
</tr>
DEMO

Answer 3

I suggest you use class, it is the only way to group what you want. By the way, I guess you will have some pages with several identical cells and several rows, right ?
(I guess you know that, but in case : It is very bad practice to use twice a same id on a same page. Classes are meant to be used several times on a same page. And ids are meant to be used only once/page.
You can do this :
.cell {
background-color:#DDDDDD;
border:2px solid;
height:400px;
padding: 40px 15px 15px 15px;
text-align:center;
}
.cell-left {
margin:20px 10px 0px 32px;
}
.cell-center {
margin:20px 10px 0px 10px;
}
.cell-right {
margin:20px 32px 0px 20px;
}
.row {
width:100%;
margin-top:0px;
}
And in you HTML you do this
<table border="1">
<tr class="row">
<td class="cell cell-left">row 1, cell 1</td>
<td class="cell cell-right">row 1, cell 2</td>
</tr>
<tr class="row">
<td class="cell cell-left">row 2, cell 1</td>
<td class="cell cell-right">row 2, cell 2</td>
</tr>
</table>
You can chain classes

Answer 4

CSS does not support grouping or nesting. Now, some CSS compilers (e.g. LESS, SASS) support such concepts as well as "mixins" and other neat tricks ..
.. however, remember that all matching CSS rules are applied. The selector specificity and order of declaration only decide which values override others. So, without classes or other hullabaloo:
#cell-left, #cell-center, #cell-right, #row {
background-color:#DDDDDD;
border:2px solid;
height:400px;
padding: 40px 15px 15px 15px;
}
#cell-left, #cell-center, #cell-right {
text-align: center;
}
#cell-left {
margin:20px 10px 0px 32px;
}
#cell-center {
margin:20px 10px 0px 10px;
}
#cell-right {
margin:20px 32px 0px 20px;
}
#row {
width:100%;
margin-top:0px;
}
Now, while it might be beneficial to use classes or a cleaner markup - especially if doing so leads to easier maintenance - the above will achieve the same result as the initial post. YMMV.

Answer 5

It will be more semantically correct to use double class selectors:
.cell {
background-color: #DDDDDD;
border: 2px solid;
height: 400px;
padding: 40px 15px 15px 15px;
text-align: center;
}
.cell.left {
margin: 20px 10px 0px 32px;
}
.cell.center {
margin: 20px 10px 0px 10px;
}
.cell.right {
margin: 20px 32px 0px 20px;
}
This way you will be able to write:
<div class="cell left">Something</div>
<div class="cell center">Something</div>
<div class="cell right">Something</div>
Or even:
<div class="left cell">Something</div>
<div class="center cell">Something</div>
<div class="right cell">Something</div>