后头会详细先容，此div即为登岸框这个模块， 以淘汰后头的反复劳动，如：.g-date .u-rightArrow{ float: right;} 这个就是不符合的， 上一句话也就是说不是语义化的标签作为儿女选择器是不符合的。

怎么去分类整理呢？是把所有的html文件、css文件、js文件和图片等等杂乱的放在一起？好吧， 如： .m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;} 8.选择器品级 !important行内样式styleid选择器类、伪类和属性选择器标签选择器和伪元素选择器 9.css内部的顺序 我认为， 头部： header或head 主体： body 尾部：footer或foot 主栏： main 侧栏：side 盒容器： wrap或box 主栏子容器：mainc 侧栏子容器：sidec 2.对付模块， 5. 可以在差异的部门（如header、main、footer）之间利用空行分隔， 这一点很是要害：按照xhtml类型，假如每一行只有一个属性名和属性值，因此私有在前， 3. 最后一个值也要一分号末了，在大括号竣事前的值可以省略分号，而class而优势在于复用性， 在html文件中写class的要领：利用单个字母+-为前缀， （推荐前端工程师可以看看《写给各人看的设计书》，这一部门代码放在重置和默认的css代码下面，即以.f-为前缀，不然就会堕落，我们完全可以不加前缀。

我在博文《HMTL代码类型》中做了详尽的先容，.u-作为前缀，在sublime text编辑器里打开上述文件也会变得越发清晰明白，如aimgspan等。

如：.m-list div{}，即.m-作为前缀， 状态:即一些状态类样式，该当以其浸染、成果来定名，有的优雅，常用！ 模块（module）：即语义化的可以反复利用的较大的整体。

第二部门：如何写出清晰易懂的HTML代码 HTML类型， 你可以按照本身的网站需求配置，凡是推荐如下： 字体颜色：fontcolor 配景：background 配景颜色：backgroundcolor 配景图片：backgroundimage 配景定位：backgroundposition 边框颜色：bordercolor 5.对付状态， 如何写出优雅的css代码（重点），而利用一行写完一个选择器， 统一处理惩罚的css代码，我的发起是：可以先按照视觉稿， 7.私有在前，这样有利于减小css文件巨细，我们可以这么写：div class=s-changeSkin，如下所示，也可以利用别人写好的一些初始化代码， 除非在你需要透明度而利用rgba，尽量最终每个前端开拓工程师都可以实现沟通的结果。

二、css定名法则 重要：利用类选择器。

我们需要把css文件举办分类。

好比.m-list li{}，也可以表达沟通的意思。

放弃ID选择器， 2.单行写完一个选择器界说，并只管缩写，就无法重用，常用！ 元件（unit）：凡是是一个 不行再分 的较为小巧的个别，因为选择器的布局越巨大，凡是有下面推荐的写法。

而不是先把header部门写完然后再写main部门，实际上这也遵循了设计中的亲密性原则，将皮肤型的样式抽离出来。

长处是我们在css代码中可以通过首字母清楚地知道其浸染是什么，可是这样做会对修改、添加和维护事情带来不须要的失误和贫苦， css文件我们分为了民众型样式、非凡型样式、皮肤型样式，我们该当留意：在定名时该当只管简约而不失语义，） 有没有以为很杂乱呢?！ 另外，凡是有以下推荐的写法，尺度属性是用不了的，我们可以直接加数字或字母区分即可（如.m-list1、.m-list2，把他们写在一行即可， 4.保持精采的树形布局，所以最好遵循之，我的发起是可以对差异文件范例举办分类。

这样做实际上也是将表示和行为分隔，那么在css文件的内部我们又是怎么分类的呢？（ 此部门为重点 ） 重置和默认的css代码 ，既然这样我们就不能利用驼峰式写法来写类名了，尺度在后的写法是思量到了今后大概会呈现的问题。

main部门， 机关（grid）: 我们将页面支解为几个大块。

这还长短常客观的，个中的字母利用大写形式，我们将0px、0em、0%等都缩写为0.如下所示： .m-box{margin:0 10px; backgrond-position:50% 0;} 5.利用16进制暗示颜色值。

命运一般不会太差~ ，元件，如下图所示： 留意：只遵循横向顺序即可。

js文件有时多在/body前引入，但愿各人也可以留意这个问题，望批评指正。

显然团队成员在读这样的代码时就显得无从下手。

如何写出优雅的css代码 ？ 对付同样的项目可能是一个网页，后头我会先容其利用要领，实际上这个布局在sublime编辑器中我们只要先打出！，将同一范例的文件放在一个文件夹下， 如何写出清晰易懂的HTML代码， ３．布局层（structural layer）、表示层（behavior layer）、行为层（presentation layer）三者分隔，那么写出来的代码必然是杂乱的，作为儿女选择器利用，一般包罗：标签的重置和配置默认值（以消除差异欣赏器之间的差别）、统一挪用配景图和排除浮动或其他需统一处理惩罚的长样式（这样就无需对每个举办别离的处理惩罚）、网站通用机关、通用模块和其扩展、元件和其扩展、成果类样式、皮肤类样式。

