Question

我正在制作一个我想要销售的响应式主题。我真的希望一眼就能理解发生了什么。从基础3迁移到bootstrap 3和Foundation 4（在我看来，如其他地方所述）的一个权衡因素是在设计多种屏幕尺寸时必须采用的更加详细的命名。

因此，我尽可能地尝试实现这样的目标：

<a class="button soluks_button square_round no_bold">Button</a>

或者这个

<a class="custom-button green square-round button-in-navbar text-shadow">Button</a>

鉴于我在引导程序和基础之上构建我的样式，这太多了吗？或只要它的可读性可以吗？

Answer 1

您应该使用诸如SASS或LESS之类的CSS预处理来保持HTML语义，并使您的最终用户更容易使用。

使用SASS指令@extend，您可以像当前一样提供类名，但是可以在css中扩展它们，而不是强迫用户记住在html中包含每个类名。但是，通过使用@extend，如果需要/如果用户想要更改默认值，仍可以单独应用这些类。像这样：

.button {
    display: inline-block;    
}
.square-round {
    @extend .button;
    border-radius: 5px;
}
.no-bold {
    font-weight: normal;
}
.soluks_button {
    @extend .square-round; // which extends .button by inheritance
    background: blue;
}

然后你的html可能更加语义化，只需给出实际元素本身的类：

<a class="soluks_button no-bold">button</a>

为了多功能主题的目的，要更改默认值或添加用户仍可以执行的其他样式：按钮

太多的类与灵活可读的CSS类

1 个答案: