1

我定义了“t_data”类来自定义我的大多数表的外观。

虽然，在某些情况下，我需要做一个额外的表格专业化：假设我想要“客户”和“订单”的表格看起来不同。

继承样式的默认方法是将两个类的 css 定义描述到同一个块中，如下所示：

table.t_data, table.t_data_order, table.t_data_customer
{
    background-color: #080;
}

这种方式在一定程度上运作良好......直到我得到太多不同的定义。

现在我已经有了这样的东西：

table.t_data thead tr th, table.t_data thead tr td, table.t_data tbody tr th,     table.t_data tbody tr td, table.t_data tfoot tr th, table.t_data tfoot tr td,
table.t_group thead tr th, table.t_group thead tr td, table.t_group tbody tr th,     table.t_group tbody tr td, table.t_group tfoot tr th, table.t_group tfoot tr td
{
    border: #333 1px solid;
}

为了对 t_data 进行自定义以使 t_data_customer 和/或 t_data_order 看起来不同，我需要将该块 TRIPPLE ......并且遗漏一些元素的风险很高......我也有超过 10 个这样的块用于不同的元素（比如背景、字体等）

对于这样的事情，是否有任何 css甚至非 css解决方案？

非常感谢你！

PS如果您没有任何解决方案而只有想法，请不要害羞地分享它们！欢迎任何想法

4

3 回答 3

1

为您的表格和目标添加新的通用 CSS 类怎么样？

.common td
.common th {
}

在向表格添加类之前，您应该确保表格的默认样式不够，例如

td {
    /* Sensible default for all table cells */
}

下一步是为具有替代样式的表找到一个“通用”的类名。流行的框架 twitter bootstrap 使用“table-bordered”作为带边框的表格，其他人认为最好找到一个语义公分母。但这取决于你。

这与语义无关，但自从看到 Nicole Sullivan 的演示文稿后，我找不到演示文稿，但我可以从中找到引用： http ://css-tricks.com/semantic-class-names /

在我最近在 CSS 峰会上看到的 Nicole Sullivan 的演讲中，她点名一些大公司在 CSS 文件中声明完全相同的颜色数千次。

我一直在尝试为我们在 css 文件中编写的内容寻找意义，并以大的共同点为目标。

于 2013-02-23T17:27:23.733 回答
1

可悲的是，你不能用 CSS 做到这一点。幸运的是，您可以使用 CSS 预编译器为您执行此操作（例如：LESS和Sass）。更准确地说，您可以使用Mixins（两种语言都支持）。

Mixins 允许您通过简单地将类名作为其属性之一将类的所有属性嵌入到另一个类中。它就像变量一样，但适用于整个类。Mixin 也可以像函数一样工作，并接受参数，如下面的示例所示。

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

（来自 LESS 的示例）。这是你可以在t_data课堂上做的事情。

于 2013-02-23T17:28:00.070 回答
0

您可以使用 ID 和类，而不是定义许多类。

使用 ID 定义主要的 CSS，使用类定义差异。

<table id="mainstyle" class="variation1"> ...
于 2013-02-23T17:30:35.730 回答