写CSS的同学经常会发现，随着项目规模的增大，项目中的CSS代码会越来越多。如果不及时维护CSS代码，CSS代码会越来越多。CSS代码交织复杂，像一张巨大的蜘蛛网分布在网站的各个位置，你不知道修改这行代码会造成什么影响，所以如果有修改或者新增功能，开发者经常不敢删旧的。冗余代码，又安心添加新代码，最终的坏处是项目中的CSS会越来越多，最终掉入无底洞。CSS代码重构的目的我们在编写CSS代码的时候，不仅要完成页面设计的效果，还要让CSS代码易于管理和维护。我们进行CSS代码重构主要有两个目的：1.提高代码性能2.提高代码可维护性提高代码性能提高CSS代码性能主要有两点：1.提高页面加载性能提高页面加载性能，简单来说就是为了减小css文件大小，提高页面加载速度，尽量使用http缓存。解析CSS代码的速度也是我们需要考虑的提高代码的可维护性提高CSS代码的可维护性主要体现在以下几点：1.可重用性一般来说，一个项目的整体设计风格是一致的。页面上必须有几个样式相同但样式略有不同的模块。如何尽可能的重用CSS代码，尽可能少的增加新的代码，是CSS代码中非常重要的一点。如果CSS代码的复用性高，我们可能只需要写一些不同的地方，对页面性能和可维护性有很大的帮助，提高开发效率。2.可扩展性如果在产品中增加一个功能，我们要保证新增加的CSS代码不会影响到旧的CSS代码和页面，尽量少增加新代码，复用旧代码。3.可修改性如果某个模块的产品经理觉得样式需要修改或者删除，如果没有规划相应的CSS代码，一段时间后，开发者可能不记得这段代码做了多少。如果不敢修改或删除，CSS代码会越来越多，影响页面性能，造成代码复杂。CSS代码重构的基本方法前面我们提到了CSS代码重构的目的。现在让我们谈谈如何实现这些目标的一些基本方法。这些方法简单易懂，容易实现，平时你可能不知道。不自觉地使用它。首先，让我们谈谈如何提高CSS性能。根据页面加载性能和CSS代码性能，主要总结了以下几点：1、尽量把样式写在单独的css文件中，有时为了方便或者速度，在head元素中引用。完成功能后，我们可以直接将样式写在页面的style标签中，或者直接内联到元素上。这样虽然简单方便，但是对以后的维护很不利。把代码写成单独的css文件有几个好处：（1）内容和样式分离，便于管理和维护（2）减少页面大小（3）css文件可以缓存和复用，减少维护成本2，不要使用@import这种方法已经众所周知。这里简单提一下，@import影响css文件的加载速度。3.避免使用复杂的选择器。层次越少越好。有时项目中的模块越来越多，功能也越来越复杂。我们写的CSS选择器会多层嵌套，越来越复杂。建议选择器的嵌套不要超过三层。例如：.header.logo.text{}可以优化成.haeder.logo-text{}。简单的选择器不仅可以减少css文件的大小，还可以提高页面加载性能，浏览器在解析的时候会更加高效，同时也会提高开发者的开发效率，降低维护成本。4、精简页面的样式文件，去除不用的样式。很多时候，我们会将所有的样式文件合并到一个文件中，但是有一个问题：其他页面的很多CSS同时引用了当前页面，但是当前页面并没有使用它们，这种情况会造成两个问题：（1）样式文件过大，影响加载速度；(2)浏览器会进行冗余的样式匹配，影响渲染时间。正确的处理方式是根据当前页面需要的CSS，合并当前页面使用的CSS文件。PS：合并成一个文件有个好处：样式文件会被浏览器缓存，进入其他页面时不需要下载样式文件。这个规则要根据场景区别对待。如果是大项目，应该合并成不同的样式文件。如果是简单项目，建议合并成一个文件。如果无法确定项目的规模，建议将它们分离成不同的样式文件，这样以后合并起来会更方便。5、使用CSS继承减少代码量。我们知道有些CSS代码是可以继承的。如果父元素设置了样式，则子元素不需要设置样式。这也是提高性能的有效方法。常见的可继承属性如：color、font-size、font-family等不可继承的属性如：position、display、float等。可以查看CSS参考手册提高可维护性。提高CSS代码的可维护性。简单来说，就是让开发者更容易理解CSS代码，并在不破坏原有功能的情况下进行修改。下面说说一些常用的方法。1、命名和注释命名是提高代码可读性的第一步，也是极其重要的一步。很多人都有这样的体会：命名是程序员在写代码时最头疼的事情之一，尤其是对于母语不是英语的开发者来说，要找到一个合适、恰当的名字并不容易。提高自己的命名能力，可以看看别人的代码。下面是一些CSS命名相关的建议：head:headercontent:content/containertail:footernavigation:navsidebar:sidebarcolumn:columnpageperipheralcontrol整体布局width:wrapperleftandrightcenter:leftrightcenterloginbar:loginbarLogo:logoAdvertisement:banner页面正文:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:搜索链接:friendlink页脚:footerCopyright:copyrightscroll:scroll内容:content标签:标签文章列表：list提示信息：msgTips：tipsColumntitle：titleJoin：joinusGuide：guideService：serviceRegistration：regsiterStatus：statusVoting：votePartner：partnerNavigation：navMainnavigation：mainnavsub-navigation：subnavtopnavigation：topnavsidenavigation：sidebarleftnavigation：leftsidebarrightnavigation：右侧栏菜单：菜单子菜单：子菜单标题：标题摘要：摘要2。提取重复样式的方法很容易理解。简单的说，就是把相同的样式抽取出来作为一个单独的类重新引用，这样不仅减小了CSS文件的大小，也减少了CSS代码，更容易复用和维护。比如下面这个例子：原代码是这样的：.about-title{margin:0auto6rem;颜色：#333；文本对齐：居中；字母间距：4px；字体大小：2rem；}.achieve-title{边距：0auto6rem;颜色：#fff；文本对齐：居中；字母间距：4px；字体大小：2rem；}这两种样式的区别在于文字颜色的不同，我们可以将它们共同的样式提取出来，然后设置其不同的样式。column-title{margin:0auto6rem;文本对齐：居中；字母间距：4px；字体大小：2rem；}.about{color:#333;}.achieve{color:#fff;}提取公共部分，然后在页面上引用column-title和about，这样代码更简洁，更容易维护。这个例子非常简单。事实上，项目中可能存在更复杂的情况。简而言之，要尽可能DRY，尽可能多地提取重复项。3、书写顺序书写顺序是指各文体的书写顺序。以下是推荐的CSS书写顺序（1）位置属性（position、top、right、z-index、display、float等）（2）Size（width、height、padding、margin）（3）文本系列（font,line-height,letter-spacing,color-text-align等)(4)Background(背景、边框等)(5)Others(animation,transition等)书写顺序不一定有遵循上面的建议，但是根据自己的习惯，但是最好保证前后的习惯是一致的，或者团队应该有一个共同的代码规范来遵守，这样后期维护起来也会方便很多.以上就是我个人总结的一些简单的编写和重构CSS代码的方法。当然，您不必坚持使用它们。欢迎不同意见和建议交流！CSS方法论什么是CSS方法论？简单的说就是一些同行为了提高CSS的可维护性而提出的一些编写CSS代码的规范和方法。他们提出了一些概念，听起来可能很高级，但实际上，你也可能在不知不觉中使用这些所谓的CSS方法论。下面简单介绍一些比较常见的CSS方法论。OOCSSOOCSS即（ObjectOrientedCSS），顾名思义就是面向对象的CSS。OOCSS有两个主要原则：1.结构和风格分离这种情况我们平时肯定遇到过。比如一个页面上有多个不同功能的按钮。不同的颜色或背景来区分。如果不分离结构和样式，我们的CSS代码可能看起来像这样。btn-primary{width:100px;高度：50px；填充：5px3px；背景：#ccc;宽度：100px；高度：50px；填充：5px3px；背景：红色；color:#fff;}这两个或者更多的按钮有一些不同的样式，但是它们也有相同的大小样式等，我们将抽象部分提取出来，结果如下：.btn{width:100px;高度：50px；填充：5px3px;}.primary{背景：红色;颜色：#fff；}.delete{背景：红色；color:#fff;}这样就把common样式抽出来了，然后button同时引用了btn和primary。这种做法除了减少重复代码和精简CSS之外，还具有可重用性的优势。如果需要添加其他额外的按钮，只需要写不同的样式，配合btn使用即可。(2)容器和内容的分离我们平时写代码的时候肯定写过这样的代码。内容h3{字体大小：20px；颜色：#333；}这样的代码是说content依赖于容器，没有分隔代码，也就是说，h3的样式依赖于.content容器。如果其他地方使用了同样的样式，但是它的容器不是.content，那么你可能又要写.somethingh3了。所以OOCSS推荐将容器和内容分开，可以修改为：.title{font-size:20px;color:#333;}关于这个，个人建议看情况看，像前面的例子，适合style和container分离。但是比如下面这种情况：.menuli{font-size:12px;}这种ul,li列表样式，我觉得按照我们原来的做法是可以做到的，没必要给一个class给.menu-item{font-size:12px;}这样一个页面的li标签需要引用menu-item类。当然，我不确定哪种方法更好。我比较喜欢.menuli的写法，大家可以自己想想。这是OOCSS的两个基本原则。这里只是简单介绍一下OOCSS。如果您有兴趣，请谷歌查找相关信息。什么是SMACSSSMACSS，全称是ScalableandModularArchitectureforCSS。简单的说，它是一个可扩展的、模块化的CSS架构。SMACSS将样式分为5种类型：Base、Layout、Module、State、Theme。下面简单说一下每种类型指的是什么。1.Base基本样式表定义基本样式。我们平时写的CSS比如reset.css，属于基本样式表。另外我觉得清除浮动和一些动画也可以归为基本样式。2.Layout布局样式用于实现网页的基本布局，构建整个网页的基本骨架。3.Module网页中的不同区域有不同的功能。这些功能是相对独立的，我们可以称之为模块。模块是独立的、可重用的组件，不依赖于布局组件，可以安全地移除而不影响其他模块。4.State状态样式，通常和js一起使用，代表一个组件或者功能的不同状态，比如菜单选择状态，按钮不可用状态等。关于状态样式，个人认为应该分情况讨论：（1）不同组件的同一个状态的样式是一样的。比如头部导航菜单的选中状态样式和侧边栏菜单的选中状态样式是一样的。认为这部分状态样式可以归类为状态(2)。不同组件的统一状态的样式是不一样的，就是两个地方的菜单虽然都是选中的，但是选中的样式不同。这部分风格不同。它应该被认为是一个State类型，但应该放在它的组件对应的Module中。5、主题皮肤样式，可换皮肤的站点必备，将结构与皮肤分离，根据不同的皮肤应用不同的样式文件。BEMBEM是Block、Element、Modifier的缩写。下面分别介绍一下这三个概念：(1)Block：在BEM理论中，一个网页是由block组成的，比如header是一个block，content是一个block，logo也是一个block。一个块可能由若干个子块组成。(2)元素：元素是块的一部分，具有一定的功能。该元素取决于块。比如在logo中，img是logo的一个元素，在menu中，menuitem是菜单的一个元素(3)Modifier：修饰符用于修饰块或元素，表示块的变化或外观或行为中的元素。我们使用BEM命名法来编写样式如下：.block{}.block-element{}.block-modifier{}.block-element-modifier{}BEM将页面解析为块和元素，然后使用修饰符来设置根据不同状态的样式。我对BEM的理解可能还不到位。我对BEM的看法主要基于两点：（1）页面的CSS模块化，每一块都是一个模块，模块之间相互独立（2）多级类命名，避免选择器的嵌套结构关于上面提到的CSS方法论，你会发现他们有很多相同的思路，比如：1、选择器嵌套的优化2、CSS代码模块化3、抽象CSS代码……当我们学习这些方法论的时候，最重要的是理解他们的想法，不一定要照搬他们的实现形式，多种方法结合使用。我自己总结的方法讲了这么多。下面说说自己总结出来的一些写CSS代码的要点。1、写代码之前：从PSD文件入手当我们拿到设计师给的PSD后，首先不要急着写CSS代码，先分析整个页面，主要关注以下几点：(1)页面分为几个部分Modules，哪些模块是通用的，比如head和bottom，还有一些menubars等。（2）分析每个模块的样式，提取通用样式，注意通用样式是globalpublic（整个Pagepublic）或者localpublic（模块内通用），publicstyles包括publicstate样式，比如publicselectedstate,disabledstate等2.开始写代码根据PSD文件的分析，我们可以开始手写代码了。我推荐SMACSS将样式分为不同的类型：(1)第一步是构建页面的骨架，即基础样式。布局样式。(2)第二步，依次实现不同的模块。这里我推荐BEM的命名思路，但是可以嵌套一层或者两层选择器结构。3.优化代码。会有一些重复或者不简洁的代码。这时候就需要对这些代码进行优化，主要是把重复的代码提取出来，尽可能的简化代码。关于CSS代码的优化，相信大家都有很多意见，欢迎交流讨论！本文原文地址：http://luopq.com/2016/01/05/c...
