CSS的1些程序编写标准总结

日期:2021-03-05 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

在参加经营规模巨大、用时悠长且参加人数诸多的新项目时,全部开发设计者遵循以下标准极其关键:

    维持 CSS 易于维护保养
    维持编码清楚易懂
    维持 CSS 的可扩展性

  以便完成这1总体目标,大家要选用众多方式。

  本文本文档第1一部分将讨论英语的语法、文件格式和剖析 CSS 构造;第2一部分将紧紧围绕方式论、逻辑思维架构和撰写与整体规划 CSS 的观点。
CSS 文本文档剖析

  不管撰写甚么文本文档,大家都理应保持统1的设计风格,包含统1的注解、统1的英语的语法与统1的取名标准。
  总则

  将行宽操纵在 80 字节下列。渐变色(gradient)有关的英语的语法和注解中的 URL 等能够算作列外,终究这一部分大家也束手无策。

  我趋向于用 4 个空格而非 Tab 缩进,而且将申明拆分为多行。
  单1文档与多文档

  有人喜爱在1份文档文档中撰写全部的內容,而我在转移至 Sass 以后刚开始将款式拆分为好几个小文档。这全是很好的做法。不管你挑选哪样,下文的标准都将可用,并且假如你遵循这些标准的话你也不容易遇到甚么难题。这两种写法的差别仅仅在于文件目录和区块题目:
  文件目录

  在 CSS 的开始,我会维护保养1份文件目录,就像这样:

CSS Code拷贝內容到剪贴板
  1. /*------------------------------------*\  
  2.     $CONTENTS  
  3. \*------------------------------------*/  
  4. /**  
  5.  * CONTENTS............You’re reading it!  
  6.  * RESET...............Set our reset defaults  
  7.  * FONT-FACE...........Import brand font files  
  8.  */    

  这份文件目录能够告知别的开发设计者这个文档中实际含有哪些內容。这份文件目录中的每项都与其对应的区块题目同样。

  假如你在维护保养1份单文档 CSS,对应的区块将也在同1文档中。假如你是在撰写1组小文档,那末文件目录中的每项理应对应相应的 @include 句子。
  区块题目

  文件目录理应对应区块的题目。以下:

CSS Code拷贝內容到剪贴板
  1. /*------------------------------------*\  
  2.     $RESET  
  3. \*------------------------------------*/  

  区块题目前缀 $ 可让大家应用 [Cmd|Ctrl]+F 指令搜索题目名时将检索范畴限定在区块题目中。

  假如你在维护保养1份大文档,那末在区块之间空 5 行,以下:

CSS Code拷贝內容到剪贴板
  1. /*------------------------------------*\  
  2.     $RESET  
  3. \*------------------------------------*/  
  4. [Our   
  5. reset   
  6. styles]   
  7.   
  8.   
  9.   
  10.   
  11.   
  12. /*------------------------------------*\  
  13.     $FONT-FACE  
  14. \*------------------------------------*/  

  在大文档中迅速翻动时这些大块的空档有助于区别区块。

  假如你在维护保养多份以 include 联接的 CSS 的话,在每份文档头再加题目便可,无须这样空行。
 编码次序

  尽可能依照特殊次序撰写标准,这将保证你充足充分发挥 CSS 中第1个 C 的实际意义:cascade,堆叠。

  1份整体规划优良的 CSS 理应依照以下排序:

    Reset 万物之根本原因
    元素种类 沒有 class 的 h1、ul 等
    目标和抽象性內容 最1般、最基本的设计方案方式
    子元素 由目标拓宽出来的全部扩展及其子元素
    修复 对于出现异常情况

  这般1来,当你先后撰写 CSS 时,每一个区块都可以以全自动承继在它以前区块的特性。这样便可以降低编码互相相抵的一部分,降低一些独特的难题,构成更理想化的 CSS 构造。

  有关这层面的更多信息内容,明显强烈推荐 Jonathan Snook 的 SMACSS。
 CSS 款式集剖析

CSS Code拷贝內容到剪贴板
  1. [selector]{   
  2.     [property]:[value];   
  3.     [<- Declaration ->]   
  4. }   
  5.   
  6. [挑选器]{   
  7.     [特性]:[值];   
  8.     [<- 申明 ->]   
  9. }   

  撰写 CSS 款式时,我习惯性遵循这些标准:

    class 名字以连标识符(-)联接,除下文提到的 BEM 取名法;
    缩进 4 空格;
    申明拆分为多行;
    申明以有关性次序排序,而非字母次序;
    有前缀的申明适度缩进,从而对齐其值;
    缩进款式集从而反应 DOM;
    保存最终1条申明末尾的分号。

  比如:

