书写CSS的5个小技巧让你的样式更规范
发布时间：2013-08-13 11:47:36 作者：佚名 
我要评论
我要评论CSS在书写过程中会一些小技巧，会省时省力，比如按字母顺序来排列css、先标记 后css等等，本文整理了一些，感兴趣的朋友可以参考下希望对大家书写css有所帮助
1. 按字母顺序来排列css
不按字母顺序排的：
div#header h1 {
z-index: 101;
color: #000;:
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母顺序排的：
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
理由是这样的：可以更好的找到某个属性。
2. 更好的组织css结构
使用css注释来给css分组，这样结构明了，也有利于协同设计。
/*****Reset*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
3. 保持一致性
不要无意义的去讨论到底一个选择器的所有属性写在一行，还是每个属性写一行比较好。如果你就喜欢写在一行，因为每排写一行会让整个文档感觉太长了，找起来不方便。但是发给team的另一个人，他却喜欢每句排一行，那怎么办？其实很简单，把css拿去w3c验证，它会有一份结果，会自动转换成每排一行。
4. 先标记 后css
对html的标记弄好后再写css会比较不容易出错。比如写一个页面，先写一个最基本的标记结构<body>
<div id="wrapper">
<div id="header"><!--end #header-->
<div id="container">
<div id="content">
</div><!--end #content-->
<div id="sidebar">
</div><!--end #sidebarr-->
</div><!--end #container-->
<div id="footer">
</div>!<--end #footer-->
</div><!--end #wrapper-->
</body>
然后就是尽量善用子选择器，而不是一要给哪个元素进行样式化，就给它添加个选择器。
5. CSS Reset/重置
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.
* { margin: 0; padding: 0; }这句并不适用一些元素比如单选按钮，不过有单选按钮就重新给单选按钮重设就好了嘛。
不按字母顺序排的：
复制代码
代码如下:div#header h1 {
z-index: 101;
color: #000;:
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母顺序排的：
复制代码
代码如下:div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
理由是这样的：可以更好的找到某个属性。
2. 更好的组织css结构
使用css注释来给css分组，这样结构明了，也有利于协同设计。
/*****Reset*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
3. 保持一致性
不要无意义的去讨论到底一个选择器的所有属性写在一行，还是每个属性写一行比较好。如果你就喜欢写在一行，因为每排写一行会让整个文档感觉太长了，找起来不方便。但是发给team的另一个人，他却喜欢每句排一行，那怎么办？其实很简单，把css拿去w3c验证，它会有一份结果，会自动转换成每排一行。
4. 先标记 后css
对html的标记弄好后再写css会比较不容易出错。比如写一个页面，先写一个最基本的标记结构<body>
复制代码
代码如下:<div id="wrapper">
<div id="header"><!--end #header-->
<div id="container">
<div id="content">
</div><!--end #content-->
<div id="sidebar">
</div><!--end #sidebarr-->
</div><!--end #container-->
<div id="footer">
</div>!<--end #footer-->
</div><!--end #wrapper-->
</body>
然后就是尽量善用子选择器，而不是一要给哪个元素进行样式化，就给它添加个选择器。
5. CSS Reset/重置
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.
* { margin: 0; padding: 0; }这句并不适用一些元素比如单选按钮，不过有单选按钮就重新给单选按钮重设就好了嘛。
相关文章
- 这里为大家送上一份CSS代码书写规范究极指南,包括代码注释和命名规范以及空格缩进等一应俱全,都来自大家平时的约定俗成,绝对值得学习借鉴,需要的朋友可以参考下2016-05-27
- 这篇文章主要介绍了Discuzx系统 CSS 编码规范、CSS属性书写顺序,需要的朋友可以参考下2014-10-22
- 写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里总结一个CSS书写规范、CSS书写顺序供大家参考2014-03-06
- 这是去年为公司培训的时候写的整理的一个白皮书，希望大家多多提出意见。谢谢！2010-06-01
- 在web开发中页面设计时如何使css书写规范是很重要的。正确规范的书写css样式表可以使提高网页的速度以及，各种浏览器的兼容性，以便于开发程序的人员更好的嵌入程序。2009-10-29
- 这篇文章主要给大家介绍CSS 的加载及加载顺序以及遇到的问题思路解析，文中还给大家补充介绍了关于html，css，js三者的加载顺序问题，需要的朋友参考下吧2017-12-25
- CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下2016-06-21
- 这篇文章主要介绍了解决CSS3的opacity属性带来的层叠顺序问题的方法,主要针对opacity的属性值小于1的层会覆盖在其他层之上的问题,需要的朋友可以参考下2016-05-09
- 这篇文章主要介绍了CSS中z-index属性对层叠顺序的处理,分情况讲解了各种曾跌情况下哪个box更靠近用户,需要的朋友可以参考下2016-03-05
- css书写顺序，据网上说这个是Mozilla建议的，让你的代码兼容性更好。2010-01-01
最新评论