小结：1.发现问题：项目中CSS代码痛点：写CSS的同学往往会意识到，随着项目规模的增大，项目中的CSS代码会越来越多，如果不及时维护CSS代码，CSS代码会不断增加。你不知道修改这行代码会有什么影响，所以如果有修改或者增加新的功能，开发者往往不敢删掉旧的冗余代码，安安稳稳地增加新代码。CSS会越来越多，最终掉进无底洞。2、问题解决：CSS代码重构：我们在编写CSS代码时，不仅要完成页面设计的效果，还要让CSS代码易于管理和维护。我们进行CSS代码重构主要有两个目的：提高代码性能和提高代码可维护性。一、如何提高CSS性能1、CSS是如何工作的？1.1CSS阻止渲染当一个页面有可用的CSS时，无论是内联样式表还是外部样式表，浏览器都会延迟渲染，直到CSS被解析。这是因为没有CSS的页面通常无法使用。1.2CSS可以阻止HTML的解析虽然浏览器在解析完CSS之前不会显示内容，但它会处理其余的HTML。但是脚本会阻止解析器，除非它们被标记为延迟或异步。脚本有可能操纵页面和其余代码，因此浏览器必须知道脚本何时执行。解析器阻止脚本：脚本如何阻止HTML解析。因为脚本会影响应用到页面的样式，如果浏览器仍在处理一些CSS，它会等到完成后再运行脚本。因为在脚本运行之前解析文档不会继续，这意味着CSS不再只是阻止呈现——根据文档中外部样式表和脚本的顺序，它可能还会停止HTML解析。解析器阻止CSS：CSS如何阻止HTML解析。为避免阻塞解析，请尽快交付CSS，并以最佳顺序排列您的资产。2.注意CSS的大小2.1CompressionandminificationCSS压缩文件可以显着提高速度。服务器和客户端交互中使用最广泛的压缩格式是Gzip。缩小是删除空格和任何不必要代码的过程。输出是浏览器可以解析的较小但完全有效的代码文件，这将为您节省一些字节。Terser是一种流行的JavaScript缩小器，如果您使用webpack，v4包含一个插件来创建缩小的构建文件。2.2删除未使用的CSS删除未使用的CSS通常是手动操作。主要的挑战是它有多复杂。我们必须仔细检查整个网站（以覆盖媒体查询），在所有可能的状态下，在所有可能的设备上，并执行所有可能改变样式的JavaScript函数。UnusedCSS和PurifyCSS是流行的工具，可以帮助查明不必要的样式，但我们应该将它们与仔细的视觉回归测试结合使用。在这里，使用CSS-in-JS的显着优势是：每个组件中呈现的样式只需要CSS。在CSS-in-JS中加速CSS的秘诀是将CSS内联到页面中，或者将其提取到外部CSS文件中。将CSS发送到JavaScript文件会导致其解析和计算缓慢。2.CSS设计模式/架构最近常见的CSS设计思想：OOCSS、SMACSS、BEMCSS、METACSS。一、OOCSS1.1OOCSS定义OOCSS（ObjectOrientedCSS）是一种面向对象的CSS，旨在编写高度可重用、低耦合和高度可扩展的CSS代码。OOCSS使用面向对象的思想来定义样式，将抽象与实现分离，提取通用代码。从而使代码的重用性、可维护性和可扩展性更好的编写方法。1.2主要设计规范1）减少对HTML结构的依赖（结构和主题分离）2）增加样式的复用性（容器和内容分离）在OOCSS的概念中，强调类的复用，但是应该避免使用id作为CSS选择器。OOCSS追求组件的复用，它的类名比较抽象，一般不反映具体的东西，而是侧重于表现层的抽取。1.3项目示例：OOCSS鼓励我们去思考不同的元素有哪些样式是通用的，然后从模块、组件、对象等中抽取这些通用的样式，这样就可以在任何地方重复使用而不依赖于特定的容器中。.title{font-family:Arial,Helvetica,sans-serif;font-size:2em;line-height:1;color:#777;text-shadow:rgba(0,0,0,.3)3px3px6px;}.header.title{font-size:1.5em;text-shadow:rgba(0,0,0,.3)2px2px4px;}1.4OOCSS的优缺点优点：1）减少css代码，减少工作量。2）样式复用，代码简洁易维护。3）代码少，加载速度快。4)可以轻松构建新的页面布局，或者创建新的页面样式缺点：1)适用于大型网站项目（组件重复，样式多），小型项目优势不明显。2）需要熟练使用，因为如果具体要求（强调类选择器的重复使用，避免使用id选择器）使用不当，可能会造成后续维护困难，所以最好写注释.2.SMACSS2.1smacss定义smacss使用灵活的思维过程来检查你的设计过程和方法是否符合你的架构。2.2设计主要有3个规范：1）CategorizingCSSRules（用于css分类）2）NamingRules（命名规范）3）MinimizingtheDepthofApplicability（最小化适配深度）详细说明：1、CategorizingCSSRulescss分类这是SMACSS的核心。SMACSS认为css有5大类，分别是：1Base2Layout3Module4State5ThemeorSkin2,NamingRules命名规则按照前面5种划分：BaseRules(Pass)LayoutRules使用l-或者layout-这样前缀，例如：.l-header、.l-sidebar。模块规则使用模块本身的名称，例如图文排列的.media和.media-image。状态规则以is-为前缀，例如：.is-active、.is-hidden。如果将ThemeRules作为单独的类使用，则使用theme-前缀，例如.theme-a-background、.theme-a-shadow。3.MinimizingtheDepthofApplicability最小适配深度原则，简单例子：/*depth1*/.sidebarulh3{}/*depth2*/.sub-title{}两段css的区别在于耦合html和css的程度（这与OOCSS容器和内容分离的原则不谋而合）。可以想象，由于上述样式规则使用了继承选择器，实际上对HTML的结构有一定的依赖性。如果重构了html，很可能就没有这些样式了。相应的，下面的样式规则只有一个选择器，所以不依赖于具体的HTML结构，只要给元素添加一个class，就可以得到对应的样式。当然，继承选择器是有用的，它可以减少相同命名带来的风格冲突（多人协作开发中经常出现）。但是我们也不要过度使用，在不引起样式冲突的允许范围内，尽量使用不限制html结构的短选择器。这就是SMACSS的最小适配深度的意思。3.BEMCSS3.1BEM定义BEM的意思是block、element、modifier，是Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法使您的CSS类对其他开发人员更加透明和有意义。BEM命名约定更严格并且包含更多信息，它们被团队用于开发大型、耗时的项目。3.2为什么使用BEM1)更具语义和可读性代码维护者可以通过双下划线（__）和双破折号（--）等符号轻松理解各部分的含义，更强的可读性往往意味着更低的维护成本。2）模块化，减少级联带来的样式覆盖问题。块是完全独立的。它内部元素/修饰符的样式都写在这个块的命名空间下，所以不会受到其他外部样式的影响，不存在样式覆盖问题。3)增强样式的复用性就像js组合不同的组件得到更复杂的组件一样，我们也可以通过组合不同的块得到更复杂的样式，比如用.b-btn,.b-input组合一个简单的表单样式，从而提高了代码的复用性，另一方面也降低了维护成本。4）由于块样式相对独立，更容易做项目移植。如果在其他项目中有需要，我们可以将单块相关的样式应用到其他项目中。*CSS设计模式/架构总结1）oocss注重复用性，将每一个dom节点都当做一个对象，是css返璞归真的思想；2)smacss涵盖所有细节；3）bemcss专注于css命名和语义3.迎接原子CSS时代随着最近Facebook和Twitter的产品部署，我认为一个新的趋势正在慢慢成长：AtomicCSS-in-JS。1.什么是AtomicCSS你可能听说过BEM、OOCSS等各种CSS方法...效用至上。这与FunctionalCSS和Tachyon库的理念非常接近。