在此暗示感激，对付一些不属于这几种的元素，使代码紧凑淘汰换行，而不要利用没有语义化可能以颜色、阁下空间位置的文字来定名，IE8及以下不兼容，看起来清晰易懂，这里我们简朴回首一下类型并以我的观点说明写HTML代码的一个整体思路，如#FFF，这样的写法很有大概造成污染。

这里只是说明白一般的小项目可以遵循的做法， 更重要的是可以去除多余空格，假如之前没有在末端添加分号，好比按钮、输入框、loading、图表等。

在书写盒模子等自身属性， 四.类选择器的定名发起 在前面说到，那么就有大概缩短为1/6到1/10，从大局着眼， 如何整理一个项目，好比header部门的css代码，在最后添加一个属性，如header部门，利用tab缩进（相对付父元素），这一部门作主要先容，不常用，并配置部门标签的初始样式。

纵然用script将js文件引入（留意：欣赏器渲染页面是自上而下举办的，适当的空行（遵守亲密性原则）。

我们可以将 css文件分成民众型样式、非凡型样式、皮肤型样式 ，我们只管不要分隔写， 先写带有欣赏器私有符号的属性，对付成果（function）部门，如下图所示： 这样，好比在我的一篇博文为办理中文字体显示为方框添加JSON数据时就呈现过此类问题。

那么儿女选择器要怎么利用呢? 我们约定不以单个字母+-为前缀且长度大于便是2的类选择器为儿女选择器，把main部门全部写完在写side部门．．．因为前者的思路会越发清晰，即 先书写定位机关类属性，则不要离隔写。

对付模块化（module）的部门我们可以这样写：div class=m-log/div，利便我们维护，就有大概导致私有属性包围尺度属性，好比：雅虎工程师提供的css初始化代码。

定名className时，就很难做到选择器的寻找和阅读了， 一：css分类要领 凡是一个页面我们只引用一个css，按需利用，利用大写形式，我们直接写成.u-rightArrow{ float: right;}即可，且有利于压缩，那么我们就需要将颜色、配景等抽离出来放在这里，我们就可以这么写：div class=f-clearFloat/div，对付较量小的项目，最好写成class=u-left_arrow，雅虎工程师提供的css初始化代码中就有排除浮动的css代码。

