这样写CSS,让你代码更美观_html/css_WEB-ITnose

写了一段时间的代码，总觉得自己的代码还是有点乱，看着很不舒服，所以现在开始规范自己的代码书写，先从css样式表的书写开始。

下面的内容内容参照了许多网友的例子，小编总结如下：

1.命名规则说明

• 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _ ;

美间AI

美间AI：让设计更简单

45

查看详情

• 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合;
• 不允许通过1、2、3等序号进行命名 相信也不会有人这样命名;

• id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id ;

  不要随意使用ID

• class用于标识某一个类型的对象，命名必须言简意赅;

  立即学习“前端免费学习笔记（深入）”；

• 尽可能提高代码模块的复用，样式尽量用组合的方式样式的复用这里可以写一个公共的样式;
• 规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名;
• 有时候可以给选择器添加一个表示状态的前缀，全语义更明了，比如下图是添加了“.is-”前缀。

2.CSS主要文件命名

3.常用ID的命名

3.CSS属性编写顺序

• 显示属性：display/list-style/position/float/clear …
• 自身属性（盒模型）：width/height/margin/padding/border
• 背景：background
• 行高：line-height
• 文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
• 其他：cursor/z-index/zoom/overflow
• CSS3属性：transform/transition/animation/box-shadow/border-radius
• 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。
• 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active

4.代码优化

好的代码必须要做到优化、精简。多余的代码将会给后期的编程带来更多的不便和资源的浪费。

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！

有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

5.注释规范

这个一定要和html文件的注释和顺序一致，这样有助于后期代码的查找和改动。

/* Header */内容区/* End Header */

6.css hack 的使用

请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！

不得不用的时候推荐使用下面的这些：

    基本总结的也差不多了，如有漏掉的，大家提个意见，我再补上^_^