CSS网格:语义的重要性

Question

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

他们都共享这个"包括"网格mixin的选项,而不是指定一个html类,例如

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

虽然这看起来像是一个很好的语义方法,但我想知道css权重,css逻辑方面的成本,以及它是否真的值得它只是语义？

使用mixin grid vs html类的优缺点是什么？

Answer 1

为什么HTML/CSS语义很重要

网上有一些关于此的文章!只需谷歌它,你会发现很多宝贵的信息.

这是一个很好的:语义HTML有多重要？

语义html很重要,因为它是:

• 清洁 - 更容易阅读和编辑,这样可以节省维护期间的时间和金钱,而且您不必强迫所有用户下载臃肿的样式库,其中许多甚至不在网站上使用

• 更易于访问 - 可以通过更多种类的设备更好地理解它.然后,这些设备可以根据设备的最佳设置添加自己的风格和演示.它也更适合JS框架.

• 搜索引擎友好 - 这仍然是有争议的,因为搜索引擎排名内容而非代码,但搜索引擎正在更多地利用微格式等内容来理解内容.

对我来说最重要的论点是语义方法只是......正确的做法.仔细遵循这种方法,你就会有更少的遗憾.

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

谷歌就是一个糟糕的例子

谷歌的语义学方法极端主义,并且违反了他们自己的风格指南很多次,这太荒谬了.只需查看Google搜索结果或HTML的HTML代码,您就会感到恶心.有必要了解谷歌是一个超高负荷的网站,他们交易一切有利于毫秒加载.

CSS使用起来很笨重,使用SASS

Mohamad的主要论点是大型项目的语义方法很难.事实上,这只适用于旧式CSS.

实际上,在纯CSS中使用语义风格会产生反作用.项目越大,语义方法所需的工作就越多.

但是有SASS.无论谁尝试过SASS,都不会回归到香草CSS.SASS提供了许多强大的改进,其中一些使编码在语义上毫不费力.

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

@延伸

@extend指令是关注HTML/CSS语义的最重要的SASS特性.它允许您将可重用的样式块注入语义选择器,同时生成高效的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 {display:inline; 宽度:16px; 身高:16px; background-repeat:no-repeat; }

.star {background-image: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创建.