2

我正在开发一个我想出售的响应式主题。我真的想让它一目了然地理解发生了什么。从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>

鉴于我在引导程序和基础上构建我的风格，这是否太多了？或者只要它可读就可以吗？

4

1 回答 1

2

您应该使用诸如 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>

并且出于多功能主题的目的，更改默认值或添加用户仍然可以执行的附加样式：按钮

于 2013-10-29T08:53:56.540 回答