专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
码农翻身  ·  中国的大模型怎么突然间就领先了？ ·  15 小时前  
程序员的那些事  ·  OpenAI ... ·  2 天前  
程序员小灰  ·  3个令人惊艳的DeepSeek项目，诞生了！ ·  2 天前  
OSC开源社区  ·  宇树王兴兴早年创业分享引围观 ·  4 天前  
程序猿  ·  “未来 3 年内，Python 在 AI ... ·  5 天前  
51好读  ›  专栏  ›  SegmentFault思否

现代 CSS 进化史

SegmentFault思否  · 公众号  · 程序员  · 2018-02-10 08:00

正文

英文：https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525 编译：缪斯（https://segmentfault.com/u/muse）

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

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

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

CSS基本样式使用

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

  1.     
  2.      lang="en">
  3.     
  4.        charset="UTF-8">
  5.       Modern CSS
  6.        rel="stylesheet" href="index.css">
  7.     
  8.     
  9.       
    This is the header.
  10.       
  11.         
    This is the main content.
  12.         
    ...
  13.       
  14.       
  15.         




    

    This is the navigation section.
  16.         
    ...
  17.       
  18.       
  19.         
    This is an aside section.
  20.         
    ...
  21.       
  22.       
    This is the footer.
  23.     
  24.     

上面的HTML标签中没用使用任何class或者id。

在没有任何CSS样式的情况下，我们的网站看起来是这个样子：

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

  1.     /* BASIC TYPOGRAPHY                       */
  2.     /* from https://github.com/oxalorg/sakura */
  3.     html {
  4.       font-size: 62.5%;
  5.       font-family: serif;
  6.     }
  7.     body {
  8.       font-size: 1.8rem;
  9.       line-height: 1.618




    
;
  10.       max-width: 38em;
  11.       margin: auto;
  12.       color: #4a4a4a;
  13.       background-color: #f9f9f9;
  14.       padding: 13px;
  15.     }
  16.     @media (max-width: 684px) {
  17.       body {
  18.         font-size: 1.53rem;
  19.       }
  20.     }
  21.     @media (max-width: 382px) {
  22.       body {
  23.         font-size: 1.35rem;
  24.       }
  25.     }
  26.     h1, h2, h3, h4, h5, h6 {
  27.       line-height: 1.1;
  28.       font-family: Verdana, Geneva, sans-serif;
  29.       font-weight: 700;
  30.       overflow-wrap: break-word;
  31.       word-wrap: break




    
-word;
  32.       -ms-word-break: break-all;
  33.       word-break: break-word;
  34.       -ms-hyphens: auto;
  35.       -moz-hyphens: auto;
  36.       -webkit-hyphens: auto;
  37.       hyphens: auto;
  38.     }
  39.     h1 {
  40.       font-size: 2.35em;
  41.     }
  42.     h2 {
  43.       font-size: 2em;
  44.     }
  45.     h3 {
  46.       font-size: 1.75em;
  47.     }
  48.     h4 {
  49.       font-size: 1.5em;
  50.     }
  51.     h5 {
  52.       font-size: 1.25em;
  53.     }
  54.     h6 {
  55.       font-size: 




    
1em;
  56.     }

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

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

CSS的布局使用

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

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

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

  1.     /* RESET LAYOUT AND ADD COLORS */
  2.     body {
  3.       margin: 0;
  4.       padding: 0;
  5.       max-width: inherit;
  6.       background: #fff;
  7.       color: #4a4a4a;
  8.     }
  9.     header, footer {
  10.       font-size: large;
  11.       text-align: center;
  12.       padding: 0.3em 0;
  13.       background-color: #4a4a4a;
  14.       color: #f9f9f9;
  15.     }
  16.     nav {
  17.       background: #eee;
  18.     }
  19.     main {
  20.       background: #f9f9f9;
  21.     }




    

  22.     aside {
  23.       background: #eee;
  24.     }

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

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

基于浮动的布局

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

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

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

  1.     /* FLOAT-BASED LAYOUT */
  2.     body {
  3.       padding-left: 200px;
  4.       padding-right: 190px;
  5.       min-width: 240px;
  6.     }
  7.     header, footer {
  8.       margin-left: -200px;
  9.       margin-right: -190px;   
  10.     }
  11.     main, nav, aside {
  12.       position: relative;
  13.       float: left;
  14.     }
  15.     main {
  16.       padding: 0 20px;
  17.       width: 100%;
  18.     }




    

  19.     nav {
  20.       width: 180px;
  21.       padding: 0 10px;
  22.       right: 240px;
  23.       margin-left: -100%;
  24.     }
  25.     aside {
  26.       width: 130px;
  27.       padding: 0 10px;
  28.       margin-right: -100%;
  29.     }
  30.     footer {
  31.       clear: both;
  32.     }
  33.     * html nav {
  34.       left: 150px;
  35.     }

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

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

