2
\$\begingroup\$

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}
\$\endgroup\$
5
\$\begingroup\$

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.

\$\endgroup\$
3
\$\begingroup\$

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>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.