Web前端开发修炼之道——学习笔记一

1.前端设计的关键

（1）前期的构思很重要，是一个先慢后快的过程
（2）制定规范
（3）团队的分工与合作

2. 衡量高质量的HTML的标准

2.1 语义化标签，那如何评判？

去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。比如W3C的官方网站语义就非常优秀

2.2 语义化的标题和内容模块
HTML部分

<strong>    </strong><div>
<h2>标签的语义</h2>
<a href="#">更多</a>
</div>
<p>段落一的内容<strong>根据浏览器的默认样式</strong></p>
<p>段落二的内容</p>

CSS部分

<span style="font-weight: bold; white-space: pre;">	</span>.title{border-bottom: 1px dashed #fff;text-align: right;}
.title h2{float: left;}
p{text-indent: 2em;line-height: 150%;margin: 0 0 20px 0;}
strong{color: red;font-weight: normal;}

2.3 语义化的表单模块
HTML部分

<form action="" method="">
<fieldset>
<legend>登录表单</legend>
<p><label for="name">账号： </label><input type="text" id="name" /></p>
<p><label for="pw">密码： </label><input type="password" id="pw" /></p>
<input type="submit" value="登录" class="subBtn" />
</fieldset>
</form>

2.4 语义化的表格模块
HTML部分

<table border="1">
<caption>几种页面实现的比较</caption>
<thead>
<tr><th>实现方式</th><th>代码量</th><th>搜索引擎友好</th><th>特殊终端兼容</th></tr>
</thead>
<tbody>
<tr><th>table 布局</th><td> 多 </td><td> 差 </td><td> 一般 </td></tr>
<tr><th>乱用标签的CSS布局</th><td> 少 </td><td> 一般 </td><td> 差 </td></tr>
<tr><th>标签语义良好的CSS布局</th><td> 少 </td><td> 好 </td><td> 好 </td></tr>
</tbody>
</table>

3.高质量的CSS
3.1 建议通过以下三个CSS文件组织网站的CSS

base层：base.css(CSS reset) 被所有页面引用，是页面样式依赖的最底层
common层： common.css 网站级，提供高度重用模块的CSS类。最好有一个人统一管理
page层：page.css 页面级，每个页面都有可能有自己的page层CSS

3.2 推荐的base.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var
{font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th {text-align:left}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
/*文字排版*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
/*长度高度*/
.w10{width:10px}
.w20{width:20px}
.w30{width:30px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}
/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr50{padding-right:50px}
.pr100{padding-right:100px}

在 base.css 中，CSS reset 部分来自于YUI（雅虎的前端框架），这是一段很成熟的代码，推荐大家都使用它来进行 CSS Reset。
base.css中，有几个类比较特殊，下面特别说明一下：

（1 ）“.fl”类和“.fr”类。这个类，除了设置float：left和float：right之外，还设置了display:inline.其作用是解决IE6的双外边距Bug。在IE6下，如果对元素设置了浮动，同时又设置了margin-left或者margin-right,margin值会加倍。例如，设置margin-left:10px;在IE6下会显示为margin-left:20px;通过设置display:inline;可以解决这个bug。
（ 2 ）“.bc”类。这个类是“,blockCenter,作用是使块级元素居中。直接使用不足以使块级元素居中，还需要设定宽度。
（ 3 ）“.clearfix”类。这个类用于在父容器直接清除子元素浮动。让浮动元素的父容器能够根据浮动元素的高度而自适应高度。
例如：<div class="clearfix"><div class="fl"></div></div>
（ 4 ）".zoom"类。IE的专有属性。用于触发hasLayout
（ 5 ）".mt5",".mt10","mt20"这些类虽然繁杂，但有助于减少page层的代码量

3.2. CSS的命名
要点：结合驼峰命名法和划线命名法进行命名
原则：驼峰命名法用于区别不同的单词，划线用于表明从属关系
例如：

<style type=”text/CSS”>
/*made by 工程师A*/
.ad-timeList{xxxxxxx}
.ad-timeList li{border-bottom:xxxx;}
.ad-timeList-lastItem{border-bottom:none;}
/*made by 工程师B*/
.zx-timeList{}
.zx-timeList li{border-bottom:xxxx;}
</style>
<!--made by 工程师A-->
<ul class=”ad-timeList”>
<li>2009 年08 月(3)</li>
<li>2009 年07 月(12)</li>
<li>2009 年06 月(3)</li>
<li>2009 年05 月(8)</li>
<li>2009 年04 月(2)</li>
<li class=”ad-timeList-lastItem”>2009 年03 月(8)</li>
</ul>
<!--made by 工程师B-->
<ol class=”zx-timeList”>
<li>2009-08-07</li>
<li>2009-08-06 </li>
<li>2009-08-05</li>
</ol>

3.3. 挂多个class还是新建class——多用组合，少用继承
通过类的组合，很容易实现类的扩展，避免产生类的爆炸，下面直接上例子：

<style type=”text/CSS”>
.f12{font-size:12px}
.f16{font-size:16px}
.red{color:red}
.numberList{border:1px solid #ccc;padding:10px;}
.numberList li{height:20px;line-height:20px;}
</style>
<body>
<ul class="numberList f12">
<li>111111111111111111</li>
<li>222222222222222222</li>
<li>333333333333333333</li>
</ul>
<ul class="numberList f16">
<li>444444444444444444</li>
<li>555555555555555555</li>
<li>666666666666666666</li>
</ul>
<ul class="numberList f12 red">
<li>777777777777777777</li>
<li>888888888888888888</li>
<li>999999999999999999</li>
</ul>
<ul class="numberList f16 red">
<li>101010101010101010</li>
<li>111111111111111111</li>
<li>121212121212121212</li>
</ul>
</body>

3.4 处理上下margin

margin是个有点特殊的样式，相邻的 margin-left 和 margin-right 是不会重合的，但相邻的 margin-top 和 margin-bottom 会产生重合。所以模块最好不要混用 margin-top 和 margin-bottom，统一使用 margin-top 或 margin-bottom。
还有，如果不确定模块的上下 margin 特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下 margin 挂用于边距的原子类（例如mt10，mb20）

3.5 低权重原则——避免滥用子选择器

CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权值高的选择符设置的样式。权重的规则是这样的：HTML标签的权重是1，class的权重是10，id的权重是100，例如p的权重是1，”div em“的权重是1+1=2，”strong.demo“的权重是10+1=11，”#test .red“的权重是100+10=110.
使用子选择器，会增加CSS选择符的权重，CSS选择符的权重越高，样式越不易被覆盖，越容易对其他选择符产生影响。所以，为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。（同等条件下，使用class而不是用id）

*以上内容大部分摘自《Web前端开发修炼之道》曹刘阳 著
笔记内容只记录了本人觉得比较重要的部分，有删减。建议读者阅读原著，会更有帮助！
转载请注明出处~！谢谢