CSS Code Quality

Question

Is this a good CSS?

    .table1 thead tr td, .table1 tbody tr td, .table2 thead tr td, .table3 tbody tr td:first-child,
    .table4 tbody tr td:first-child, .table7 tbody tr td:first-child ,.table7 tbody tr td:nth-child(2),
    .table8 tbody tr td:first-child, .table9 tbody tr td{background-color:#cfeae6}

    .table1 thead tr td, .table2 thead tr td, .table7 tbody tr td, .table8 tbody tr  td{border-top: 4px solid #a3c6cd; border-bottom:4px solid #a3c6cd}
    .table1 tbody tr td, .table2 tbody tr td, .table3 tbody tr td, .table9   tbody tr td{border:1px solid #a3c6cd;}
    .table1 tbody tr td:first-child, .table2 tbody tr td:first-child, .table5 tbody tr td:first-child, .table9 tbody tr td:first-child, .table9 tbody tr td:nth-child(3){border-left:none}
    .table1 tbody tr td:last-child, .table2 tbody tr td:last-child, .table5 tbody tr td:last-child ,.table8 tbody tr td:last-child,
     table.borderright thead tr td:last-child, .table9 tbody tr td:last-child, .table9 tbody tr td:nth-child(2){border-right:none}

    .table2 tbody tr td{background-color:#e8f5f1}
    .table2 tbody{border-bottom:4px solid #a3c6cd}

    .table5 tbody tr td{border-left:5px solid #a3c6cd; border-right:5px solid #a3c6cd}

    .table7 tbody tr td:first-child ,.table7 tbody tr td:nth-child(2), .table8 tbody tr td{border-right:1px solid #a3c6cd}

    .table9 tbody tr td:first-child{border-right:2px solid #a3c6cd}

Answer 1

Well, I suggest to use some more whitespace and use a CSS minifier to strip the whitespace in production, this doesn't look that nice... Some things:

---

border-top: 4px solid #a3c6cd; border-bottom:4px solid #a3c6cd

This can be easier done by using the border shortcut and the border-style property:

border:4px #a3c6cd;
border-style: solid none;

Here, border-style: solid none; means <bottom,top> <left, right>.

---

You have much too exact selectors. For instance, this:

.table1 thead tr td, .table1 tbody tr td,

Can faster be write as:

.table1 td

The same for all other selectors. Don't be exact if you don't need to be exact.

Answer 2

Chris is right, this is over-scoped. I am not sure why you have .table1, .table2, .table3, .table4, but here:

A. Create one generic table class

.data
{

}   

.data td
{

}

B. Create modifiers for behavior or options

.data--hover tr:active td
{

}

<table class="data data--hover"> <!--See how I conjoin them-->

</table>

C. If they have different appearences, create skin classes

.zebra tr:nth-child(odd) td
{

}

<table class="zebra data data--hover">

</table>