《web前端最佳实践》-高维护性css_html/css_WEB-ITnose

有人说html很简单，它甚至不被认为是一种真正的编程语言，当然还有另一个技术同样被类似的看待，它就是css。说实话，css的代码的确不复杂，如要要会简单的使用你只需要知道它是什么，然后任何一个人都能够轻松的用它来控制一个元素的宽高，内容字体的类型、大小、颜色等等。但它真的不只是一些规则。 就像是同样认识字，会写字，但总有人能写出更好的文章一样。会用和科学的用，灵活的用仍然有距离。这篇文章来谈谈css中一些可能的最佳实践方法。

高维护性css

Css有些什么特点？

简单来说，使用方式：内联、内嵌、外联、import。为元素设置样式的方式：元素标签名、类名、id、各种选择器，以及它们的组合。所以，它是很灵活的，如果不做任何的规范的限制，就肯定会导致css代码的混乱和难以维护。

如何高效组织css代码？

结构清晰、模块分明，合理的代码组织结构可提高代码的重用性和可维护性，降低开发复杂度。那怎样组织呢？

首先是组织代码文件，可分为两大类：通用类和业务类。 然后，有一个文件用来重置，常见命名是reset或者default、normalize等。

有一个文件用来存放通用模块和一些基础样式，常命名为mod、common等，如页面对话框，提示框，头部，底部，侧边栏等，会在多个页面用到，这样方面各页面引用，提高代码复用度。

另外需要一个文件存在兼容旧版IE浏览器的样式，这样做的好处有二：

一、减少非IE浏览器加载样式文件的负担

二、如果未来决定不再支持旧版的IE浏览器，则只需要去修改一个文件，不需要多个文件到处找去修改。当然，在处理浏览器兼容问题上，有个原则是，是否有其他不存在兼容问题的方案，如果没有，则把要做兼容的部分单独放在一个文件中。

其余的css样式文件则用于业务模块，不同模块的样式文件放置于不同的文件夹中，原则上每个模块的样式文件不宜太大。

这样可能会造成一个问题，一个页面不是要引入很多文件了？页面加载的时候http请求不是多很多？其实并不矛盾，文件的划分只是为了方便开发和维护，发布的时候会使用工具把多个文件压缩合并成一个文件，所以不用担心引入多个文件的问题。

上面说的是文件的组织，那么在文件中也要按照一定规则来组织样式的声明。 比如，按照模块中元素的层级，如果是同级，则按照元素在页面中的位置，从上到下，或者从左到右，若存在多个元素共用相同声明，则应先声明共通样式。 如果觉得这样还不够，则可以使用一些更高级的方式，如less、sass，它们将css赋予了动态语言的特性，如变量、继承、运算、函数等。

以上是从几个大的方向去说的，下面涉及某几个点谈一谈

使用css reset 统一浏览器显示效果

首先，html的标签是有原始样式的，但问题是在不同浏览器中，标签的默认样式不尽相同，其中的某些差异给开发造成了麻烦，早在2004年，就有人开发了第一个重置样式文件，叫undohtml.Css,后续又有了多种重置方案，其中有个方案“火爆一时”，此方案总共就一行代码*{margin：0；padding：0；}。重置了所有标签默认的margin、padding样式，但有一个弊端是增加了后续开发的复杂度，并不能很有效的提高整体开发的效率。另外，此方案性能也不佳，当页面元素很多时就会影响页面渲染的性能。所以，人们还在逐渐的探索更好的重置方式，目前有多个流行的重置方案，有Eric Meyer开发的Reset CSS和雅虎公司前端技术团队开发的YUI Reset CSS。其实并不存在一种方案适合所有项目，所以最好还是选择参考别人的方案然后设计一套适合自己项目的方案。

需要考虑如下几点：

（1）HTML5新标签 需要重置它们的display样式，因为在低版本IE中没有定义它们的默认display样式。

（2）padding、margin、border 标签在浏览器中的差异主要是与这三个样式有关的默认样式产生的，但也不是需要重置全部元素的margin、padding、border，应根据实际情况。

（3）字体设置

~

、、等语义化标签都有默认字体，但实际当中所需要的字体大小或者粗细都跟默认不同，所以一般项目中都会对他们进行重置。

（4）其他元素的样式重置 典型的有li默认的列表项样式，table的单元格之间默认空间，a链接的下划线等。

给css定义排序

