如何写出优雅的css代码？

时间 2019-11-29

标签如何写出优雅 css 代码栏目 CSS 繁體版

原文原文链接

　　对于一样的项目或者是一个网页，尽管最终每一个前端开发工程师均可以实现相同的效果，可是他们所写的代码必定是不一样的。有的优雅，看起来清晰易懂，代码具备可拓展性，这样的代码有利于团队合做和后期的维护；而有的混乱，虽然表达出了最终的效果，然而却晦涩难懂，显然团队成员在读这样的代码时就显得无从下手，更不利于后期的维护了。那么如何写出优雅的代码呢？下面我将以一个很小的项目就如下几个方面简单的表达一下本身的见解，若有不妥，望批评指正。css

如何整理一个项目。
如何写出清晰易懂的HTML代码。
如何写出优雅的css代码（重点）。

第一部分：如何整理一个项目。

　　当咱们接手一个表白墙的小项目时，怎么去分类整理呢？是把全部的html文件、css文件、js文件和图片等等混乱的放在一块儿？好吧，那就看看这样是什么效果吧？html

　　可能你会以为这没有什么啊？文件均可以找到啊，可是你试图在sublime编辑器中打开看看是什么效果：前端

　　（补充说明：博友@Tabweng 建议文件名不要使用中文而尽可能使用英文，在此表示感谢，但愿你们也能够注意这个问题。）web

　　有没有以为很混乱呢?！此外，若是项目更大了呢？你须要的html文件、css文件、js文件、以及图片的需求量更大了呢？你还能保证能够顺利的找出每个你想要的文件并编辑吗？显然显然是否认的。因此对于这种项目，个人建议是能够对不一样文件类型进行分类，将同一类型的文件放在一个文件夹下，再将全部文件都放到一个文件夹下，以下图所示：浏览器

　　这样，在sublime text编辑器里打开上述文件也会变得更加清晰明了，以下所示：前端工程师

这样，咱们就能够很轻松的查找、编辑、维护咱们的代码了！固然，对于不一样的项目，如何架构和整理是不一样的，咱们应该具体问题具体分析，这里只是说明了通常的小项目能够遵循的作法。架构

第二部分：如何写出清晰易懂的HTML代码

　　HTML规范，我在博文《HMTL代码规范》中作了详尽的介绍，你们有兴趣能够去看看。这里咱们简单回顾一下规范并以个人见解说明写HTML代码的一个总体思路。编辑器

　　1.写HTML时，最基础的总体结构是不可缺乏的，包括<!DOCTYPE html> <html> <meta> <title> <head><body>等等。实际上这个结构在sublime编辑器中咱们只要先打出！，再按一下tab键便可完成。ide

　　2.HMTL的代码结构和视觉顺序基本保持一致，即按照从上到下从左到右的视觉顺序写HMTL结构。个人建议是：能够先根据视觉稿，从大局着眼，将主要的几个部分写出来，如header部分，main部分，side部分，footer部分，即把整个结构先搭出来，而后再逐一地向内部填写内容，而不是先把header部分写完而后再写main部分，把main部分所有写完在写side部分．．．由于前者的思路会更加清晰。模块化

　　３．结构层（structural layer）、表现层（behavior layer）、行为层（presentation layer）三者分开，避免内联，即便用script将js文件引入（注意：浏览器渲染页面是自上而下进行的，js文件有时多在</body>前引入，有时也会在head中引入，这一部分能够看个人博文《探究移动端开发》），使用link将css文件引入。

　　4.保持良好的树形结构，即每个块级元素都另起一行，使用tab缩进（相对于父元素）。若是不是块级元素，如<a><img><span>等，把他们写在一行便可。

　　5. 能够在不一样的部分（如header、main、footer）之间使用空行分开，而在一个模块内不要使用多余的空行，实际上这也遵循了设计中的亲密性原则。（推荐前端工程师能够看看《写给你们看的设计书》，很是不错）

6.在html代码里你以为可能不是很好理解的地方予以注释如：。

第三部分：如何写出优雅的css代码。

　　css的代码是否清晰明了是很是重要的，这一部分做主要介绍。

一：css分类方法

