css - 熟记相关书写规范

熟记布局：

1、所有组件都不要声明宽度，而由亲元素或栅格系统来决定 。

2、坚决不要声明高度 。高度应当仅仅用于尺寸已经固定好的元素，例如图片和css sprite，在 p，ul，div 等元素上不应当声明高度。如果需要的话可以写 line-height，这个更加灵活。

3、栅格系统只是用来容纳内容，而不是把他们当作内容装起来！
把格栅系统和元素的其它属性分来开处理更有助于布局，也使得我们的前端工作更高效。

4、在格栅系统上不应当添加任何样式，他们仅仅是为布局而用。

5、作为一个整体，选择器应当尽量简短（例如只有一层结构），但是 class 名则不应当过于简略，
例如 .user-avatar 就远比 .usr-avt 好。

6、结构复杂的选择器将会影响性能。
选择器结构越复杂（如 .sidebar h3 span 为三层，.content ul p a 是四层），浏览器的消耗就越大。

7、选择器修饰过度！ 如 ul.nav li a{} ，我们可以删掉 ul 因为我们知道 .nav 是个列表，然后我们就可以发现 a 一定在 li 中，所以我们最终能将这个选择器改写成 .nav a{}。

清除浮动：

/* 经典的CSS clearfix */

.clearfix:after { 
	content: ".";	
	display: block; 
	clear: both; 
	visibility: hidden;
	line-height: 0;
	height: 0; 
}
.clearfix { display: inline-block; }

/* 改版后： */

.clearfix:before , 
.container:after { 
	content: " "; 
	display: table; 
}
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

行内元素里面不可使用块级元素

// 如：
<a href="/listing?id=123">
    <div></div>
</a>
//这样做是不合法的，a标签是一个行内元素，行内元素里面套了一个div的标签，这样可能会导致a标签无法正常点击。
//再或者是span里面套了div，这种情况下需要把inline元素显式地设置display为block
<a href="/listing?id=123" style="display: block">
    <div></div>
</a>

html要保持简洁，不要套太多层

需要套很多层的，一般有两种情况，一种是切图不太会，需要套很多层来维持排版，第二种是会切图，但是把UI拆解得太细。像以下布局：
在这里插入图片描述

<ul>
    <li>
        <div class="img-container">
            <img>
        </div>
        <div class="text"></div>
    </li>
</ul>
1、因为它是一个列表，所以外面用ul/li作为容器，里面就两个div，一个图片的float: left，
2、另外一个文字的容器，即可。但需要套一个clearfix的容器，用来清除浮动。
3、有时候为了实现一些效果，可能也要多套一个容器，例如让外面的容器float，而里面的容器display: table-cell。

注意属性的声明顺序：

1、Positioning  定位
2、Box model  盒模型
3、Typographic  排版
4、Visual  外观
5、其他

如：

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
 
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
 
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
 
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
 
    /* Other */
    opacity: 1;
}

CSS文件命名

master.css,style.css        主要的
module.css                 	模块	
base.css					基本共用
layout.css				    布局，版面
themes.css					主题
columns.css					专栏
forms.css					表单

命名方法要求采用统一的命名方法。常用命名方法有：
1）连写式命名法，如：helloworld
2）中线命名法，如：hello-world（目前采用此方法的较多，建议采用）
3）下划线命名法，如：hello_world
4）骆驼命名法，如：helloWorld
5）帕斯卡命名法，如：HelloWorld
6）其他方法。

布局类：header, footer, container, main, content, aside, page, section
包裹类：wrap, inner
区块类：region, block, box
结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类：list, item, field
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

主次类：primary, secondary, sub, minor
大小类：s, m, l, xl, large, small

交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay
状态类：active, current, checked, hover, fail, success, warn, error, on, off


星级类：rate, star
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row

图片类：img, thumbnail, original, album, gallery
语言类：cn, en
论坛类：forum, bbs, topic, post
方向类：up, down, left, right

其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; 
		   form, label, search, contact, phone, date, email, user; view, loading