html css 命名规范,css语法及命名规范（入门）

css语法规范：

每条属性声明占一行，增加易读性

/*bad*/

body{margin: 0;padding: 0;}

/*good*/

body{

margin: 0;

padding: 0;

}

颜色采用十六进制写法，并尽量简写:

/*bad*/

.example{

color: #ffaabb;

}

/*good*/

.example{

color: #fab;

}

0值的单位进行省略，如将margin:0px，写成margin:0:

/*bad*/

.example{

margin: 0px;

}

/*good*/

.example{

margin: 0;

}

有选择器组时，每个选择器占一行：

body,

html,

p{

margin: 0;

padding: 0;

}

连字符使用-，而不使用_，因为能少按一个shift就少按，还有和js变量命名区分开。

/*bad*/

.index_list {}

/*good*/

.index-list {}

选择器避免使用标签名。(首先可能使得一些不必要的标签带上样式，其次会对选择器寻找上也会在一定程度上浪费时间)

/*bad*/

.index-list li{}

/*good*/

.index-list .item{}

媒体查询，不要写在文档最后或分开到另外文档，应该写在相应规则的附近，这样有利于修改和阅读

.index-nav{

margin-top: 10px;

}

/*和相关的规则一起放*/

@media (min-width: 480px){

.index-nav{

margin-top: 5px;

}

}

前缀，css3的一些属性要注意带上前缀：

.selector {

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);

box-shadow: 0 1px 2px rgba(0,0,0,.15);

}

引号方面，使用双引号而不使用单引号,url不用使用引号：

/*no good*/

.example{

font-family: 'Times New Roman',Georgia,Serif;

background: url("../images/icon.png");

}

/*good*/

.example{

font-family: "Times New Roman",Georgia,Serif;

background: url(../images/icon.png);

}

每条属性声明语句结束后加上分号，最后一条声明可省略分号，但不建议

每个属性声明的冒号(:)后添加一个空格

小于1的小数点的值，省略0，如0.5px，可写成.5px

避免使用@ import指令。应使用link标签来引入css文件

避免使用!important，这个优先级最高，滥用会使得维护困难，代码混乱

Less,Sass等预处理言的嵌套不超过3层

避免使用id:(因为id优先级高，且具有唯一性，复用性差，而且id是html与js的挂钩，class是HTML与css的挂钩，这样能够让代码更为的清晰，不用说看到一个id，既要到js里查查有没有什么用，又到css里看看有什么样式，确实麻烦。)

注释需要全面易懂，不要只写一点

css属性声明顺序规范：

css属性的书写顺序大致分为4组，从上到下依次书写：

Positioning Model(定位的相关属性)：

有position，display，TRBL，z-index，float，overflow等

Box Model (盒子模型的属性)：

有margin，padding，border，width，height等

Typographic (文本，排版)

有font，line-height，text-align

Visual (视觉方面的)

有background，color，transition，list-style

例子：

.example{

content: "hello";

/*positioning*/

position: absolute;

top: 10px;

left: 12px;

/*box model*/

margin-top: 20px;

width: 100px;

heith: 100px;

/*typographic*/

text-align: center;

font-size: 12px;

/*visual*/

color: #f00;

background-color: #0f0;

}

特别的：如果有content属性时，需要把其放到最前面

css的文件分类：

文件分类这不会有什么标准，分好，适合自己开发和维护便可。比如：可以有公共的css，某个页面的css，重置的css，皮肤的css，部件的css等，可根据自己的需求，习惯等分类。不必太过拘束。

common.css(通用)

main.css(主要)

reset.css(重置)

skin.css(皮肤)

……

css选择器命名：

到底怎样命名才比较规范，参考一下NEC规范或者是BEM规范。个人比较喜欢NEC，因为其比较简约些,详细的可以到NEC官网上看看。

看看NEC的分类：

布局(grid)(.g-)：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！

模块(module)(.m-)：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！

元件(unit)(.u-)：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！

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

皮肤(skin)(.s-)：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色(图)、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！

状态(.z-)：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现(.u-ipt.z-dis{}，.m-list li.z-sel{})

css命名常用单词：

头：header

尾：footer

导航：nav

侧栏：sidebar

栏目：column

外围容器：wrapper

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

信息：msg

小技巧：tips

标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

容器：container

按钮：button

css命名英语也要学好，有时候不懂怎么命名，就查查英文单词怎么写。css的命名单词长度不要太长太冗余，看懂就好，有些单词过长可以适当的缩写。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2126.html