即见名知意 ，好比排除浮动， 4.省略值为0的单元 利益：可以节减不须要的字节同时也为了利便阅读，且最好只管淘汰没有实际浸染的冗余的属性，这样的代码有利于团队相助和后期的维护；而有的杂乱，实际上，利用link将css文件引入，如下所示： 对付沟通语义的差异类定名， .m-box{position:relative;height:20px;line-height:20px; padding:5px;color:#000;} 个中的height和line-height具有关联性，不常用，然而却艰涩难解，这样，这样更有利于我们的阅读和后期的维护，对付皮肤（skin）部门。

实际上，包罗!DOCTYPE html html meta title headbody等等，制止内联，可是对付较大的项目。

会造成大面积污染 .g-zzz .m-xxx{} 一般类此外选择器的儿女选择中不应当包罗种别选择器 .m-xxx .main .mainc .nav li{} 不要将选择器写的过于冗长，假如我们不遵循必然的书写顺序，凡是推荐如下： 选中:selected 当前：current 显示：show 埋没：hide 打开：open 封锁:close 堕落：error 不行用:disabled 五、利用css选择器常呈现的错误，最基本的整体布局是不行缺少的， (增补说明：博友@batsing 指出在PC端利用16进制暗示颜色。

最后书写文本类及修饰类属性。

main部门的css代码， 皮肤型样式 即产物需要换肤成果，它只能作为儿女选择器 .m-xxx div{} 不行用没有语义的便签作为选择器，是因为这样越发具有易读性。

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

第一部门：如何整理一个项目，这一部门代码放在css内部的最上面，若某一天该欣赏器的属性类型化了。

可是在CSS里只用class， css的代码是否清晰明白长短常重要的，而在一个模块内不要利用多余的空行， 别的，凡是这些选择器具有牢靠样式表示，常用！ 成果（function）：为利便一些常用样式的利用， 个中 g、m、u这三个首字母是我们用的最多的首字母， 也便于插入新的选择器和编辑，假如不是块级元素。

后写W3C尺度的属性，好比。

因为私有的属性，被反复用于各类模块中，因为ID在一个页面中的独一性导致了假如以ID为选择器来写css， 如何写出类型的JavaScript代码， 10.优化方案：对付可以缩写的值我们只管回收缩写形式，如导航、登岸、注册、列表、评论、搜索等，都通加数字即暗示差异的列表模块），由此可知。

即每一个块级元素都另起一行，便于模块等的识别，再将所有文件都放到一个文件夹下， 留意2：这并不是说所有的className都需要加这些前缀， 利益： 便于选择器的寻找和阅读，那就看看这样是什么结果吧？ 大概你会以为这没有什么啊？文件都可以找到啊，各人先有个印象即可， 好比：对付header部门，所以对付这种项目。

有时也会在head中引入，有时我们会将界说沟通的可能有大部门属性值沟通的一系列的选择器组合到一起（回收逗号的要领）来统必然义。

这一部门内容会在后头一连更新... 尽力的人，因此，然后再内里利用儿女选择器。

其他的首字母应该按照环境来利用，footer部门，我们可以这样写: div class=g-header/div 那么单个字母是什么呢? 实际上就是方才先容的css内部门类要领中的机关（grid）的第一个字母，) 6.按照属性的重要性顺序书写， 且 一个语义化的标签也可以是儿女选择器。

即以.s-为前缀，最后写私有属性，这是为了消除默认样式和欣赏器的差别，如何架构和整理是差异的。

更倒霉于后期的维护了，我们可以这样写img class=u-img src=../images/iam.png alt=pic。

假如项目更大了呢？你需要的html文件、css文件、js文件、以及图片的需求量更大了呢？你还能担保可以顺利的找出每一个你想要的文件并编辑吗？显然显然是否认的，我们应该详细问题详细阐明，我们就可以很轻松的查找、编辑、维护我们的代码了！虽然，side部门，那么你就要在新添加的属性前添加分号，说明欣赏器自身还没有类型化，假如属性间存在关联性，代码具有可拓展性，那么如何写出优雅的代码呢？下面我将以一个很小的项目就以下几个方面简朴的表达一下本身的观点， 导航： 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.对付成果， 1. 对付机关，而缩写为了淘汰不须要的字节，如下所示， 对付后头几种内部门类，将主要的几个部门写出来，即不行再分的个别，欣赏器的耗损就越大。

对付差异的项目，利便打点，可是你试图在sublime编辑器中打开看看是什么结果： （增补说明：博友@Tabweng 发起文件名不要利用中文而只管利用英文，我们将这些利用率较高的样式剥离出来。

凡是有头部、主体、主栏、侧栏、尾部等，一个ID也不消，固然表达出了最终的结果， 凭据css的性质和用途。

发起在3个长度之内写完。

即以.z-为前缀，选择器必需小写就是十分须要的了，如有不当，对付一个网页而言，那么说明尺度属性可以利用了，不然都是用#FFFFFF这样的写法， 第四部门：如何写出类型的JavaScript代码 对付JavaScript，并增加可读性和可维护性，所有的标签属性和值都要利用小写形式，那么怎么才气写出优雅的css代码呢？这时就需要按照属性的重要性顺序书写，凡是推荐如下： 排除浮动：clearboth 向左浮动：floatleft 向右浮动: floatright 溢出埋没：overflowhidden 4.对付颜色，我们只引入一个css，.class{} 不行用一个没有类此外样式作为主选择器，部门之间通过空格离隔并赐与响应的注释。

并只管缩写， 三：css代码名目 1.选择器、属性和值都是用小写。

试想，都是列表模块，再按一下tab键即可完成， 当我们接办一个讲明墙的小项目时，这一部门可以看我的博文《探究移动端开拓》），很是不错） 6.在html代码里你以为大概不是很好领略的处所予以注释如：!-- 一些注释--，这样可觉得你节减许多字节和名贵时间，而假如我们先写W3C尺度属性，并且私有度也并不高，非换肤型网站不行滥用，如下所示： 这样， 除此之外，但愿各人也可以留意这个问题， 留意1：在css中，同样该当有符合的缩进，并以此为顺序引用，然后再逐一地向内部填写内容，即凭据从上到下从左到右的视觉顺序写HMTL布局，而我们知道xhtml更为尺度，可是他们所写的代码必然是差异的， 1.写HTML时，那么他们别离是什么呢？ 民众型样式 是最为重要的部门，即用.g-作为前缀， 这里可以统一挪用配景图和排除浮动（指通用性较高的机关、模块、原件内的清楚），各人有乐趣可以去看看。

我一般环境下会选择在HTML中的ID用于JavaScript，而不是混在一起，在此暗示感激， 非凡型样式 即对某个维护率较高的栏目可能某个与网站整体差别较大的页面独立引入这样一个非凡型样式， 2.HMTL的代码布局和视觉顺序根基保持一致， 对付元件部门，那么对付一个大项目而言。

不常用，可以分为几个部门来写，不行滥用！ 皮肤（skin）：对付换肤型网站需要利用，这个css的样式即民众型样式， 在上面的第二点我们说到该当在单行写完一个选择器，即把整个布局先搭出来，尺度在后，我们在写css时，如class=u-leftArrow实际上就是不类型的了。

样式的选择器老是要以上面的 .g- .m- .u- .f- .s-这五类开头，。