优雅地写css

https://csswizardry.com/2013/...
https://css-tricks.com/bem-101/
https://www.smashingmagazine....
https://hackhands.com/70-Expe...

重置你的CSS样式

normalize http://necolas.github.io/norm...
reset http://html5reset.org/
http://www.zhangxinxu.com/wor...

使用CSS常量进行更快速的开发。

/*
   # Dark grey (text): #333333
   # Dark Blue (headings, links) #000066
   # Mid Blue (header) #333399
   # Light blue (top navigation) #CCCCFF
   # Mid grey: #666666 
*/

工做流程：调试

* { border: 1px solid #f00; }

使用主样式表

/* 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>

格式

1.类名建议使用破折号代替驼峰法。若是你使用 BEM，也可使用下划线（参见下面的 OOCSS 和 BEM）。
2.不要使用 ID 选择器。
3.在一个规则声明中应用了多个选择器时，每一个选择器独占一行。
4.在规则声明的左大括号 { 前加上一个空格。
5.在属性的冒号 : 后面加上一个空格，前面不加空格。
6.规则声明的右大括号 } 独占一行。
7.规则声明之间用空行分隔开。

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
 // ... 
}

注释

1.建议使用行注释 (在 Sass 中是 //) 代替块注释。
2.建议注释独占一行。避免行末注释。
3.给没有自注释的代码写上详细说明，好比：为何用到了 z-index 兼容性处理
4.使用标志。“将样式表分红特定的部分：全局样式 - （正文，段落，列表等），页眉，页面结构，标题，文本样式，导航，表单，注释，附件。

OOCSS 和 BEM

出于如下缘由，咱们鼓励使用 OOCSS 和 BEM 的某种组合：

• 能够帮助咱们理清 CSS 和 HTML 之间清晰且严谨的关系。
• 能够帮助咱们建立出可重用、易装配的组件。
• 能够减小嵌套，下降特定性。
• 能够帮助咱们建立出可扩展的样式表。

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

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

尽可能不要使用ID 选择器！！！

在 CSS 中，虽然能够经过 ID 选择元素，但你们一般都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了没必要要的高优先级，并且 ID 选择器是不可重用的。

JavaScript 钩子

避免在 CSS 和 JavaScript 中绑定相同的类。不然开发者在重构时一般会出现如下状况：轻则浪费时间在对照查找每一个要改变的类，重则由于惧怕破坏功能而不敢做出更改。
咱们推荐在建立用于特定 JavaScript 的类名时，添加 .js- 前缀：
<button class="btn btn-primary js-request-to-book">Request to Book</button>

Sass

属性声明的排序
首先列出除去 @include 和嵌套选择器以外的全部属性声明。紧随后面的是 @include，这样可使得整个选择器的可读性更高

嵌套选择器

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

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

.btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

变量

变量名应使用破折号（例如 $my-variable）代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量，能够在变量名以前添加下划线前缀（例如 $_my-variable）

css分类

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

• 公共型样式是最为重要的部分，对于比较小的项目，咱们只引入一个css，这个css的样式即公共型样式，通常包括：“标签的重置和设置默认值”（以消除不一样浏览器之间的差别）、“统一调用背景图和清除浮动或其余需统一处理的长样式（这样就无需对每一个进行分别的处理）”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。后面会具体介绍。
• 特殊型样式即对某个维护率较高的栏目或者某个与网站总体差别较大的页面独立引入这样一个特殊型样式，方便咱们维护。
• 皮肤型样式即产品须要换肤功能，那么咱们就须要将颜色、背景等抽离出来放在这里，方便管理。

css文件咱们分为了公共型样式、特殊型样式、皮肤型样式，那么在css文件的内部咱们又是怎么分类的呢？（此部分为重点） 

• 重置和默认的css代码。
  这是为了消除默认样式和浏览器的差别，并设置部分标签的初始样式，以减小后面的重复劳动。 你能够根据本身的网站需求设置，这一部分代码放在css内部的最上面。
• 统一处理的css代码。 这里能够统一调用背景图和清除浮动（指通用性较高的布局、模块、原件内的清楚）
• 布局（grid）: 咱们将页面分割为几个大块，一般有头部、主体、主栏、侧栏、尾部等。经常使用！
• 模块（module）：即语义化的能够重复使用的较大的总体。如导航、登录、注册、列表、评论、搜索等。经常使用！
• 元件（unit）：一般是一个不可再分的较为小巧的个体，被重复用于各类模块中，好比按钮、输入框、loading、图表等。经常使用！
• 功能（function）：为方便一些经常使用样式的使用，咱们将这些使用率较高的样式剥离出来，按需使用，一般这些选择器具备固定样式表现，好比清除浮动。不经常使用，不可滥用！
• 皮肤（skin）：对于换肤型网站须要使用，将皮肤型的样式抽离出来，非换肤型网站不可滥用，不经常使用。
• 状态(state):即一些状态类样式。不经常使用。

css代码格式

1.选择器、属性和值都是用小写。

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

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

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

3.最后一个值也要一分号结尾。

实际上，在大括号结束前的值能够省略分号，可是这样作会对修改、添加和维护工做带来没必要要的失误和麻烦。好比，在最后添加一个属性，若是以前没有在末尾添加分号，那么你就要在新添加的属性前添加分号，不然就会出错

4.省略值为0的单位

优势：能够节省没必要要的字节同时也为了方便阅读，咱们将0px、0em、0%等都缩写为0

5.使用16进制表示颜色值，其中的字母使用大写形式，并尽可能缩写。

除非在你须要透明度而使用rgba，不然都是用#FFFFFF这样的写法，并尽可能缩写，如#FFF。使用大写形式，是由于这样更加具备易读性，且有利于压缩，而缩写为了减小没必要要的字节。

6.根据属性的重要性顺序书写。

　只遵循横向顺序便可，即先书写定位布局类属性，在书写盒模型等自身属性，最后书写文本类及修饰类属性。 另外，若是属性间存在关联性，则不要隔开写
height和line-height具备关联性，咱们尽可能不要分开写。

7.私有在前，标准在后。

　先写带有浏览器私有标志的属性，后写W3C标准的属性。由于私有的属性，说明浏览器自身尚未规范化，标准属性是用不了的。若某一天该浏览器的属性规范化了，那么说明标准属性可使用了，而若是咱们先写W3C标准属性，最后写私有属性，就有可能致使私有属性覆盖标准属性。所以私有在前，标准在后的写法是考虑到了之后可能会出现的问题。

8.选择器等级

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

9.css内部的顺序

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

10.优化方案：对于能够缩写的值咱们尽可能采用缩写形式，这样有利于减少css文件大小，并增长可读性和可维护性。且最好尽可能减小没有实际做用的冗余的属性。有时咱们会将定义相同的或者有大部分属性值相同的一系列的选择器组合到一块儿（采用逗号的方法）来统必定义，这样能够为你节省不少字节和宝贵时间。

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

经常使用命名

　1.　对于布局，即用.g-做为前缀，一般有如下推荐的写法。
　　头部： header或head
　　主体： body
　　尾部：footer或foot
　　主栏： main
　　侧栏：side
　　盒容器： wrap或box
　　主栏子容器：mainc
　侧栏子容器：sidec
　2.对于模块，即.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
　3.对于功能，即以.f-为前缀，一般推荐以下：
　　清除浮动：clearboth
　　向左浮动：floatleft
　　向右浮动: floatright
　　溢出隐藏：overflowhidden
　4.对于颜色，即以.s-为前缀，一般推荐以下：
　　字体颜色：fontcolor
　　背景：background
　　背景颜色：backgroundcolor
　　背景图片：backgroundimage
　　背景定位：backgroundposition
　　边框颜色：bordercolor
　5.对于状态，即以.z-为前缀，一般推荐以下：
　　选中:selected
　　当前：current
　　显示：show
　　隐藏：hide
　　打开：open
　　关闭:close
　　出错：error
　　不可用:disabled

参考文章
https://www.cnblogs.com/zhuzh...