CSS Code拷贝內容到剪贴板
  1. .widget{   
  2.     padding:10px;   
  3.     border:1px solid #BADA55;   
  4.     background-color:#C0FFEE;   
  5.     -webkit-border-radius:4px;   
  6.        -moz-border-radius:4px;   
  7.             border-radius:4px;   
  8. }   
  9.     .widget-heading{   
  10.         font-size:1.5rem;   
  11.         line-height:1;   
  12.         font-weight:bold;   
  13.         color:#BADA55;   
  14.         margin-right:-10px;   
  15.         margin-left: -10px;   
  16.         padding:0.25em;   
  17.     }    

  大家能够发现,.widget-heading 是 .widget 的子元素,由于前者的款式集比后者多缩进了1级。这样根据缩进便可以让开发设计者在阅读文章编码时迅速获得这样的关键信息内容。

  大家还能够发现 .widget-heading 的申明是依据其有关性排序的:.widget-heading 是行间元素,因此大家先加上字体样式有关的款式申明,接下来是其它的。

  下列是1个沒有拆分为多行的事例:

CSS Code拷贝內容到剪贴板
  1. .t10    { width:10% }   
  2. .t20    { width:20% }   
  3. .t25    { width:25% }       /* 1/4 */  
  4. .t30    { width:30% }   
  5. .t33    { width:33.333% }   /* 1/3 */  
  6. .t40    { width:40% }   
  7. .t50    { width:50% }       /* 1/2 */  
  8. .t60    { width:60% }   
  9. .t66    { width:66.666% }   /* 2/3 */  
  10. .t70    { width:70% }   
  11. .t75    { width:75% }       /* 3/4*/  
  12. .t80    { width:80% }   
  13. .t90    { width:90% }   

  在这个事例(来自inuit.css’s table grid system)中,将 CSS 放在1行内可使得编码更紧凑型。
 取名标准

  1般状况下我全是以连标识符(-)联接 class 的姓名(比如 .foo-bar 而非 .foo_bar 或 .fooBar),但是在一些特殊的情况下我会用 BEM(Block, Element, Modifier)取名法。

  BEM 取名法可使得挑选器更标准,更清楚,更具词义。

  该取名法依照以下文件格式:

CSS Code拷贝內容到剪贴板
  1. .block{}   
  2. .block__element{}   
  3. .block--modifier{}  

  在其中:

    .block 意味着某个基础的抽象性元素;
    .block__element 意味着组成 .block 的1个子元素;
    .block--modifier 意味着 .block 的某个不一样情况或版本号。

  打个比如:

CSS Code拷贝內容到剪贴板
  1. .person{}   
  2. .person--woman{}   
  3.     .person__hand{}   
  4.     .person__hand--left{}   
  5.     .person__hand--rightright{}  

  这个事例中大家叙述的基础元素是1本人,随后这本人将会是1个女性。大家还了解人有着手,这些是人体的1一部分,而手也是有不一样的情况,好似左手与右手。

  这样大家便可以依据亲元向来划定挑选器的取名室内空间并传递该挑选器的职责,比如依据这个挑选器是1个子元素(__)還是其亲元素的不一样情况(--)。

  由此,.page-wrapper 是1个单独的挑选器。这是1个合乎标准的取名,由于它并不是其它元素的子元素或其它情况;但是 .widget-heading 则与其它目标相关联,它理应是 .widget 的子元素,因此大家理应将其重取名为 .widget__heading。

  BEM 取名法尽管不大好看,并且非常冗杂,可是它使得大家能够根据名字迅速得知元素的作用和元素之间的关联。与此另外,BEM 英语的语法中的反复一部分十分有益于 gzip 的缩小优化算法。

  不管你是不是应用 BEM 取名法,你都理应保证 class 取名恰当,力保1字很少、1字很多;将元素取名抽象性化以提升复用性(比如 .ui-list,.media)。子元素的取名则要尽可能精确(比如 .user-avatar-link)。无需担忧 class 名的数量或长度,由于写得好的编码 gzip 也能合理缩小。
  HTML 中的 class

  以便保证易读性,在 HTML 标识选用两个空格分隔 class 名,比如:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="foo--bar  bar__baz">  

  提升的空格理应可使得在应用好几个 class 时更容易阅读文章与精准定位。
  JavaScript 钩子

  切勿将标识 CSS 款式的 class 用作 JavaScript 钩子。把 JS 个人行为与款式混在1起将没法对其各自解决。

  假如你要把 JS 和一些标识关联起来的话,写1个 JS 专用的 class。简易地说便是划定1个前缀 .js- 的取名室内空间,比如 .js-toggle,.js-drag-and-drop。这代表着大家能够根据 class 另外关联 JS 和 CSS 而不容易由于矛盾而引起不便。

