如何使用css框架而不会使太多类的HTML混乱

Question

我想使用css框架但是有太多的类在我的html语义中没有任何意义请帮助我如何在不使用太多类的情况下使用它。我不想用无意义的css课弄乱我的HTML。

Answer 1

使用SASS或LESS版本的框架。

然后您的HTML可能看起来像

<section class="foo"><article class="bar">...</article></section>

你的SASS看起来像：

.foo {
    @extend %row;
}
.bar {
    @extend %col-md-6;
}

也许你会使用mixins而不是抽象类，但你明白了。

Answer 2

在这种情况下，您最好的选择是仅使用您需要的模块（例如网格，组件等）。所有最大的框架，如Bootstrap，PureCSS等，都可以让你这样做。

然后只需从那里使用你真正需要的类（不要改变这些框架的核心）。

我还建议阅读SMACSS，了解如何保持低特异性和名称不变。