Question

我使用了一些CSS框架，比如Bootstrap，可以快速构建看起来不错的网站。可悲的是，他们都要求我在我的HTML中添加额外的标记以使其工作。

是否存在遵循不同哲学的CSS框架，而不仅仅是将所有额外的类和元素放入我的标记中？

Answer 1

实际上，您可以将Bootstrap与CSS预处理器（例如Less或Sass一起使用，以保持干净的ligth HTML标记。

如果你不了解这些工具，他们绝对值得一看。使用它们，您可以使用变量和mixins构建样式表，如下所示（Sass语法）：

$main-color: rgba(21, 34, 64);

@mixin button {
    border: 1px solid black;
    padding: 5px;
}
html {
    background-color: $main-color;
}

nav {
    a {
        @include button;
    }
}

编译为CSS时，前一个块代码将呈现：

html {
    background-color: rgba(21, 34, 64);
}

nav a {
    border: 1px solid black;
    padding: 5px;
}

当框架（例如Bootstrap或Foundation（也是很好的框架）提供Less和Sass文件时，您可以在样式表中包含大部分框架逻辑，而不是向HTML添加类。

Answer 2

您可以尝试Semantic UI。它的名字中有“语义”权利！

这是他们头版的一个例子。

<nav class="ui menu">
  <h3 class="header item">Title</h3>
  <a class="active item">Home</a>
  <a class="item">Link</a>
  <a class="item">Link</a>
  <span class="right floated text item">
    Signed in as <a href="#">user</a>
  </span>
</nav>

不需要非语义元素的CSS框架

2 个答案: