css - 书写规范熟记+样式初始化

文章结构：
	1、bootstrap样式初始化
	4、注意属性的声明顺序

//手机屏幕时禁止缩放
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

bootstrap样式初始化：

@charset "UTF-8";

html,body,div,span,iframe,
h1,h2,h3,h4,h5,h6,
p,a,dl,dt,dd,ol,ul,li,
input,img {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    vertical-align: baseline;
}

body {
    width: 100%;
    font: 14px "Pingfang SC,Microsoft YaHei,consola,Verdana,Arial,Tahoma,sans-serif" !important;
    color: #333;
    overflow-x: hidden;
}
/*清除蓝色边框*/
button ,
input  {
    outline: none;
}

input:focus ,
.form-control:focus {
    box-shadow: none;
}

li {
    list-style: none;
}

img {
    line-height: 0;
    vertical-align: middle;
}

a,
a:hover,
a:focus {
    color: #333;
    text-decoration: none;
}

.clearfix {
    zoom: 1;
}

.clearfix::after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
	line-height: 0;
    visibility: hidden;
}
/* 文字省略 */
/*一行文字溢出省略号*/
.ellipsis-1{
     overflow:hidden; 
     text-overflow:ellipsis; 
     white-space: nowrap;
}
/*两行文字溢出省略号*/
.ellipsis-2{
     display:-webkit-box; 
     -webkit-line-clamp:2; 
     -webkit-box-orient: vertical; 
     overflow:hidden;
     text-overflow:ellipsis;
}
/*三行文字溢出省略号*/
.ellipsis-3{
     display:-webkit-box; 
     -webkit-line-clamp:3; 
     -webkit-box-orient: vertical; 
     overflow:hidden;
     text-overflow:ellipsis;
} 

//媒体查询：
@media only screen and (max-width: 480px) {
}
// 分辨率大于481px小于1024px的区间
@media (min-width: 481px) and (max-width: 1024px) {
}

@media (min-width: 1025px) and (max-width: 1400px) {
}

@media (min-width: 1401px) and (max-width: 1780px) {
}

before用双冒号与单冒号的区别：

双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。

如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

【 熟记布局： 】
1、所有组件都不要声明宽度，而由亲元素或栅格系统来决定。	这一点在span标签上，最好是用padding撑开它的宽与高，后期的兼容性会比较好。
	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{}。

1、清除浮动：

/* 经典的CSS clearfix */

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

/* 改版后：bootstrap 也有用到 */
.clearfix:before , 
.container:after { 
	content: " "; 
	display: table; 
}
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

---

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

span或者a标签里面套了div标签，这种情况下需要把inline元素显式地设置 display为block

// 如：
<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>

3、 html要保持简洁，不要套太多div

需要套很多层的，一般有两种情况，一种是切图不太会，需要套很多层来维持排版，第二种是会切图，但是把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。

---

4、注意属性的声明顺序：

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;
}

5、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