Css的逻辑性不强，随意的书写也不影响其作用，如果不借助工具对其排序也会很繁琐，所以，很少有人会在意，但是排序还是有好处的。

比如：

1、更整洁

2、防止重复定义

3、能够清晰查看定义

4、后续维护能快速定位

排序方式：

1、按类型 如，显示和浮动、定位、尺寸、字体等

2、按字母 按字母顺序排列，优点是规则简单

3、按定义长度 按照样式定义的字符长度排列

各有优劣，实际应用中，推荐使用第一种。 但是如果单靠前端工程师在编写过程中这么做的话也是很难的，可以在写的过程中按照效率最高的方式写，提交代码时使用工具为css排序。既提高效率，又方便后续代码阅读和维护。有一款免费工具是 CSScomb。

合理利用css的权重，提高代码重用性

何为权重，即css众多类型选择符的优先级，优先级高的样式会覆盖优先级低的样式。权重的更具体规则，大家可以查阅资料，这里不赘述。

这里说说如何依照选择符的权重定义合适的选择符：

（1）尽量不使用ID选择器

一个页面中不允许定义两个同样的ID，而且ID选择器权重很高，如果要覆盖使用了ID选择器的元素样式，就必须在其元素上添加新的选择符，或使用！important，这样的结果会使无法重用的样式代码变得更多。最佳实践是尽可能使用较低权重的选择符作为基础样式。

（2）减少子选择器的层级

也是降低子选择符整体权重的过程，同时，层级越少，对html结构的依赖就越低。引起Css层级过多的另外一个原因是sass、less等工具的滥用，这也是我本人在使用之初就有意识到的问题，因为你可以使用嵌套和引用等方式来定义样式了，这样以来给自己省了很多功夫，但文件最终还是要编译出来，我们不用反复的敲那么多代码了，但生成的代码依然还是会很多，所以，方便了自己的同时依然要特别注意减少选择器层级。

（3）使用组合的css类选择器

使用这种方式，开发者可以不用考虑css样式覆盖的问题，避开了计算选择符权重的过程，同时提高了代码的重用性，组合的概念是把一个复杂的父类中的可变部分和稳定部分分割开来，稳定部分作为主体类，可变部分分成几个简单的类，类与类之间没有继承，同样可以起到减少对html结构的依赖，提高代码重用性的作用。

如何兼容IE浏览器？

IE8及以下版本的IE浏览器一直是前端开发人员心中的痛。为了兼容它们做额外添加的代码成为hack代码，往往人们都不想去写那些代码。以下是兼容IE浏览器的一些实践方法。

（1）熟悉IE浏览器中常见的样式兼容问题

一类是浏览器本身的bug，一类是和标准不兼容或还不支持标准。

（2）分离样式兼容代码

按照浏览器的不同版本组织代码文件，然后使用判断语句，按需加载

em、px还是%？

谈及这个话题的原因是，如今页面功能变得越来越多，用来访问页面的设备越来越多，页面的布局就是一个颇具挑战的事情，而页面当中的元素的尺寸和字体、图片的大小等也跟布局息息相关。鉴于此，前端开发开始重视如何提高页面布局，核心思想是将页面元素的尺寸和字体大小设置为相对值。字体相对单位包括：em、ex、ch、rem。更多内容无需赘述，有更多的资料来讲解。下面给出几个最佳实践：

（1）尽量设置相对尺寸

所谓设置相对尺寸，并不是说页面整体的布局是自适应的，整体的尺寸可以是固定尺寸也可以是自适应的尺寸，这取决于页面的设计。

（2）只有在可预知元素尺寸的情况下才使用绝对尺寸

比如设计上要求使用绝对宽度，比如整体宽度，侧边栏宽度，页头页尾的高度固定等，在展示图片、视频的时候，合适的固定尺寸会让这些多媒体元素展示获得最佳的效果。

（3）使用em设置字体大小

使用px设置字体大小的可扩展性不好，使用百分比设置字体大小也不符合习惯，最佳方式是使用em设置字体大小，但随着字体设置的层级增多，这种方式反而增加了维护的成本，对于此，css3引入了rem单位，是相对于根元素的字体大小计算的，就避免了这个问题，目前除了IE8及以下，大部分浏览器都支持它。

此文很多东西都是点到为止，希望对一些新手来说有一定的引导作用，带来一定的帮助。每个人在自己逐步的实践当中都会有一些这样那样的感触和经验、教训等，经常的总结和放入到自己的下一步实践当中，相信是会很有好处的。大家一起加油！~