资深Web前端开发工程师教你如何优化CSS框架

随着网络的发展，企业网站和个人网站已经变的很普遍了，搭建网站是技术也变的越来越智能化了，很多人也逐步的开始使用CSS框架进行快速建站。编写css也是一样，从最初只是定义文字颜色、内容排版，到现在定义所有的表现。css框架也渐渐被重视了，因为大家都认识到：从具象的表现中抽出抽象的模块来重复使用，是减少用户下载、方便团队及个人开发最重要的手段。

当然对于一些大型的项目，我们可能会很难照搬某些框架直接使用的，因为直接使用会带来一些限制或者冗余的问题。但在CSS框架已经日趋成熟的今天，在我们设计项目架构、规范的时候，当前市面上一些优秀的框架也可以给我们提供很多可借鉴的地方。下面我们就借助马海祥博客的平台教你如何优化CSS框架。

一、CSS框架是什么？

CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则、简单组件、以及样式重置等代码块，其目的就是用于简化web前端开发的工作，提高工作效率，降低工作成本进行快速建站。

1、CSS框架的优点

（1）、提高开发效率。

（2）、规范名称定义，便于维护。

（3）、规范项目开发流程。

（4）、css代码更清晰、简单。html代码更合理。

（5）、大规模项目中可以减少用户下载。

2、CSS框架的弊端

（1）、学习成本提高。你需要了解整个框架，需要阅读框架的文档。

（2）、css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。

（3）、可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。

（4）、选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。

二、目录组织

在目录组织的分析上我们参考了Bootstrap, Blueprint, Yui, Yaml四个框架的组织方式，如下图所示：

当使用一个框架时，我们一般会把所需框架本身的样式链到页面中，然后在它的基础上进行修改。所以框架本身所带的样式可以理解为基础样式。即我们平时所说的全局样式+组件样式。

有上图我们可以看到，在目录架构上4个框架基本都是遵循基本样式+用户定义扩展样式的常规方式进行组织。

然而，如果按Bootstrap做法的话，可能会出现把不常用组件样式也包含在全局样式中一并引入，如果把组件也写在全局CSS中，最好确保该组件出现频率较高才引入，避免不必要的带宽浪费。

对于针对低版本浏览器所写的hack，对它的处理方式，Blueprint和Yaml都是使用单独引入hack文件的形式进行处理，马海祥也曾尝试过这样的做法。

总的来说，马海祥觉得这种方式的好处是可以避免给高级浏览器带来冗余代码，而且通过条件判断引入CSS也不会给高级浏览器带来额外的请求。

这种方式比较适用于，高低级浏览器本来就刻意设计成有较大差别的情况下，即hack比较多的时候才使用。不然就为了十来行hack而多引入一个文件的话似乎也不太可取。

三、CSS规范

1、前缀

框架中公用模块都有前缀，分别有以下3个思想：

（1）、Yaml, Yui ：无论如何都是统一的标识开头，再加上改模块名称。

（2）、Bootstrap：直接模块名称，这方式需要定义关键字。公用模块是button都以btn – 开头， image则以img-开头。

（3）、Nec：单字母开头来标识组件。

一般来说应用一个框架，我们先引入框架的样式，再在之上覆盖上自己的样式，所以可以把框架看作是我们的基础CSS。

我们可以借鉴框架的前缀规范来规划我们的基础CSS前缀，根据自己的项目实际情况采取不同的方案。

2、类的划分

类的划分方式在框架中主要有2种标准，分别是：组件为粒度和属性为粒度。

（1）、组件为粒度：把组件的所有样式封装在一个类名中，调用类名即可使用该组件。

（2）、属性为粒度：需要属性的时候，调用对应类名拼装。

在我们日常项目中，以属性对类名进行划分比较少见，因为一直遵循的都是“结构、样式、行为”分离的原则，力求降低三者的耦合度。

然而马海祥觉得以这种方式划分在一些特定情况下也不是完全不可取的。

例如对于一些元素的隐藏，如果没提供相关的类名的话，在js开发阶段开发就会直接内联style在对应的元素上（这将会触发 repaint/reflow），所以更好的方式是和js开发约定一个类名触发显示、隐藏的动作，在这种情况下，给 display: none 划分一个特定的类名，供给开发调用就会显得很实用了。

所以，更重要的是我们对所在的实际情况进行分析，并给出最佳的解决方案。

3、组件类名组合方式