XML/HTML Code拷贝內容到剪贴板
  1. <th class="is-sortable  js-is-sortable">  
  2. </th>  

  上面的这个标识有两个 class,你能够用在其中1个来给这个可排列的报表栏加上款式,用另外一个加上排列作用。
  I18n

  尽管我(该 CSS Guideline 文本文档原作者 Harry Roberts)是个英国人,并且我1向拼写 colour 而非 color,可是以便追求完美统1,我觉得在 CSS 选用美式拼法更佳。CSS 和其它大部分語言全是以美式拼法撰写,因此假如在 .colour-picker{} 中写 color:red 就欠缺统1性。我之前认为另外用两种拼法,比如:

CSS Code拷贝內容到剪贴板
  1. .color-picker,   
  2. .colour-picker{   
  3. }  

  可是我近期参加了1份经营规模巨大的 Sass 新项目,这个新项目中有很多的色调自变量(比如 $brand-color,$highlight-color 这些),每一个自变量要维护保养两种拼法确实艰辛,要搜索并更换时也必须两倍的工作中量。

  因此以便统1,把全部的 class 与自变量都以你参加的新项目的常用拼法取名便可。
 注解

  我应用行宽不超出 80 字节的文本文档块设计风格注解:

CSS Code拷贝內容到剪贴板
  1. /**  
  2.  * This is a docBlock style comment  
  3.  *   
  4.  * This is a longer description of the comment, describing the code in more  
  5.  * detail. We limit these lines to a maximum of 80 characters in length.  
  6.  *   
  7.  * We can have markup in the comments, and are encouraged to do so:  
  8.  *   
  9.    <div class=foo>  
  10.        <p>Lorem</p>  
  11.    </div>  
  12.  *   
  13.  * We do not prefix lines of code with an asterisk as to do so would inhibit  
  14.  * copy and paste.  
  15.  */  
  16.   
  17.   
  18. /**  
  19.  * 这是1个文本文档块(DocBlock)设计风格的注解。  
  20.  *  
  21.  * 这里刚开始是叙述更详尽、篇数更长的注解文章正文。自然,大家要把行宽操纵在 80 字节之内。  
  22.  *  
  23.  * 大家能够在注解中嵌入 HTML 标识,并且这也是个非常好的方法:  
  24.  *  
  25.     <div class=foo>  
  26.         <p>Lorem</p>  
  27.     </div>  
  28.  *  
  29.  * 假如是注解嵌入的标识的话,在它前面不加星号,以防被拷贝进去。  
  30.  */  

  在注解中理应尽可能详尽叙述编码,由于对你来讲清楚易懂的內容对别的人将会并不是这般。每写1一部分编码就要专业写注解以详解。
  注解的扩展用法

  注解有很多很高級的用法,比如:

    准装饰挑选器(Quasi-qualified selectors)
    编码标识
    承继标识

  准装饰挑选器(Quasi-qualified selectors)

  你理应防止太过装饰挑选器,比如假如你能写 .nav{} 就尽可能不必写 ul.nav{}。太过装饰挑选器将危害特性,危害 class 复用性,提升挑选器独享度。这些全是你理应不遗余力防止的。

  但是有时你将会期待告知别的开发设计者 class 的应用范畴。以 .product-page 为例,这个 class 看起来好像1个根器皿,将会是 html 或 body 元素,可是仅凭 .product-page 则没法分辨。

  大家能够在挑选器前再加准装饰(将要前面的种类挑选器注解掉)来叙述大家整体规划的 class 功效范畴:

CSS Code拷贝內容到剪贴板
  1. /*html*/.product-page{}  

  这样大家就可以精确得知该 class 的功效范畴而不容易危害复用性。

  其它事例如:

