摘要：以上，从分层组织，模块化，使用时注意低权重原则，以及巧用雪碧图阐述了提高代码质量的四个方面。编写高质量代码前端开发修炼之道曹刘阳
分层组织CSS
我们应用CSS的能力应该分成两部分：一部分是CSS的API，重点是如何用CSS控制页面内元素的样式；另一部分是CSS框架，重点是如何对CSS进行组织。
推荐一种组织CSS的方法：
base.css + common.css + page.css
base层：reset功能+通用类
common层：组件级别的CSS类
page层：页面级别CSS样式
模块化可以让代码高度重用，显著提高开发效率。
我们拿到设计稿的时候，首先可以从视觉上进行划分，样式和功能相对独立且稳定的一部分就可以视为模块。
这里介绍两个拆分模块技巧：
模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应将他们提取出来，拆分成一个独立的模块。
模块应在保证尽可能少的原则下，做到尽量简单，以提高重用性。
CSS命名空间这里推荐一种在class前加入前缀的方式构建类似于命名空间的概念. 举个例子：
还需注意一点：css class的命名推荐使用英语，不要使用汉语拼音。
挂多个class还是新建class? -- 多用组合，少用继承举个例子，有两个列表，列表条目1字体14px红色,列表条目2字体16px绿色：
方案一:
然后分别为number-list1与number-list2设置样式
方案二 :
然后，将样式分解为颗粒度小的class内，利用类组合达到效果。这就是多用组合少用继承的思想。
如何处理上下margin模块化写类的样式时，常常需要写margin样式。这个时候不建议给某个div同时设置margin-top, margin-bottom值。因为可能会带来上下margin重合的问题。
如果不确定模块的上下margin特别稳定，最好不要将它写进模块的类里，而是使用类的组合，多带带为上下margin挂上用于确定边距的之类。
模块做好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom。
低权重原则复习一下CSS权重问题：
CSS的选择符是有权重的：id选择器的权重是100、class选择器的权重是10、标签选择器的权重是1；
当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。
如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个。（就近原则指的是定义样式的先后，不是挂class名的先后）
我们在设置样式时，适当使用子选择器，可以增加CSS的权重。例如：span .font{} 的样式会覆盖.font{}的样式。但CSS选择符的权重越高，样式越不容易覆盖。为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。
CSS sprite 什么是CSS sprite?将网站的多张背景图合并到一张大图上，这便是CSS sprite.
CSS sprite 优点？CSS sprite出发点已经不仅是“解决滑过状态时背景图片出现空白”的问题了，通过将多张图片合并成一张大图，会大大减少网页的HTTP请求数，减小服务器压力。这对于流量比较大的网站很有价值。
哪些场合不适合使用CSS sprite?CSS sprite只能合并用于背景的图片，对于 设置的图片，是不能合并到css sprite大图中的。如果合并这些图片会影响页面的可读性。
对于横向和纵向都平铺的图片也不能使用CSS sprite.
这里扩展一个问题: 我们在写页面时，对于图片，是使用img标签好呢？还是使用background-img属性好呢？
以下对二者进行一个对比总结：
本质区别：img标签是html标签，background-img是CSS的一个样式；
加载方面：img标签是html结构的一部分，img 会在加载结构时进行加载，而background-img会在结构和内容加载完成后才开始加载；
SEO方面：搜索引擎会关注img标签的alt属性；这时如果使用了background-img则页面可读性比较差；另外，有些网站需要在禁用css情况下运行，此时比较重要的图片例如logo，就需要使用img标签而不是background-img.
在多数场景下，二者都能完成工作。比如hover切换图片，可以改变img的src属性，也可以改变background-img的url; 比如改变图片的位置，可以改变img元素的位置，也可以改变background-img的postion;
CSS sprite有哪些缺点？CSS sprite将多张图片合并为一张图片，通过控制background-position进行定位，这对于图片的位置精确程度要求非常高。定位完成后，大图中的每个小图的坐标值不可轻易改动，这在一定程度上降低了可维护性。
因此，如何排列图片能够尽量紧凑，同时保证不会影响扩展性，是CSS sprite技术最困难也是最具挑战性的地方。
以上，从分层组织CSS，模块化CSS，使用时注意低权重原则，以及巧用CSS雪碧图阐述了提高CSS代码质量的四个方面。更多方法还需在实践中积累。
References[1].编写高质量代码-Web前端开发修炼之道 -- 曹刘阳.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111460.html
摘要：六字符编码通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。十一减少标签的数量编写代码时，尽量避免多余的父元素。未完待续编写灵活稳定高质量的代码的规范阅读更多 一、唯一定律 无论有多少人共同参与同一项目，一定要确保每一行代码都像是唯一个人编写的。 二、HTML 2.1 语法 （1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法...
摘要：用两个空格代替制表符这是唯一能保证在所有环境下获得一致展现的方法。编辑器配置将你的编辑器按照下面的配置进行设置，以免常见的代码不一致和差异用两个空格代替制表符保存文件时删除尾部的空白符设置文件编码为在文件结尾添加一个空白行。 黄金定律 永远遵循同一套编码规范 - 可以是这里列出的，也可以是你自己总结的。如果发现规范中有任何错误，敬请指正。 HTML 语法 用两个空格代替制表符 (ta...
摘要：过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。只有在必要的时候才将限制在最近的父元素内也就是后代选择器例如，不使用带前缀的时前缀类似于命名空间。制定一致的注释规范。 一、语法 1.1 注意 （1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 （2）为选择器分组时，将单独的选择器单独放在一行。 （3...
摘要：第一部分介绍了如何使用和开发接口。由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。当您第一次得知有预处理器和后处理器时，你很有可能在任何地方已经使用它们。我之前建议的文章，，也涵盖了预处理器相关的知识。 我记得我刚开始学习前端开发的时候。我看到了很多文章及资料，被学习的资料压得喘不过气来，甚至不知道从哪里开始。 本指南列出前端学习路线，并提供了平时收藏的一些...
摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...
阅读 1053·2021-11-22 14:56
阅读 1492·2019-08-30 15:55
阅读 3316·2019-08-30 15:45
阅读 1635·2019-08-30 13:03
阅读 2851·2019-08-29 18:47
阅读 3304·2019-08-29 11:09
阅读 2614·2019-08-26 18:36
阅读 2571·2019-08-26 13:55
