3

我最近玩过 CSS 网格，包括像 Susy ( http://susy.oddbird.net/ )、Foundation ( http://foundation.zurb.com/ ) 和语义网格系统 ( http:// /semantic.gs/）。

他们都共享这个“包括”网格混合的选项，而不是指定一个 html 类，例如

.some-div{
  @include grid-column(4);
}

虽然这似乎是一种很好的语义方法，但我想知道 css 权重、css 逻辑方面的成本，以及是否真的值得只是语义化？

使用 mixin 网格与 html 类的优缺点是什么？

4

2 回答 2

6

为什么 HTML/CSS 语义很重要

网上有很多关于这个的文章！只需谷歌它，你会发现很多宝贵的信息。

这是一个很好的例子：语义 HTML 有多重要？

语义 html 很重要，因为它是：

  • 干净——阅读和编辑更容易，在维护期间节省时间和金钱，而且您不必强迫所有用户下载臃肿的样式库，其中许多甚至在网站上都没有使用

  • 更易于访问——更多种类的设备可以更好地理解它。然后，这些设备可以根据最适合设备的方式添加自己的样式和演示。它也更适合 JS 框架。

  • 搜索引擎友好——这仍然值得商榷，因为搜索引擎对内容而不是代码进行排名，但搜索引擎正在更多地利用微格式之类的东西来理解内容。

对我来说最重要的论点是语义方法只是……正确的做法。仔细遵循这个方法，你就会少有后悔的理由。

为什么我不同意@Mohamad 的回答

谷歌是一个坏例子

谷歌的语义方法是极端主义的，并且多次违反他们自己的风格指南，这很荒谬。只要看看 Google 搜索结果或 HTML 的 HTML 代码，你就会感到恶心。有必要了解谷歌是一个超高负载的网站，他们以毫秒为单位交换一切。

CSS 很笨重，使用 SASS

Mohamad 的主要论点是语义方法在大型项目中是困难的。事实上，这只适用于老式 CSS。

事实上，使用纯 CSS 的语义样式会适得其反。项目越大，采用语义方法所需的努力就越多。

但是有SASS。任何尝试过 SASS 的人，都永远不会回到原版 CSS。SASS 提供了许多令人难以置信的强大改进，其中一些使编码在语义上毫不费力。

SASS 代码被编译成普通的 CSS 代码。了解 SASS 最重要的一点是，您只需要关心 SASS 代码的结构和可读性。生成的 CSS 代码可能难以阅读并包含重复项，但这不是问题，因为 CSS 是由服务器压缩的。

@延长

与 HTML/CSS 语义相关的最重要的 SASS 特性是@extend指令。它允许您将可重用的样式块注入语义选择器，同时生成高效的 CSS。

首先，声明一个要重用的样式块，例如：

%glyph {
  display: inline;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat; }

您可以稍后在语义上将其包含到不同的选择器中：

.star {
  @extend %glyph;
  background-image: url('../images/star.png'); }

.extenral-link {
  @extend %glyph;
  background-image: url('../images/external-link.png'); }

生成的 CSS 将非常有效：

.star, .extenral-link { 显示：内联；宽度：16px；高度：16px；背景重复：不重复；}

.star { 背景图像： url("../images/star.png"); }

.extenral-link { background-image: url("../images/external-link.png"); }

@包括

不幸的是，您不能@extend在媒体查询中使用漂亮的功能。因此，如果您进行响应式设计，则必须生成带有重复片段的 CSS 代码。正如我之前所说，由于 gzip，CSS 中的重复不是问题，重要的是 SASS 的清洁度。

Mixins ( @include) 允许您将可重用样式块注入选择器。它们没有有效地分组，但它们接受参数并且可以为不同的语义选择器生成不同的样式：

@import 'singularitygs';

$breakpoint: 300px;

$grids: 2 3;
$grids: add-grid(6 at $breakpoint);

%column {
  background-color: pink;
  min-height: 5em;
  margin-bottom: 1em;}

#welcome {
  @extend %column;
  @include grid-span(1, 1);

  @include breakpoint($breakpoint) {
    @include grid-span(2,1); }}

#product-features {
  @extend %column;
  @include grid-span(1, 2); 

  @include breakpoint($breakpoint) {
    @include grid-span(2,3); }}

#description {
  @extend %column;
  clear: both;  

  @include breakpoint($breakpoint) {
    @include grid-span(2,5); }}

产生：

#welcome, #product-features, #description {
  background-color: pink;
  min-height: 5em;
  margin-bottom: 1em;
}

#welcome {
  width: 38.09524%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none;
}
@media (min-width: 300px) {
  #welcome {
    width: 31.03448%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}

#product-features {
  width: 57.14286%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 300px) {
  #product-features {
    width: 31.03448%;
    float: left;
    margin-right: -100%;
    margin-left: 34.48276%;
    clear: none;
  }
}

#description {
  clear: both;
}
@media (min-width: 300px) {
  #description {
    width: 31.03448%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

演示：http ://sassbin.com/gist/5883243/

指南针扩展

正如您在上面注意到的，我使用了一个grid-span未在代码中声明的 mixin。那是因为它来自令人敬畏的 Singularity 扩展。

众多 Compass 扩展的生态系统为您提供了一套满足所有需求的强大工具：语义网格系统、响应式设计、颜色、数学、各种样式......您不必为每个项目重新发明一千个轮子建造！

阅读有关 SASS 的内容

对于 SASS 新手来说，这是一个很好的起点：https ://github.com/Snugug/training-glossary/wiki ，由Sam Richard aka Snugug创建。

于 2013-06-28T08:25:47.087 回答
2

我经常觉得一些语义网格的倡导者从来没有写过复杂的应用程序。与以往一样，答案是众所周知的“取决于”。

这取决于您的风格、团队和应用程序。在一些需要模块化设计的项目中，语义化需要额外的代码和努力，但回报很少。在其他更简单的情况下，这很好。看看 Google 使用的 CSS。不是每个人都是谷歌大小，但这说明了我的“依赖”点。

HTML 5 的出现解决了其中的一些问题，例如section,header和article. 我倾向于在语义上使用这些。但是我的 CSS 类名倾向于描述我设计的抽象部分，而不是具体的东西。

没有直接的答案，但请注意不要浪费太多时间担心这些问题。如果您的申请迟到或没有成功，这意味着很少。

做你和你的团队觉得舒服的事。

于 2013-06-27T23:21:22.307 回答