CSS Code拷贝內容到剪贴板
  1. /*ol*/.breadcrumb{}   
  2. /*p*/.intro{}   
  3. /*ul*/.image-thumbs{}  

  这样大家就可以在不危害编码独享度的前提条件下得知 class 功效范畴。
  编码标识

  假如你写了1组新款式的话,能够在它上面再加标识,比如:

CSS Code拷贝內容到剪贴板
  1. /**  
  2.  * ^navigation ^lists  
  3.  */  
  4. .nav{}   
  5.   
  6. /**  
  7.  * ^grids ^lists ^tables  
  8.  */  
  9. .matrix{}  

  这些标识可使得别的开发设计者迅速寻找有关编码。假如1个开发设计者必须搜索和目录有关的一部分,他要是检索 ^lists 就可以迅速精准定位到 .nav,.matrix 和其它有关一部分。
  承继标识

  将朝向目标的思路用于 CSS 撰写的话,你常常能寻找两一部分 CSS 紧密有关(其1为基本,其1为扩展)却分列两处。大家能够用承继标识来在原元素和承继元素之间创建密不可分联络。这些在注解中的写法以下:

  在元素的基础款式中:

CSS Code拷贝內容到剪贴板
  1. /**  
  2.  * Extend `.foo` in theme.css  
  3.  */  
  4.  .foo{}  

  在元素的扩展款式中:

CSS Code拷贝內容到剪贴板
  1. /**  
  2.  * Extends `.foo` in base.css  
  3.  */  
  4.  .bar{}  

  这样1来大家就可以在两块相隔很远的编码间创建密不可分联络。
 撰写 CSS

  以前的章节关键讨论怎样整体规划 CSS,这些全是易于量化分析的标准。本章将讨论更基础理论化的物品,也将讨论大家的心态与方式。
 撰写新组件

  撰写新组件时,要在下手解决 CSS 以前写好 HTML 一部分。这能够令你精确分辨哪些 CSS 特性能够承继,防止反复消耗。

  先写标识的话,你便可以关心数据信息、內容与词义,在这以后再加上必须的 class 和 CSS 款式。
 朝向目标 CSS

  我以朝向目标 CSS 的方法写编码。我把组件分为构造(目标)与外型(扩展)。正如下列剖析(留意此处并不是示例):

CSS Code拷贝內容到剪贴板
  1. .room{}   
  2.   
  3. .room--kitchen{}   
  4. .room--bedroom{}   
  5. .room--bathroom{}  

  大家在屋子里有很多房间,它们都有相互的一部分:地板、天花板、墙壁和门。这些共享资源的一部分大家能够放到1个抽象性的 .room{} class 中。但是大家也有其它不同寻常的房间:1个厨房将会有地砖,卧室将会有地毯,卫生间将会沒有窗户可是卧室会有,每一个房间的墙壁色调或许也会不1样。朝向对 象 CSS 的思路使得大家把同样一部分抽象性出来构成构造一部分,随后用更实际的 class 来扩展这些特点并加上独特的解决方式。

  因此比起撰写很多各有不一样的控制模块,理应勤奋找出这些控制模块中反复的设计方案方式并将其抽象性出来,写成1个能够复用的 class,将其用作基本随后撰写其它扩展控制模块的独特情况。

  当你要撰写1个新组件时,将其拆分为构造和外型。撰写构造一部分时用最通用性 class 以确保复用性,撰写外型时用更实际的 class 来加上设计方案方式。
 合理布局

  全部组件都不必申明宽度,而由其亲元素或格栅系统软件来决策。

  果断不必申明高宽比。高宽比理应仅仅用于规格早已固定不动的物品,比如照片和 CSS Sprite。在 p,ul,div 等元素上不可当申明高宽比。假如必须的话可使用更为灵便的 line-height。

  格栅系统软件理应作为书架来了解。是它们容下內容,而并不是把它们自身当做內容装起来,正如你先搭起书架再把物品放进去。比起申明它们的规格,把格栅系统软件和元素的其它特性分来开解决更有助于合理布局,也使得大家的前端开发工作中更高效率。

  你在格栅系统软件上不可当加上任何款式,它们仅仅是为合理布局而用。在格栅系统软件內部再加上款式。在格栅系统软件中任何状况下都不必加上盒实体模型有关特性。
 UI 规格

  我用许多方式设置 UI 规格,包含百分比,px,em,rem 和果断甚么都无需。

  理想化状况下,格栅系统软件理应用百分比设置。如上所述,由于我用格栅系统软件来固定不动栏宽和页宽,因此我能够无需理睬元素的规格。

  我用 rem 界定字号,而且辅以 px 以适配旧访问器。这能够兼顾 em 和 px 的优点。下面是1个十分好看的 Sass Mixin,假定你在别处申明了基础字号(base-font-size)的话,用它便可以转化成 rem 和适配旧访问器的 px。

