简评：CSS 是一门入门比较简单，但真正使用起来又很困难的语言（有些人认为它不应该称为一门语言）。CSS 看起来凌乱复杂，其实攻克也不难，了解了 CSS 的发展背景你就会有对它有了系统性的认知。通过这一篇文章，你基本就会对 CSS 有了一个熟识的了解。

CSS 一直被web 开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值，看起来似乎需要做的工作也就这样嘛！然而在一些大型工程中 CSS 的组织是一件复杂和凌乱的事情，你更改页面上任意一个元素的一行 CSS 样式都有可能影响到其他页面上的元素。

为了解决 CSS 错综复杂的继承问题，开发者建立了各种不同的最佳实践，问题是哪一个最佳实践是最好的目前尚无定论，而且有些实践相互之间是完全矛盾的。如果你第一次尝试学习 CSS ，这对于你来说是相当迷惑的。

这篇文章的目的是通过回顾 CSS 的历史背景，介绍下时至2018年的今天 CSS 发展过程中的一些设计模式和工具的演变。通过对这些背景的理解，你将会更轻松的理解每个设计思想并且学以致用。接下来让我们开始吧！

CSS 基本样式使用

我们从一个最简单的网页 index.html 开始，这个文件中包含一个独立的样式文件 index.css :

This is the header.
This is the main content.
    
...
  
This is an aside section.
    
...
  
  

上面的 HTML 标签中没用使用任何 class 或者 id。
在没有任何 CSS 样式的情况下，我们的网站看起来是这个样子：

点击查看在线demo

功能可用，但看起来不好看，我们可以继续在 index.css 加点 CSS 美化下排版：

/* BASIC TYPOGRAPHY                       */
/* from https://github.com/oxalorg/sakura */
html {
  font-size: 62.5%;
  font-family: serif;
}
body {
  font-size: 1.8rem;
  line-height: 1.618;
  max-width: 38em;
  margin: auto;
  color: #4a4a4a;
  background-color: #f9f9f9;
  padding: 13px;
}
@media (max-width: 684px) {
  body {
    font-size: 1.53rem;
  }
}
@media (max-width: 382px) {
  body {
    font-size: 1.35rem;
  }
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1 {
  font-size: 2.35em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.75em;
}
h4 {
  font-size: 1.5em;
}
h5 {
  font-size: 1.25em;
}
h6 {
  font-size: 1em;
}

这地方大部分都是关于排版（字体、行高等）样式的定义，也包含一些颜色和一个 layout 居中设置。为了让每个属性有个合理的值你需要学习点设计理论，但是这个地方我们用到的 CSS 本身并不复杂，你可以直接定义，结果如下所示：

Click here to see a live example

有所变化了吧！正如 CSS 许诺的一样——用一种简单的方式给文档添加上样式，不需要编程或者复杂的业务逻辑。不幸的是，实际情况会复杂的很多，我们不单单使用的是 CSS 的排版和颜色这种简单的样式定义。

CSS 的布局使用

在20世纪90年代，CSS 还未广泛普及之前，对于页面的布局没有太多的选择。HTML 最初是被设计为创建纯文本的一门语言，并不是包含侧边栏、列等布局的动态页面。早期的时候，页面布局通常使用的是 HTML 表格，在行和列中组织内容，这种方式虽然有效，但是把内容和表现杂糅在一块了，如果你想改变网页的布局就得需要修改大量的 HTML 代码。

CSS 的出现推动了内容（HTML）和表现（CSS）的分离，人们开始把所有的布局代码从 HTML 中移除放入到 CSS 中，需要注意的是，和 HTML 一样 CSS 的设计也不是用来做网页内容布局的，所以早期的时候试图解决这种分离设计是很困难的。

我们来用个实际例子来看下如何实现布局，在我们定义 CSS 布局前先重置下 padding 和 margin（会影响布局的计算），不同的区域我们定义不同的颜色（不要太在意好看不好看只要不同区域间足够醒目就可以）

/* RESET LAYOUT AND ADD COLORS */
body {
  margin: 0;
  padding: 0;
  max-width: inherit;
  background: #fff;
  color: #4a4a4a;
}
header, footer {
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background-color: #4a4a4a;
  color: #f9f9f9;
}
nav {
  background: #eee;
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}

现在页面应该看起来如下：

Click here to see a live example

接下来我们用 CSS 来布局下页面内容，我们将按照时间顺序采用三种不同的方式，先从最经典的浮动布局开始吧。

基于浮动的布局

CSS 浮动属性最初是为了将图片浮动在一列文本的左侧或者右侧（报纸上经常看到）。早在21世纪初，web 开发者将这个属性的优势扩展到了任意的元素，这意味着你可以通过 div 的内容浮动创建出行和列的错觉。同样，浮动也不是基于这样的目的设计的，所以兼容性上会有很多问题。

2006年，A List Apart 上发表了一篇热门文章 In Search of the Holy Grail，文章概述了实现圣杯布局的详细方法——一个头部、三列内容和一个底部，你一定觉得一个简单的布局被称为圣杯布局很疯狂吧，但是在当时纯 CSS 的时代这的确很难实现。

下面是一个基于浮动布局的例子，用到了我们文章中提到的一些技术点：

/* FLOAT-BASED LAYOUT */
body {
  padding-left: 200px;
  padding-right: 190px;
  min-width: 240px;
}
header, footer {
  margin-left: -200px;
  margin-right: -190px;   
}
main, nav, aside {
  position: relative;
  float: left;
}
main {
  padding: 0 20px;
  width: 100%;
}
nav {
  width: 180px;
  padding: 0 10px;
  right: 240px;
  margin-left: -100%;
}
aside {
  width: 130px;
  padding: 0 10px;
  margin-right: -100%;
}
footer {
  clear: both;
}
* html nav {
  left: 150px;
}

仔细看下 CSS 代码，这里面为了让它工作包含一些必须的 hack 方式（负边距、clear: both、硬编码的宽度计算等），稍后我们会对这些细节做详细的解释。最终的结果如下：

Click here to see a live example

看起来不错了，但是通过三列的颜色可以看出来他们的高度不一样，页面的高度也没有填充满屏幕。这些问题是浮动布局导致的，所有的浮动只是将内容放在某一区块的左边或者右边，但是没法知道其他区块的高度。这个问题一直没有个好的解决方案，直到 Flexbox 布局的出现。

基于 Flexbox 的布局

Flexbox CSS 属性实在2009年第一次提出来的，但直到2015年才得到浏览器的广泛支持。Flexbox 被设计为定义一个空间在行或者列上如何分布的，这让它比浮动更适合用来做布局，这意味在使用浮动布局十多年后，web开发者终于不再使用带有hack的浮动布局方式了。

下面是一个基于 Flexbox 布局的例子。注意为了让 Flexbox 生效我们需要在三列的外面额外包装一个 div:

This is the header.

    
This is the main content.
      
...
    
This is an aside section.
      
...
    
  
  

下面是 Flexbox 布局的 CSS 代码：

/* FLEXBOX-BASED LAYOUT */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
  padding: 0 20px;
}
nav {
  flex: 0 0 180px;
  padding: 0 10px;
  order: -1;
}
aside {
  flex: 0 0 130px;
  padding: 0 10px;
}

