学习详解CSS代码重构与优化之路

学习详解CSS代码重构与优化之路写CSS的同学们往往会体会到，随着项目规模的增加，项目中的CSS代码也会越来越多，如果没有及时对CSS代码进行维护，CSS代码不断会越来越多。CSS代码交错复杂，像一张庞大的蜘蛛网分布在网站的各个位置，你不知道修改这行代码会有什么影响，所以如果有修改或增加新功能时，开发人员往往不敢去删除旧的冗余的代码，而保险地增加新代码，最终的坏处就是项目中的CSS会越来越多，最终陷入无底洞。下面请看学习111详解CSS代码重构与优化之路。CSS代码重构的目的：我们写CSS代码时，不仅仅只是完成页面设计的效果，还应该让CSS代码易于管理，维护。我们对CSS代码重构主要有两个目的：1、提高代码性能2、提高代码的可维护性3、提高代码性能提高CSS代码性能主要有两个点：1、提高页面的加载性能提高页面的加载性能，简单说就是减小CSS文件的大小，提高页面的加载速度，尽可以的利用http缓存2、提高CSS代码性能不同的CSS代码，浏览器对其解析的速度也是不一样的，如何提高浏览器解析CSS代码的速度也是我们要考虑的提高代码的可维护性提高CSS代码的可维护性主要是体现在下面几点：1、可重用性一般来说，一个项目的整体设计风格是一致的，页面中肯定有几个风格一致但有些许不同的模块，如何在尽可能多地重用CSS代码，尽可能少地增加新代码，这是CSS代码中非常重要的一点。如果CSS代码的重用性高，我们可能只需要写一些不一样的地方，对页面性能和可维护性、提高开发效率都有很大的帮助。2、可扩展性如果产品增加了某个功能，我们应该保证新增加的CSS代码不会影响到旧的CSS代码和页面，并且尽可能少地增加新代码而重用旧代码。3、可修改性如果某个模块产品经理觉得要修改样式，或者要删掉它，如果没有规划好相应的CSS代码，过了一段时间之后，开发人员可能已经不记得这段代码作用了几个地方，不敢修改或删除它，这样下去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中的一些命名相关的建议：头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper左右中：leftrightcenter登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签：tags文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guide服务：service注册：regsiter状态：status投票：vote合作伙伴：partner导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题:title摘要:summary分段2、提取重复样式这一个方法很容易理解，简单说就是提取相同的样式成为一个单独的类再引用，这样不仅可以精简CSS文件大小，而且CSS代码变少，更易于重用和维护。例如下面的例子：原来的代码是这样：CSSCode复制内容到剪贴板.about-title{margin:0auto6rem;color:#333;text-align::4px;font-size:2rem;}.achieve-title{margin:0auto6rem;color:#fff;text-align:center;letter-spacing:4px;font-size:2rem;}这两个样式的区别在于文字颜色的不同，我们可以将其公共的样式提取出来，然后再分别设置其不同的样式CSSCode复制内容到剪贴板.column-title{margin:0auto6rem;text-align:center;letter-spacing:4px;font-size:2rem;}.about{color:#333;}.achieve{color:#fff;}提取公用的部分，然后在页面上分别引用column-title和about等，这样代码更简洁，维护起来也更方便了。这个例子非常简单，实际上项目中可能有更复杂的情况，总之就要要尽可能的DRY，尽可能的提取重复的东西。3、书写顺序这个书写顺序指的是各个样式的书写顺序，下面是推荐的CSS书写顺序(1)位置属性(position,top,right,z-index,display,float等)(2)大小(width,height,padding,margin)(3)文字系列(font,line-height,letter-spacing,color-text-align等)(4)背景(background,border等)(5)其他(animation,transition等)书写顺序不一定非得按照上面的推荐来进行，而是根据你自己的习惯，但是最好能保证前后的习惯一致的，或者团队应该有一个共同的代码规范去遵守，这样后期维护起来也会方便许多。以上是我个人总结的一些简单的写好和重构CSS代码的方法，大家当然不必拘泥于此，有不同的意见和建议欢迎进行交流!CSS方法论什么是CSS方法论呢?简单地说就是一些同行为了提高CSS的可维护性、提出的一些编写CSS代码的规范和方法。他们提出了一些概念，这些概念可能听起来很高大上，但是实际你平时可能不知不觉也会用到这些所谓的CSS方法论。下面我简单地介绍下几个比较常见的CSS方法论。OOCSSOOCSS是(ObjectOrientedCSS)，顾名思义就是面向对象的CSS。OOCSS主要有两个原则：1、结构和样式分离我们平时一定遇到过这种情况，比如一个页面存在着多个不同功能的按钮，这些按钮的形状大小都差不多，但是根据不同的功能会有不同的颜色或背景来加以区分。如果不进行结构和样式分离，我们的CSS代码可能是这样的CSSCode复制内容到剪贴板.btn-primary{width:100px;height:50px;padding:5px3px;background:#ccc;color:#000;}.btn-delete{width:100px;height:50px;padding:5px3px;background:red;color:#fff;}这两个或者可能更多的按钮拥有一些不同的样式，但是它们同时拥有相同的大小样式等，我们将其抽象的部分提取出来，结果如下：CSSCode复制内容到剪贴板.btn{width:100px;height:50px;padding:5px3px;}.primary{background:red;color:#fff;}.delete{background:red;color:#fff;}这样提取公用的样式出来，然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外，还有一个好处是复用性，如果需要增加其他额外的按钮，只需要编写不同的样式，和btn配合使用即可。(2)容器和内容分离我们平时写代码一定写过这样代码CSSCode复制内容到剪贴板.contenth3{font-size:20px;color:#333;}这样的代码就是内容依赖于容器，没有分离的代码，也就是说h3的样式依赖于.content容器，如果其他地方要用到相同的样式，但是它的容器却不是.content，那你可能就是要再写一遍.somethingh3。所以OOCSS推荐分离容器和内容，可以修改成：CSSCode复制内容到剪贴板.title{font-size:20px;color:#333;}关于这一点，我个人建议要分情况来看，像前面这个例子，它适合样式和容器分离。但是比如下面这种情况：CSSCode复制内容到剪贴板.menuli{font-size:12px;}这种ul，li列表的样式，我觉的就按照我们原先的做法就可以，不一定非得给一个类给li来设定样式，即CSSCode复制内容到剪贴板.menu-item{font-size:12px;}这样页面的li标签需要引用menu-item类。当然采用哪一种方式更好我也不却确定，我自己比较喜欢.menuli的写法，大家自行思考。这就是OOCSS的两个基本原则，这里只是简单介绍OOCSS，各位如果有兴趣的话请自行Google查找相关资料。SMACSSSMACSS是什么呢，它的全称是ScalableandModularArchitectureforCSS。简单说就是可扩展和模块化的CSS架构。SMACSS将样式分成5种类型：Base，Layout，Module，State，Theme，我们简单来说说每一种类型分别指什么。1、Bas