CSS - Basic specificity - css

Question

I have an HTML table with numerous columns. I want to set text-align: center on all columns except one.
I've heard that both using !important and unnecessary nesting is frowned upon. What is the "best" way to achieve this?
Using !important:
#my-table td {
padding: 5px;
text-align: center;
}
.my-table-special-td {
text-align: left !important;
}
Unnecessary nesting:
#my-table td {
padding: 5px;
text-align: center;
}
#my-table .my-table-special-td {
text-align: left;
}
Or some other method?
By "best" I mean:
* Conformance to CSS best practices
* Good performance

Answer 1

For performance wise, use inline styling for all your css. This is the technique used in google mail (Gmail) and I think Yahoo! mail as well. So if it's speed you want. Use inline style for everything. Honestly I wouldn't go that route because it does not offer clean and re-usable code.
So I would go with the cleanest solution which is giving the element a class name and avoid using !important. It is definitely frowned upon and it does not have to be used to be honest. The table will respect your class name on your table element. This offers a more clean CSS in the end that works on all browsers. If you are overriding classes in General, it means you might want to rethink the architecture of your CSS. I do not mean you are doing it the wrong way, but we are talking about the best way of doing things aren't we? :)
Happy coding!

Answer 2

Do not use !important, unless you do not have any other choice.
#my-table td {
padding: 5px;
text-align: center;
}
td#my-table-special-td {
text-align: left;
}
you do not have to do any nesting. just use id istead of class and add tag name in front of it as you can see in the above code.
here is an example of it jsFiddle

Answer 3

Personally, I use !important for "overriding" classes. Things like:
.center {text-align:center !important}
.right {text-align:right !important}
And so on - if I specify class="right" on an element, it's because I specifically want it right-aligned and !important helps reflect that.
However in more general cases, you should avoid !important - mostly because once you've used !important, there's no way to override it any more!

Answer 4

You should do it like this:
.tableAll td{
padding: 5px;
text-align: center;
}
and you just want to center only so why define class. Inline style will work in this case and will override matching style of .tableAll.
<table class="tableAll">
<tr>
<td style="text-align: center;"></td>
<td >other all</td>
</tr>
</table>
I don't recommentd using !important.

Answer 5

Actually, both solutions are fine using !important and nesting,
You should not use !important too often, because once it spreads and you use it over and over again, you will be back at the beginning (difficulty in specifying elements specific to override other styles, applied),
but in that particular case you are fine since the !important rule only affects 1 element.
Nesting also works good, as long as you use it for special cases and not for every single element, because once you do so, your code will be unreadable and you will have a very hard time in improving and re factoring.

Answer 6

#my-table td {
padding: 5px;
text-align: center;
}
#my-table td.my-special-td {
text-align:left;
}
Arguably you don't need the #my-table selector as you stated you wanted to all td elements to be aligned to the center.
A more reuseable approach would be to remove the id and just have:
td { text-align:center; }
td.left-align { text-align:left;}
td.right-align {text-align:right;}
Then you can apply the alignment to any td anywhere, as well as override if you need to by adding an id to the table later on.

Answer 7

I won't recommend to use !important . In your case using text-align: center you can center the text and if you want for any column text should be left-align you could make a particular class for that column or better use some advance level CSS3.
In this example I want to change the Last Column of Last row and want to apply class.
I can do this by adding this style.
table tr:last-child td:nth-child(5) {background:red;}
Or better check this example. http://jsbin.com/mizotofe/1/