这个不用说了
命名 - Name Styles Clearly
- 根据用途而不是展现效果来命名 不要用.redhighlight这样的命名，万一哪天老板让你改成橙色的呢？如果是用来警告或提示错误，不妨用.alert或.error
- 不要根据位置来命名 不要用.leftsidebar，有一天它完全可能被移到右边去（但是可以用两个类.left单独用来表示布局位置，.sidebar用来表示侧条栏的样式，用的时候就像这样<div class="sidebar left">）
- 避免含义模糊的命名 就是说不要用无意义的命名，如.s、#s2等，而应该改成.news、#mainNav等。就像程序的变量命名一样，要能够见名知意
用多个类来节约时间 - Use Multiple Classes to Save Time
就像上面举到的<div class="sidebar left">的例子一样，把sidebar共性的样式定义到一起，而把跟布局相关的定义为另一个类。这样，当左右各有一个sidebar的时候，就不需要把sidebar的样式定义两遍了。那样做很不DRY，复制粘贴一遍很容易，但一旦要修改，就要同时改两处地方，很麻烦。
消除浏览器样式冲突 - Eliminating Browser Style Interference
就是去除浏览器默认加的一些样式，如讨厌的默认margin和padding。应该先将这些样式归零。
body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, pre, code {
font-size: 1em;
}
a {
text－decoration: none;
}
a img {
border: none;
}
也可以参考这个：http://www.tantek.com/log/2004/undohtml.css
跟上面的大同小异
优先为当代的浏览器设计 - Design for Contemporary Browsers First
在Firefox, Safari下设计好了后，再来hack臭名昭著的IE6
IE可以识别条件注释，如：
<!--[if IE]>
用来hack IE的bug的样式放在这里
<!--[endif]>
还有针对特定版本IE的，lte表示"less than or euqal to"，即IE6或更低版本：
<!--[if lte IE6]
some styles
<!--[endif]>
记住，这些专为IE而使用的hack一定要放到其他样式的后面，从而可以修复（覆盖）之前定义的样式。
没有评论:
发表评论