<分区>
我正在开发一个我想出售的响应式主题。我真的想让它很容易让人一眼就明白发生了什么。从 foundation 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>
鉴于我是在 bootstrap 和 foundation 之上构建我的样式，这是否太多了？还是只要可读就可以？
最佳答案
您应该使用 CSS 预处理(例如 SASS 或 LESS)来保持 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>
并且为了通用主题的目的，更改默认值或添加其他样式用户仍然可以这样做: 按钮
关于html - 太多的类与灵活可读的 css 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19652308/