2018-02-05

优雅的写CSS样式

前言

团队开发中，每个人的编码风格都不尽相同，有时候可能存在很大的差异，为了便于压缩组件对代码进行压缩以及书写样式的规范统一和美观，很有必要一起来讨论下如何优雅的写CSS。

css代码格式

类名建议使用破折号代替驼峰法。如果你使用 BEM，也可以使用下划线

这一点非常关键：根据xhtml规范，所有的标签属性和值都要使用小写形式，而我们知道xhtml更为标准，所以最好遵循之，这样，选择器必须小写就是十分必要的了。既然这样我们就不能使用驼峰式写法来写类名了，如class=”u-leftArrow”实际上就是不规范的了，最好写成class=”u-left_arrow”，也可以表达相同的意思。

不要使用 ID 选择器

在 CSS 中，虽然可以通过 ID 选择元素，但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级，而且 ID 选择器是不可重用的。

不要让嵌套选择器的深度超过 3 层！

如果有必要用到嵌套选择器，把它们放到最后，在规则声明和嵌套选择器之间要加上空白，相邻嵌套选择器之间也要加上空白。嵌套选择器中的内容也要遵循上述指引。

.btn {
  background: green;
  font-weight: bold;
  
@include
 transition(background 0.5s ease);
  .icon {
    margin-right: 10px;
  }
}

不要在 CSS 和 JavaScript 中绑定相同的类

避免在 CSS 和 JavaScript 中绑定相同的类。否则开发者在重构时通常会出现以下情况：轻则浪费时间在对照查找每个要改变的类，重则因为害怕破坏功能而不敢作出更改。

我们推荐在创建用于特定 JavaScript 的类名时，添加 .js- 前缀：

1	<button class="btn btn-primary js-request-to-book">Request to Book</button>

单行写完一个选择器定义。

优点：便于选择器的寻找和阅读，也便于插入新的选择器和编辑，便于模块等的识别。更重要的是可以去除多余空格，使代码紧凑减少换行。试想，如果每一行只有一个属性名和属性值，那么对于一个大项目而言，就很难做到选择器的寻找和阅读了，而使用一行写完一个选择器，那么就有可能缩短为1/6到1/10，这还是非常客观的。

最后一个值也要一分号结尾

实际上，在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。比如，在最后添加一个属性，如果之前没有在末尾添加分号，那么你就要在新添加的属性前添加分号，否则就会出错，比如在我的一篇博文为解决中文字体显示为方框添加JSON数据时就出现过此类问题。

省略值为0的单位

优点：可以节省不必要的字节同时也为了方便阅读，我们将0px、0em、0%等都缩写为0.如下所示：

1	.m-box{margin:0 10px; backgrond-position:50% 0;}

使用16进制表示颜色值，其中的字母使用大写形式，并尽量缩写

除非在你需要透明度而使用rgba，否则都是用#FFFFFF这样的写法，并尽量缩写，如#FFF。使用大写形式，是因为这样更加具有易读性，且有利于压缩，而缩写为了减少不必要的字节。

PC端使用16进制表示颜色,IE8及以下不兼容,需要注意!!!

根据属性的重要性顺序书写

只遵循横向顺序即可，即先书写定位布局类属性，在书写盒模型等自身属性，最后书写文本类及修饰类属性。另外，如果属性间存在关联性，则不要隔开写，如下所示

1	.m-box{position:relative;height:20px;line-height:20px; padding:5px;color:#000;}

其中的height和line-height具有关联性，我们尽量不要分开写。

私有在前，标准在后

先写带有浏览器私有标志的属性，后写W3C标准的属性。因为私有的属性，说明浏览器自身还没有规范化，标准属性是用不了的。若某一天该浏览器的属性规范化了，那么说明标准属性可以使用了，而如果我们先写W3C标准属性，最后写私有属性，就有可能导致私有属性覆盖标准属性。因此私有在前，标准在后的写法是考虑到了以后可能会出现的问题。

1	.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}

选择器等级

!important>行内样式style>id选择器>类、伪类和属性选择器>标签选择器和伪元素选择器

css内部的顺序

我认为，对于一个网页而言，我们在写css时，可以分为几个部分来写，比如header部分的css代码，main部分的css代码，部分之间通过空格隔开并给以响应的注释，这样更有利于我们的阅读和后期的维护。

优化方案

对于可以缩写的值我们尽量采用缩写形式，这样有利于减小css文件大小，并增加可读性和可维护性。且最好尽量减少没有实际作用的冗余的属性。有时我们会将定义相同的或者有大部分属性值相同的一系列的选择器组合到一起（采用逗号的方法）来统一定义，这样可以为你节省很多字节和宝贵时间。

