如何构建CSS类？实体或方面？

Question

我想知道什么更适合CSS哲学:

1. CSS类标记实体 - 或 -
2. CSS类标记方面

例如,让我们将单元格作为产品价格表和页脚单元格,其中包含所有价格的总和.

在第一种情况下,每个单元格只有一个类:product-priceresp.product-price-sum(或者price,例如,行有一个product类)换句话说:类标识事物.

在两种情况下,单元格将具有许多类,这些类定义了产品价格的属性/方面,例如numeric,currency以及sum页脚的附加类.numeric将文本定义为右对齐,sum将单元格标记为粗体.换句话说:类描述事物.

我无法确定哪种方法更好.在过去,我使用了两者的混合,这很快导致了一堆丑陋的非结构化CSS类,具有冲突的样式和一些丑陋的!important黑客.

第一种方法显然有一些冗余,因为一个会有很多类(product-*),并且大多数都会共享常见的CSS属性.

第二个问题在于只对一个地方进行不同的格式化时,让我们说产品价格总和.可能有其他地方也分配了完全相同的三个类别,但与产品价格没有任何关系.在这种情况下,必须使用周围的HTML标记以某种方式"寻址"HTML文件中的特定位置.

关于如何处理这个问题,是否有任何经验法则,指南,经验证的概念等？

Answer 1

只是一个观察...人们往往忘记CSS是等级的.让我给你一个非常简单的样本(请将标签减少到最小):

<table class="product">
    <thead>
        <tr><th>Name</th><th class="price">Price</th></tr>
    </thead>
    <tbody>
        <tr><td>Product 1</td><td class="price">1</td></tr>
        <tr><td>Product 2</td><td class="price">2</td></tr>
        <tr><td>Product 3</td><td class="price">3</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Total</td><td class="price">6</td></tr>
    </tfoot>
</table>

您可以使用标记样式组合类样式以固定要应用样式的位置:

table { /* styles for all tables */ }
.product { /* styles for the product table */ }
.product thead { /* styles for the all product table header row */ }
.product thead th{ /* styles for header row generic column */ }
.product thead .price { /* styles for header row price column */ }
.product tbody { /* styles for the all product table data row */ }
.product tbody td { /* styles for data row generic column */ }
.product tbody .price { /* styles for data row price column */ }
.product tfoot { /* styles for the all product table summarize row */ }
.product tfoot td { /* styles for summarize row generic column */ }
.product tfoot .price { /* styles summarize row price column */ }

或者你只能使用简单的表格标签(没有th,thead,tbody和tfoot标签):

<table class="product">
    <tr class="header"><td>Name</td><td class="price">Price</td></tr>
    <tr class="data"><td>Product 1</td><td class="price">1</td></tr>
    <tr class="data"><td>Product 2</td><td class="price">2</td></tr>
    <tr class="data"><td>Product 3</td><td class="price">3</td></tr>
    <tr class="footer"><td>Total</td><td class="price">6</td></tr>
</table>

CSS就是

.product { /* styles for the product table */ }
.product .header { /* styles for the all product table header row */ }
.product .header td{ /* styles for header row generic column */ }
.product .header .price { /* styles for header row price column */ }
.product .data { /* styles for the all product table data row */ }
.product .data td { /* styles for data row generic column */ }
.product .data .price { /* styles for data row price column */ }
.product .footer { /* styles for the all product table summarize row */ }
.product .footer td { /* styles for summarize row generic column */ }
.product .footer .price { /* styles summarize row price column */ }

这不是最终解决方案.只是解决问题的新方法.

还要记住,您可以使用自定义属性向CSS指示某些状态或其他信息.看这个样本:

<table class="product">
    <tr class="header"><td>Name</td><td class="price">Price</td></tr>
    <tr class="data"><td>Product 1</td><td class="price">1</td></tr>
    <tr class="data" selected="selected"><td>Product 2</td><td class="price">2</td></tr>
    <tr class="data"><td>Product 3</td><td class="price">3</td></tr>
    <tr class="footer"><td>Total</td><td class="price">6</td></tr>
</table>

看到"tr"标签中的"selected"属性对表的标准重新定义没有影响,因为它不是标签的可识别属性,但它可以由CSS(以及javascript)识别.不是这里的情况).像这样:

.product tr[selected=selected] { /* styles for the selected row */ }