Question

我有一个没有语义类的标记，例如所有表都有类

class="table table-compact"

等。我开始用语义类替换它。所以现在我有：

class="users"

所以我重构了这个项目，现在我的tables.css文件非常庞大。例如，以下结果为：

.investment-mandate-table,
.outputs-table,
.globalvalidationlist-table,
.toplist-table,
.whitelist-table,
.address-book,
.admin-users-table,
.lac-cc-table,
.lac-members-table,
.aaf-instruments-table,
.search-result-aaf,
.search-result-short-list,
.search-result-instruments,
.whitelists-lac-table,
.whitelists-table,
.top-lists-table,
.local-packages-table,
.admin-cycles-table,
.lac-list-table,
.theme-list-table,
.short-list-table,
.cio-instruments-table,
.global-lead-offering-table {
    &:extend(.compact-table all);
    &:extend(.table-striped all);
}

包含大约1000行（每次出现Bootstrap的表CSS规则都被扩展...）。例如（小块）：

.investment-mandate-table > thead > tr > th,
.investment-mandate-table > tbody > tr > th,
.investment-mandate-table > tfoot > tr > th,
.investment-mandate-table > thead > tr > td,
.investment-mandate-table > tbody > tr > td,
.investment-mandate-table > tfoot > tr > td,
/* many many others here ... */
.global-lead-offering-table > thead > tr > th,
.global-lead-offering-table > tbody > tr > th,
.global-lead-offering-table > tfoot > tr > th,
.global-lead-offering-table > thead > tr > td,
.global-lead-offering-table > tbody > tr > td,
.global-lead-offering-table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

我做错了吗？文件的大小根本不会打扰我。但令我困扰的是，这个结果CSS包含数百个CSS规则，其中键选择器是HTML标记（在本例中为：td / th） - 这是一个性能灾难（https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors）。

所以基本上我必须在CSS性能上妥协才能在这种情况下使用语义CSS类吗？

Answer 1

减少CSS输出中的类

根据您的具体情况，只需查看上面的代码，您就可以通过使用属性选择器而不是许多类名来显着减少输出CSS。如果您的-table类的所有都在此代码中表示（或者至少大多数，以便在需要时覆盖一些），则可以执行此操作。所以这可行：

.address-book,
.search-result-aaf,
.search-result-short-list,
.search-result-instruments,
[class*=-table] {
    &:extend(.compact-table all);
    &:extend(.table-striped all);
}

它会减少你原来的19 XXX-table个班级中的18个，当然乘以那些扩展到的地方的数量。

缩减HTML选择器

我能想到的唯一“干净”方式是不非常升级/维护友好，那就是直接修改Bootstrap文件以消除html标签名称并放入什么您希望定位这些元素（这可能会对需要仔细检查的代码的可用性产生进一步的影响）。

我倾向于和它一起生活，就像使用Bootstrap为这个特定操作付出的代价一样，基本上noted in the comment above。

语义类方法会在Bootstrap中导致巨大的低效CSS规则

1 个答案:

减少CSS输出中的类

缩减HTML选择器