基于Flexbox的布局

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

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

  1.     
  2.      lang="en">
  3.     




    

  4.        charset="UTF-8">
  5.       Modern CSS
  6.        rel="stylesheet" href="index.css">
  7.     
  8.     
  9.       
    This is the header.
  10.       
     class="container">
  11.         
  12.           
    This is the main content.
  13.           
    ...
  14.         
  15.         
  16.           
    This is the navigation section.
  17.           




    

    ...
  18.         
  19.         
  20.           
    This is an aside section.
  21.           
    ...
  22.         
  23.       

  • This is the footer.

    • 下面是flexbox布局的CSS代码： 

    1.     /* FLEXBOX-BASED LAYOUT */
    2.     body {
    3.       min-height: 100vh;
    4.       display: flex;
    5.       flex-direction: column;
    6.     }
    7.     .container {
    8.       display: flex;




    

    9.       flex: 1;
    10.     }
    11.     main {
    12.       flex: 1;
    13.       padding: 0 20px;
    14.     }
    15.     nav {
    16.       flex: 0 0 180px;
    17.       padding: 0 10px;
    18.       order: -1;
    19.     }
    20.     aside {
    21.       flex: 0 0 130px;
    22.       padding: 0 10px;
    23.     }

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

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

    最大的缺点是CSS代码本身——flexbox虽然去掉了浮动的Hack，但是代码的可读性上变得更差了。你很难去理解flexbox的CSS，并且不知道页面上是如何去布局所有元素的。在写flexbox布局代码的时，有很多时候靠的是大量的猜测和尝试。

    特别需要注意的是，flexbox被设计用来在单行或者单列中分割元素的——它不是设计用来给整个页面做布局的！尽管它能很好的实现（相对于浮动布局好很多）。另一种不同的规范是用来处理多行或者多列布局的，我们称之为CSS 网格。

    基于Grid的布局

    CSS网格最早在2011年提出的（比flexbox提案晚不了多久），但是花了好长时间才在浏览器上普及起来。截止2018年初，大多数现代浏览器都已经支持CSS grid（这比一两年前有巨大的进步了）。

    下面我们看一下基于网格布局的例子，注意在这个例子中我们摆脱了flexbox布局中必须使用 的限制，我们可以简单的使用原始的HTML，先看下CSS文件： 

    1.     /* GRID-BASED LAYOUT */




    

    2.     body {
    3.       display: grid;
    4.       min-height: 100vh;
    5.       grid-template-columns: 200px 1fr 150px;
    6.       grid-template-rows: min-content 1fr min-content;
    7.     }
    8.     header {
    9.       grid-row: 1;
    10.       grid-column: 1 / 4;
    11.     }
    12.     nav {
    13.       grid-row: 2;
    14.       grid-column: 1 / 2;
    15.       padding: 0 10px;
    16.     }
    17.     main {
    18.       grid-row: 2;
    19.       grid-column: 2 / 3;
    20.       padding: 0 20px;
    21.     }
    22.     aside {
    23.       grid-row: 2;
    24.       grid-column: 3 / 4;
    25.       padding: 0 10px;
    26.     }
    27.     footer {
    28.       grid-row: 3;
    29.       grid-column: 1 / 4;
    30.     }

    虽然结果看起来和基于flexbox的布局一样，但是CSS在很大程度上得到了改进，它清晰地表达出了期望的布局方式。行和列的大小和形状在body选择器中定义，每一项item直接通过他们所在行和列的位置定义。

    grid-column 这个属性你可能觉得不太好理解，它定义了列的起点和终点。这个地方让你觉得困惑的可能是明明有3列，却为什么定义的范围是1到4，通过下面的图片你就能理解了：

    第一列是从1到2，第二列是从2到3，第三列从3到4，所以头部的 grid-column 是从1到4占据整个页面，导航的 grid-column 是从1到2占据第一列等等

    一旦你习惯了grid语法，你会觉得它是一种非常理想的CSS布局方式。唯一缺点就是浏览器支持，幸运的是过去一年中浏览器的支持又得到了进一步的提高。作为专为CSS设计的第一款真正的布局工具很难描绘它的重要性，从某种意义上来说，由于现有的工具需要太多的hack和变通方式去实现，因此web设计者过去对于布局的创意上一直很保守，CSS网格的出现有可能会激发出一批从未有过的创意布局设计——想想还是挺激动人心的！

    使用CSS预处理器扩展CSS语法

    到目前为止，我们介绍了CSS的基本样式和布局，现在我们再来看下那些帮助CSS提升语言本身体验的工具，先从CSS预处理器开始吧。

    CSS预处理器允许你使用不同的语言来定义样式，最终会帮你转换为浏览器可以解释的CSS，这一点在当今浏览器对新特性支持缓慢的情况下很有价值。第一个主流的CSS预处理器是2006年发布的Sass，它提供了一个新的更简洁的语法（缩进代替大括号，没有分号等等），同时增加了一些CSS缺失的高级特性，像变量、工具方法还有计算。下面我们使用Sass变量实现下前面例子中带颜色的区域定义： 

    1.     $dark-color: #4a4a4a
    2.     $light-color: #f9f9f9
    3.     $side-color: #eee
    4.     body
    5.       color: $dark-color
    7.     header, footer






    请到「今天看啥」查看全文


    推荐文章
    码农翻身  ·  中国的大模型怎么突然间就领先了？
    15 小时前
    程序员的那些事  ·  OpenAI 奥特曼官宣早产儿！双父生子背后的科技狂人与程序员爱情。网友：人类首个“AGI宝宝”？
    2 天前
    程序员小灰  ·  3个令人惊艳的DeepSeek项目，诞生了！
    2 天前
    OSC开源社区  ·  宇树王兴兴早年创业分享引围观
    4 天前
    程序猿  ·  “未来 3 年内，Python 在 AI 统治地位将被 Java 取代！”
    5 天前
    汽车点评  ·  车叔晚报｜宝马X4，奔驰CLA星战版，长安凌轩，观致再换血
    7 年前
    码农翻身  ·  Java 函数调用是传值还是传引用？ 从字节码角度来看看！
    7 年前
    鱼羊密史  ·  失宠妃子晚上怎样度过？这个妃子做法保证让你脸红心跳
    7 年前
    言安堂  ·  【旧文重读】ReFa和黄金棒能不能瘦脸？
    7 年前
    智慧芽资讯  ·  【免费课程】男神来袭——案例解析专利分析的核心突破
    7 年前
    Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
    51好读 - 好文章就要读起来!