编写class html,莫闲前端之路学习markdown使用，html和css的编写顺序以及class命名规范...

html属性顺序

class

id

data-*,name

src, for, type, href

title, alt

aria-*, role

/*a标签*/

Example link

/*input标签*/

/*img标签 img必须加上alt*/

class 使用有意义的名称，使用有组织的或目的明确的名称;

class 名称应当尽可能短，并且意义明确，避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思;

BEM命名方法：

/* 块--代表更高级别的抽象或组件 */

.block

/* 元素--代表.block的后代 */

.block_element

/* 修饰符--代表.block的不同状态或不同版本 */

.block--modifier

/* 例如 */

.media{}

.media_img{}

.media_img--rev{}

.media_body{}

Welcome to Foo Corp

Foo Corp is the best, seriously!

/*.media是一个块，.media_img--rev是一个加了修饰符的.media_img的变体，它是属于.media的元素。而.media_body是一个尚未被改变过的也是属于.media的元素。*/

html

常用命名：

/* --base 基本-- */

.header /* --头部-- */

.logo /* --logo-- */

.footer /* --底部-- */

.nav /* --导航-- */

.top-nav /* --顶部导航链接-- */

.main /* --主体内容-- */

.container /* --内容居中-- */

--current /* --默认状态-- */

-title /* --标题-- */

-item /* --列表-- */

-con /* --内容-- */

icon- /* --图标- */

/* --侧边栏-- */

.aside

.aside-nav /* --侧边栏导航-- */

.aside-nav_item /* --侧边栏分类-- */

.aside-nav--current /* --侧边栏当前状态-- */

/* --盒子-- */

.box

.box-title /* --盒子标题-- */

.box-title_txt /* --盒子标题文字-- */

.box-con /* --盒子内容-- */

css编码规范

.selector{

/*显示相关*/

display

float

clear

cursor

content

/*定位等*/

position

top

left

z-index

/*盒模型*/

margin

padding

width

height

border

border-radius

/*排版文字等*/

color

font

vertical-align

line-height

white-space

text-decoration

text-align

/*背景*/

background

opacity

}

如：

.selector {

display: block;

float: right;

position: absolute;

top: 0;

right: 0;

z-index: 100;

width: 100px;

height: 100px;

border: 1px solid #e5e5e5;

border-radius: 3px;

font: normal 13px "Helvetica Neue", sans-serif;

line-height: 1.5;

color: #333;

text-align: center;

background-color: #f5f5f5;

}

css

less规范

/* less嵌套不超过三层 */

.aside-nav{

margin-bottom: 10px;

margin-top: 0;

dt {

cursor: pointer;

background: #fff;

a {

text-decoration: none;

color: @cDark;

}

}

dd {

display: none;

height: 30px;

padding-left: 20px;

line-height: 30px;

}

}

less

less文件命规范

index.less /* --首页样式-- */

header.less /* --头部样式-- */

footer.less /* --底部样式-- */

bass.less /* --基本样式-- */

box.less /* --盒子样式-- */

table.less /* --表格样式-- */

buttom.less /* --按钮样式-- */

icon.less /* --图标样式-- */

iconfont.less /* --图标字体样式-- */

variable.less /* --less变量样式-- */

forms.less /* --表单样式-- */

aside.less /* --侧边样式-- */

normalize.less /* --重置样式-- */

paginator.less /* --分页样式-- */

login.less /* --登录样式-- */

reg.less /* --注册样式-- */

ul***.less /* --以ui开头是插件样式-- */

特别注意

html和css/less都用两个空格代替制表符(tab)进行缩进

以组件为单位组织代码段

制定一致的注释规范

使用一致的空白符将代码分隔成块

为选择器分组时，将单独的选择器单独放在一行

声明块的右花括号应当单独成行

每条声明都应该独占一行，所有声明语句都应当以分号结尾

尽量使用简写形式的十六进制，十六进制值应该全部小写，例如，#fff

避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;

/* selector */

.selector,

.selector-secondary,

.selector[type="text"] {

padding: 15px;

margin-bottom: 15px;

box-shadow: 0px 1px 2px #ccc;

background-color: rgba(0,0,0,.5);

}

/* Single declarations on one line */

.span1 { width: 60px; }

.span2 { width: 140px; }

.span3 { width: 220px; }

/* Multiple declarations, one per line */

.sprite {

display: inline-block;

width: 16px;

height: 15px;

background-image: url(../img/sprite.png);

}

css