At present I have a table that looks similar to this -
Code: Select all
<tr>
<td style="background-color: #D9FFB3; color: #000000;" class="RoundBottomLeft">7</td>
<td style="background-color: #D9FFB3; color: #000000;">88</td>
<td style="background-color: #D9FFB3; color: #000000;">27</td>
<td style="background-color: #D9FFB3; color: #000000;">36</td>
<td style="background-color: #D9FFB3; color: #000000;" class="RoundBottomRight">240</td>
</tr>The CSS is -
Code: Select all
.RoundBottomLeft
{
border-bottom-left-radius: 20px;
}
.RoundBottomRight
{
border-bottom-right-radius: 20px;
}The table is created using PHP, based on a MySQL query. The background-color could be one of 4 different colours, depending on the result.
I have started looking at using classes to control all the style elements, as I figure it is probably easier to manage long term, and if I need to use Javascript to change any of them it is probably easier to change a whole class, rather than numerous individual style elements.
However, in my example above, I would need 12 separate classes:
RoundBottomLeft * 4 colors
standard * 4 colors
RoundBottomRight * 4 colors
Whereas in my existing setup I need 2 x classes (RoundBottomLeft, RoundBottomRight) and the default (td), and 4 x (color) styles. (7 in total).
So I was wondering what is generally considered as best practice in this example (lots of easy to manage CSS, or a smaller number, or more difficult to manage styles).