以马海祥博客现有的资料了解到组件的样式，基本都是基础类名+扩展类名的套路来进行组合的变化。

但在选择符方面可以有3种方式，目前最多框架使用的是：多类选择，通过修改html的类名组合，实现还原。

以按钮样式的实现为例，如下图所示：

这里采用的都是常规的组合方式，在此我就不再一一赘述。

4、高级CSS选择器

在对Bootstrap进行分析的过程中，发现Bootstrap定义了一系列的icon，这些icon的类名全部都是以icon-为前缀。

而在CSS中，Bootstrap用到了子串匹配属性选择器。

[class^="icon-"]

马海祥觉得使用这个的好处是，对于icon类的标签，我们再也不需要对其加一个对于icon的公用类名，只需要类名是以icon-开头就可以匹配所有icon ，省了一个类名。

使用这种方式可以降低一定的成本，但是只在IE7+浏览器才适用，如果要使用该类选择器的话请考虑是否需要兼容IE6。

虽然IE6不支持，但是高级CSS选择器的确十分吸引，并且可用于移动端，所以在马海祥博客上特此提一下。

四、CSS框架的图形

在参考的CSS框架中，它们会提供一些简单的图形元素， 但是实现的方式也有彼此不同之处。

但是共同点是，现今较新的框架，对于一些简单的效果，都会使用CSS3实现一些简单的渐变，对低版本IE进行优雅降级。

五、CSS框架的应用方式

在参考实例是怎样使用这些框架的方式上，基本和我们平时项目使用方式一致。

在应用方式上，一般有两种方式。

1、对于以组件为粒度的样式：

按照组件的html结构来拼合自己的页面模块，再辅助添加自定义的类名来控制其个性化定义。

2、对于以属性为粒度的样式：

按所需要的样式对应类名进行拼接。

下面可以看几个简单的例子：

（1）、以组件为粒度：

对于组件的覆盖，采取常规的自定义类名覆盖样式，此处就不再一一赘述了，具体信息可通过马海祥博客其它文章来了解。

（2）、以属性为粒度：

由上图可以看出，若需要样式是属性以粒度，即把对应类名调入即可，但是在实际项目中，这种方式由于灵活度不够，并且没有做到结构与样式分离，实际项目中比较少见这种用法。

而对于功能性的动作，例如显示、隐藏元素，可以灵活使用这种方式，把所需样式写到一个特定类名中供给js调用，避免直接写入style导致reflow/repaint。

六、如何优化CSS框架结构

1、对于目录组织

目录组织——可以考虑结合Bootstrap与Yaml/Blueprint的思想。

（1）、把常用的基础样式压缩合成一个文件。

（2）、把不必现组件样式抽离成单独 CSS，按需加载。

【优化点】：减少了单个global_min文件的大小。

【权衡点】：需要考虑由此可能导致的请求数过多问题。

hack——根据实际情况，可考虑把针对IE6的hack文件单独分出来。

【优化点】：便于对低级浏览器的大型差异化处理，并且减少对于高级浏览器的冗余代码。

2、对于CSS规范：

CSS前缀——可考虑尝试Nec的方式，约定“单字母_xxx”为公用样式的标识，取消单一的公用前缀，通过以不同字母作为顶级前缀，对公用模块进行划分。

【优化点】：减免了“公用前缀_组件前缀_组件名”的多级前缀，通过以类名格式作为标识，代替了原来公用前缀的作用。

【权衡点】：仍需按项目实际情况考虑。

类的划分——可考虑约定统一几个功能性的类名（以属性为粒度的类名），例如元素隐藏的类名，供给js调用。

【优化点】：减免让开发直接写 style 内联 CSS，造成页面的 reflow/repaint。

高级 CSS 选择器——在对移动端页面进行重构时可以考虑使用更高级的 CSS 选择器。

例：[class^=”icon”]，:first-child，:nth-child(n)….

【优化点】：相比于传统的方法，节省类名。

3、对于图形：

考虑与设计师约定，视觉效果在可接受范围内，部分效果使用CSS3实现，对低级浏览器实现优雅降级。

【优化点】：大量减少图片的使用，节省带宽以及请求数。

马海祥博客点评：

随着新技术的不断涌现，越来越多优秀的CSS框架呈现在我们的眼前，对于前端开发工程师来说，我们不但要学会这些新技术的应用，更要从这些新技术中提取精华，进行细节优化，才是促使我们永远走在行业的最前沿。