这种方式和浮动布局相比更加紧凑了，虽然 flexbox 一些属性和值初看起来有些困惑，但是好歹不需要像浮动布局那样负边距的 hack 方案了，这是个巨大的进步。最终结果如下：

Click here for a live example

效果好多了！所有的列高度都相同，并且占据了整个页面的高度。从某种意义上来说这似乎是完美的了，但是这个方式也有些小问题，其中一个就是浏览器的兼容性——主流的现代浏览器都支持flexbox，但是一些旧的浏览器不兼容。幸运的是浏览器厂商也正在尽最大努力终止对旧版本浏览器的支持，为web开发者提供更一致的开发体验。另一个问题是我们需要

/* GRID-BASED LAYOUT */
body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: min-content 1fr min-content;
}
header {
  grid-row: 1;
  grid-column: 1 / 4;
}
nav {
  grid-row: 2;
  grid-column: 1 / 2;
  padding: 0 10px;
}
main {
  grid-row: 2;
  grid-column: 2 / 3;
  padding: 0 20px;
}
aside {
  grid-row: 2;
  grid-column: 3 / 4;
  padding: 0 10px;
}
footer {
  grid-row: 3;
  grid-column: 1 / 4;
}

$dark-color: #4a4a4a
$light-color: #f9f9f9
$side-color: #eee
body
  color: $dark-color

header, footer
  background-color: $dark-color
  color: $light-color

main
  background: $light-color
nav, aside
  background: $side-color

sass --watch index.sass index.css

@dark-color: #4a4a4a;
@light-color: #f9f9f9;
@side-color: #eee;
body {
  color: @dark-color;
}

header, footer {
  background-color: @dark-color;
  color: @light-color;
}

main {
  background: @light-color;
}
nav, aside {
  background: @side-color;
}

lessc index.less index.css

h1, h2, h3, h4, h5, h6 {
  **-ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;**
  hyphens: auto;
}

@mixin hyphens($value) {
  -ms-hyphens: $value;
  -moz-hyphens: $value;
  -webkit-hyphens: $value;
  hyphens: $value;
}
h1, h2, h3, h4, h5, h6 {
  @include hyphens(auto);
}

h1, h2, h3, h4, h5, h6 {
  hyphens: auto;
}