您好,登录后才能下订单哦!
这篇文章主要讲解了“如何写CSS样式变得更规范”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何写CSS样式变得更规范”吧!
															1. 按字母顺序来排列css 
不按字母顺序排的:
代码如下:
div#header h2 { 
z-index: 101; 
color: #000;: 
position: relative; 
line-height: 24px; 
margin-right: 48px; 
border-bottom: 1px solid #dedede; 
font-size: 18px; 
} 
按字母顺序排的:
代码如下:
div#header h2 { 
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样式变得更规范”的内容了,经过本文的学习后,相信大家对如何写CSS样式变得更规范这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。