其他格式要求

在一个规则声明中应用了多个选择器时，每个选择器独占一行
在规则声明的左大括号 { 前加上一个空格
规则声明的右大括号 } 独占一行
在属性的冒号 : 后面加上一个空格，前面不加空格
规则声明之间用空行分隔开

类选择器的命名建议

在前面说到，命名className时，应当以其作用、功能来命名，而不要使用没有语义化或者以颜色、左右空间位置的文字来命名。

对于布局，即用.g-作为前缀，通常有以下推荐的写法

头部： header或head
主体： body
尾部：footer或foot
主栏： main
侧栏：side
盒容器： wrap或box
主栏子容器：mainc
侧栏子容器：sidec

对于模块，即.m-作为前缀。元件，.u-作为前缀，通常有下面推荐的写法

导航： nav
子导航：subnav
菜单：menu
选项卡：tab
标题区：head或title
内容区：body或content
列表：list
表格：table
表单：form
排行：top
热点：hot
登录：login
标志：logo
广告：adervertise
搜索：search
幻灯：slide
帮助：help
新闻：news
下载：download
注册：register或regist
投票：vote
版权:copyright
结果：result
按钮：button
输入：input

对于功能，即以.f-为前缀，通常推荐如下：

清除浮动：clearboth
向左浮动：floatleft
向右浮动: floatright
溢出隐藏：overflowhidden

对于颜色，即以.s-为前缀，通常推荐如下：

字体颜色：fontcolor
背景：background
背景颜色：backgroundcolor
背景图片：backgroundimage
背景定位：backgroundposition
边框颜色：bordercolor

对于状态，即以.z-为前缀，通常推荐如下：

选中:selected
当前：current
显示：show
隐藏：hide
打开：open
关闭:close
出错：error
不可用:disabled

css分类

通常一个页面我们只引用一个css，但是对于较大的项目，我们需要把css文件进行分类。

　　按照css的性质和用途，我们可以将css文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此为顺序引用。那么他们分别是什么呢？

公共型样式

公共型样式是最为重要的部分，对于比较小的项目，我们只引入一个css，这个css的样式即公共型样式，一般包括：“标签的重置和设置默认值”（以消除不同浏览器之间的差异）、“统一调用背景图和清除浮动或其他需统一处理的长样式（这样就无需对每个进行分别的处理）”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。

特殊型样式

特殊型样式即对某个维护率较高的栏目或者某个与网站整体差异较大的页面独立引入这样一个特殊型样式，方便我们维护。

皮肤型样式

皮肤型样式即产品需要换肤功能，那么我们就需要将颜色、背景等抽离出来放在这里，方便管理。

重置和默认的css代码

这是为了消除默认样式和浏览器的差异，并设置部分标签的初始样式，以减少后面的重复劳动。你可以根据自己的网站需求设置，也可以使用别人写好的一些初始化代码，比如：雅虎工程师提供的css初始化代码。这一部分代码放在css内部的最上面。

统一处理的css代码

这里可以统一调用背景图和清除浮动（指通用性较高的布局、模块、原件内的清楚），实际上，雅虎工程师提供的css初始化代码中就有清除浮动的css代码。这一部分代码放在重置和默认的css代码下面。

布局（grid）

我们将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等。常用！

模块（module）

即语义化的可以重复使用的较大的整体。如导航、登陆、注册、列表、评论、搜索等。常用！

元件（unit）

通常是一个不可再分的较为小巧的个体，被重复用于各种模块中，比如按钮、输入框、loading、图表等。常用！

功能（function）

为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动。不常用，不可滥用！

皮肤（skin）

对于换肤型网站需要使用，将皮肤型的样式抽离出来，非换肤型网站不可滥用，不常用。

状态

即一些状态类样式。不常用。

OOCSS 和 BEM 认识

OOCSS，也就是 “Object Oriented CSS（面向对象的CSS）”，是一种写 CSS 的方法，其思想就是鼓励你把样式表看作“对象”的集合：创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。

BEM，也就是 “Block-Element-Modifier”，是一种用于 HTML 和 CSS 类名的命名约定。BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。

出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：

可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。
可以帮助我们创建出可重用、易装配的组件。
可以减少嵌套，降低特定性。
可以帮助我们创建出可扩展的样式表。

CSS的一些常见操作

重置你的CSS样式

normalize：

http://necolas.github.io/normalize.css/

reset：

http://html5reset.org/
http://www.zhangxinxu.com/wordpress/2010/08/html5-css-reset/

使用主样式表

/* master.css */
@import url("reset.css");
@import url("global.css");  
@import url("structure.css");
<style type="text/css"media="Screen">
    @import url("css/master.css");
</style>