　　一般一个页面咱们只引用一个css，可是对于较大的项目，咱们须要把css文件进行分类。

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

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

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

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

　　对于后面几种内部分类，你们先有个印象便可，后面我会介绍其使用方法。

2、css命名规则

　　重要：使用类选择器，放弃ID选择器。由于ID在一个页面中的惟一性致使了若是以ID为选择器来写css，就没法重用，而class而优点在于复用性，并且私有度也并不高。所以，我通常状况下会选择在HTML中的ID用于JavaScript，可是在CSS里只用class，一个ID也不用。这样作实际上也是将表现和行为分开，而不是混在一块儿。

　　在html文件中写class的方法：使用单个字母+“-”为前缀。好比：对于header部分，咱们能够这样写:

1	`<div` `class="g-header"></div>`

　　那么“单个字母”是什么呢? 实际上就是刚刚介绍的css内部分类方法中的布局（grid）的第一个字母，好处是咱们在css代码中能够经过首字母清楚地知道其做用是什么，即见名知意。由此可知，对于模块化（module）的部分咱们能够这样写：<div class="m-log"></div>。此div即为登录框这个模块。对于元件部分，即不可再分的个体，咱们能够这样写<img class="u-img" src="../images/iam.png" alt="pic">。对于功能（function）部分，咱们就能够这么写：<div class="f-clearFloat"></div>。对于皮肤（skin）部分，咱们能够这么写：<div class="s-changeSkin">。其中 g、m、u这三个首字母是咱们用的最多的首字母，其余的首字母应该根据状况来使用。注意1：在css中，样式的选择器老是要以上面的 .g- .m- .u- .f- .s-这五类开头，而后再里面使用后代选择器。注意2：这并非说全部的className都须要加这些前缀，对于一些不属于这几种的元素，咱们彻底能够不加前缀，做为后代选择器使用。

　　那么后代选择器要怎么使用呢? 咱们约定不以单个字母+“-”为前缀且长度大于等于2的类选择器为后代选择器。如：.g-date .u-rightArrow{ float: right;} 这个就是不合适的，咱们直接写成 .u-rightArrow{ float: right;}便可。且一个语义化的标签也能够是后代选择器。好比.m-list li{}。 上一句话也就是说不是语义化的标签做为后代选择器是不合适的，如：.m-list div{},这样的写法颇有可能形成污染。

　　除此以外，咱们应当注意：在命名时应当尽可能简约而不失语义。以下所示：

　　对于相同语义的不一样类命名，咱们能够直接加数字或字母区分便可（如.m-list一、.m-list2,都是列表模块，都通加数字即表示不一样的列表模块）。

三：css代码格式

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

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

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

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

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

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

　　 4.省略值为0的单位

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

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

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

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

　　　　(补充说明：博友@batsing 指出在PC端使用16进制表示颜色，IE8及如下不兼容，在此表示感谢，但愿你们也能够注意这个问题。)

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

在上面的第二点咱们说到应当在单行写完一个选择器。若是咱们不遵循必定的书写顺序，那么写出来的代码必定是混乱的，那么怎么才能写出优雅的css代码呢？这时就须要根据属性的重要性顺序书写。以下图所示：

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

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

　　其中的height和line-height具备关联性，咱们尽可能不要分开写。

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

　先写带有浏览器私有标志的属性，后写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;}`

8.选择器等级

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

　　9.css内部的顺序

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

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

四.类选择器的命名建议

　　在前面说到，命名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

　　投票：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

5、使用css选择器常出现的错误。

.class{} 不可用一个没有类别的样式做为主选择器，它只能做为后代选择器
.m-xxx div{} 不可用没有语义的便签做为选择器,会形成大面积污染
.g-zzz .m-xxx{} 通常类别的选择器的后代选择中不该当包括类别选择器
.m-xxx .main .mainc .nav li{} 不要将选择器写的过于冗长，由于选择器的结构越复杂，浏览器的消耗就越大，建议在3个长度以内写完。

补充内容：

http://www.cnblogs.com/hustskyking/p/css-spec.html

努力的人，运气通常不会太差~

如何写出优雅的css代码 ？