CSS Code拷贝內容到剪贴板
  1. @mixin font-size($font-size){   
  2.     font-size:$font-size +px;   
  3.     font-size:$font-size / $base-font-size +rem;   
  4. }  

  我只在早已固定不动规格的元素上应用 px,包含照片和规格早已用 px 固定不动的 CSS Sprite。
  字号

  我会界定1些与格栅系统软件基本原理相近的 class 来申明字号。这些 class 能够用于双向题目等级分类,有关这点请阅读文章 Pragmatic, practical font-sizing in CSS。
 简写

  CSS 简写理应慎重应用。

  撰写像 background: red; 这样的特性确实很方便,可是你这么写的意思实际上是另外申明 background-image: none; background-position: top left; background-repeat: repeat; background-color: red;。尽管大多数数情况下这样不容易出甚么难题,可是哪怕只出1次难题就值得考虑到要不必舍弃简写了。这里理应改成 background-color: red;。

  相近的,像 margin: 0; 这样的申明确实简约清新,可是還是理应尽可能写清晰。假如你只是想改动底边边距,就要实际1些,写成 margin-bottom: 0;。

  与此另外你必须申明的特性也要写清晰,不必由于简写而波及其它特性。比如假如你只想改掉底部的 margin,那就不必用会把其它边距也清零的 margin: 0。

  简写尽管好,但也很非常容易乱用。
 ID

  在大家刚开始解决挑选器以前,铭记这句话:

  在 CSS 里果断不必用 ID。

  在 HTML 里 ID 能够用于 JS 和锚点精准定位,可是在 CSS 里要是用 class,1个 ID 也不必用。

  Class 的优点在于复用性,并且独享度也其实不高。在新项目中独享度十分非常容易致使难题,因此将其减少就尤其关键。ID 的独享度是 class 的 255 倍,因此在 CSS 中果断不必应用。
 挑选器

  尽量维持挑选器简洁明了高效率。

  根据网页页面元素部位而精准定位的挑选器其实不理想化。比如 .sidebar h3 span{} 这样的挑选器便是精准定位过度依靠相对性部位,假如把 span 移到 h3 和 sidebar 外面时就很难维持其款式。

  构造繁杂的挑选器可能危害特性。挑选器构造越繁杂(如 .sidebar h3 span 为3层,.content ul p a 是4层),访问器的花销就越大。

  尽可能使得款式不依靠于其精准定位,尽可能维持挑选器简约清楚。

  做为1个总体,挑选器理应尽可能简洁明了(比如仅有1层构造),可是 class 名则不可当过度简单,比如 .user-avatar 就远比 .usr-avt 好。

  铭记:class 没有谓是不是词义化;理应关心它们是不是有效。不必强调 class 名要合乎词义,而要重视应用有效且不容易落伍的名字。
  过多装饰的挑选器

  由前文所述,过多装饰的挑选器其实不理想化。

  过多装饰的挑选器是指像 div.promo 这样的。极可能你只用 .promo 也能获得同样的实际效果。自然你将会有时候会必须用元素种类来装饰 class(比如你写了1个 .error 并且想让它在不一样的元素种类中显示信息实际效果不1样,比如 .error { color: red; } div.error { padding: 14px; }),可是大多数数情况下還是理应尽可能防止。

  再举1个装饰过多的挑选器事例,ul.nav li a{}。如前文所说,大家立刻便可以删除 ul 由于大家了解 .nav 是个目录,随后大家便可以发现 a 1定在 li 中,因此大家就可以将这个挑选器改变成 .nav a{}。
  挑选器特性

  尽管访问器特性日渐提高,3D渲染 CSS 速率愈来愈快,可是你還是理应关心高效率。应用简洁明了、沒有嵌套循环的挑选器,不应用全局性挑选器(* {})做为关键挑选器,防止应用日渐繁杂的 CSS3 新挑选器能够防止这样的难题。

  译注,关键挑选器:访问器分析挑选器为从右向左的次序,最右端元素是款式起效的元素,是为关键挑选器。
 应用 CSS 挑选器的目地

  比起勤奋应用挑选器精准定位到某元素,更好的方法是给你要想加上款式的元素立即加上1个 class。大家以 .header ul {} 这样1个挑选器为例。

  假设这个 ul 便是这个网站的全站导航栏,它坐落于 header 中,并且现阶段为止是 header 中唯1的 ul 元素。.header ul{} 确实能够起效,可是这样其实不是好方式,它很非常容易落伍,并且十分晦涩难懂。假如大家在 header 中再加上1个 ul 的话,它就会套用大家给这个导航栏一部分写的款式,哪怕大家构想的并不是这个实际效果。这代表着大家要末要重构很多编码,要末给后边的 ul 新写很多款式来相抵以前的危害。

  你的挑选器务必合乎你要给这个元素加上款式的缘故。思索1下,「我精准定位到这个元素,是由于它是 .header 下的 ul,還是由于它是我的网站导航栏?」这将决策你理应怎样应用挑选器。

  保证你的关键挑选器并不是种类挑选器,也并不是高級目标或抽象性挑选器。比如你在大家的 CSS 中毫无疑问找不到诸如 .sidebar ul {} 或 .footer .media {} 这样的挑选器。

  表述清楚:立即寻找你要加上款式的元素,而非其亲元素。不必想自然地觉得 HTML 不容易更改。用 CSS 立即命里你必须的元素,而非投机性取巧。

 !important

  只在起輔助功效的 class 上用 !important。用 !important 提高优先选择级还可以,比如假如你要让某条标准1直起效的话,能够用 .error { color:red!important; }。

  防止积极应用 !important。比如 CSS 写得很繁杂时不必用它来取巧,好些好梳理并重构以前的一部分,维持挑选器简洁明了而且防止用 ID 将实际效果拔群。
 魔数与肯定精准定位

  魔数(Magic Number)是指那些「很巧合理果」的数据,应用魔数十分不太好,由于它们只是治标不治本并且欠缺扩展性。

  比如应用 .dropdown-nav li:hover ul { top: 37px; } 把往下拉菜单挪动下来远非良策,由于这里的 37px 便是个魔数。37px 会起效的缘故是由于这时候 .dropbox-nav 恰巧高 37px 罢了。

  这时候你应当用 .dropdown-nav li:hover ul { top: 100%; },也即不管 .dropbox-down 多高,这个往下拉菜单都会往下挪动 100%。

  每当你要在编码中放入数据的情况下,请3思而行。假如你能用1个重要字(比如 top: 100% 意即「从上面拉到最下面」)更换之,或有更好的处理方式的话,就尽可能防止立即出現数据。

  你在 CSS 中留下的每个数据,全是你许下而不肯遵循的服务承诺。
 标准分辨

  专业为 IE 写的款式基础上全是能够防止的,唯1必须为 IE 专业解决的是以便解决 IE 不适用的內容(比如 PNG)。

  简而言之,假如你重构 CSS 的话,全部的合理布局和盒实体模型都无需附加适配 IE。也便是说你基础上无需 <!--[if IE 7]> element{ margin-left:⑼px; } < ![endif]--> 或相近的适配 IE 的写法。
 Debugging

  假如你要处理 CSS 难题的话,先把旧编码拿掉再写新的。假如旧的 CSS 中有难题的话,写新编码是处理不上的。

  把 CSS 编码和 HTML 一部分删除,直至沒有 BUG 为止,随后你就了解难题出在哪儿里了。

  有时写上1个 overflow: hidden 或其它能把难题藏起来的编码确实实际效果立即见效,可是 overflow 层面将会压根就没难题。因此要治本,而并不是单纯性治标。
 CSS 预解决器

  我用 Sass。应用时理应灵便应用。用 Sass 能够令你的 CSS 更强劲,可是不必嵌套循环得太繁杂。在 Vanilla CSS 中,只在必要的地区用嵌套循环便可,比如:

CSS Code拷贝內容到剪贴板
  1. .header{}   
  2. .header .site-nav{}   
  3. .header .site-nav li{}   
  4. .header .site-nav li a{}  

  这样的写法在一般 CSS 里彻底用不到。下列为不太好的 Sass 写法:

CSS Code拷贝內容到剪贴板
  1. .header{   
  2.     .site-nav{   
  3.         li{   
  4.             a{}   
  5.         }   
  6.     }   
  7. }  

  假如你用 Sass 的话,尽可能这么写:

CSS Code拷贝內容到剪贴板
  1. .header{}   
  2. .site-nav{   
  3.     li{}   
  4.     a{}   
  5. }