`

高效整洁CSS代码原则

 
阅读更多
转自http://www.loveiso.com/article/11-05-31/36.html

1. 使用Reset但并非全局Reset

  不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:
*{ margin:0; padding:0; }

  这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:


/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
  border:medium none;
  margin: 0;
  padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
  font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }



2. 良好的命名习惯

  无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。就像这样的代码:
.aaabb{margin:2px;color:red;}

  我想即使是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:
<h1>My name is <span class="red blod">Wiky</span></h1>

  问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:
.red{color:bule;}

  这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以,请不要使用元素的特性(颜色,位置,大小等)来命名一个class或id,您可以选择意义的命名如:#navigation{...},.sidebar{...},.postwrap{...}

  这样,无论你如何修改定义这些class或id的样式,都不影响它跟HTML元素间的联系。

  另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

  那么对于这样一个段落
<p class="alignleft">我是一个段落!</p>

  如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的className就为alignright就可以了。



3. 代码缩写

  CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您学会了代码缩写,原本这样的代码:


li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}



就可以缩写为:
li{
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding:5px 0 10px 5px;
}

  如果您想更了解这些属性要怎么缩写,可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。



4. 利用CSS继承

  如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就可以简写成:
#container{ font-family:Georgia, serif; }



5. 使用多重选择器

  你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如:
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }



6. 适当的代码注释

代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录:
/*------------------------------------
    1. Reset
    2. Header
    3. Content
    4. SideBar
    5. Footer
  ----------------------------------- */

  如此你代码的结构就一目了然,你可以容易的查找和修改代码。

  而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发:
/***    Header  ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/***    Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/***    Footer  ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }



7. 给你的CSS代码排序

如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速:
/*** 样式属性按字母排序 ***/
div{
    background-color:#3399cc;
    color:#666;
    font:1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}



8. 保持CSS的可读性

  书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。
/*** 每个样式属性写一行 ***/
div{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器,我会写到一行:


/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}



对于这个规则并非硬性规定,但无论您采用哪种写法,我的建议是始终保持代码一致。属性多的分行写,属性少于3个可以写一行。



9. 选择更优的样式属性值

  CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如

  区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
  而border:none把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none;

  同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。



10. 使用<link>代替@import

首先,@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计:不要使用@import》。所以,请避免使用@import



11. 使用外部样式表

  这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在 HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把CSS代码内置在HTML文档中:
<style type="text/css" >
    #container{ .. }
    #sidebar{ .. }
</style>



<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用<link>导入外部样式表:
<link rel="stylesheet" type="text/css" href="css/styles.css" />



12. 避免使用CSS表达式(Expression)

  CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

  如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

  表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

  如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以,在非不得已,请避免使用CSS表达式。



13. 代码压缩

  当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor

利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。



14. 总结

  在本文中,我力图更详尽的总结书写更高效的CSS代码的原则,但鉴于本人见识和精力有限,我还是希望这些原则能帮助您更好的书写和管理您的CSS代码,不知您又是如何书写CSS的,是否也有一些想要分享的技巧?给我留言吧谢谢~
分享到:
评论

相关推荐

    高效整洁CSS代码原则 (下)

    良好的代码规范,一个优秀代码的开始···

    高效整洁CSS代码原则 (上)

    良好的代码规范,一个优秀软件的开始···

    高效编写CSS代码的建议汇总

    总之,高效编写CSS代码需要我们遵循一些基本原则,如合理布局样式表位置,避免使用性能低下的技术,使用简写来优化代码,抽取相似代码以提高可维护性,遵循编码规范来提高代码的可读性,以及使用合适的字符编码来...

    书写高效整洁的CSS代码原则

    在编写CSS代码时,遵循一些高效和整洁的书写原则能够提高代码的可读性和可维护性,同时也能提升页面加载速度和减少浏览器渲染时间。下面我将对给定文件中提到的CSS书写原则进行详细解析。 ### 1. 使用Reset但并非...

    简单高效的css规范

    CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则。

    CSS代码规范.docx

    **CSS代码规范** 在编写CSS代码时,遵循一定的规范至关重要,这不仅有助于...遵循这些规范,你的CSS代码将更加整洁、高效,并易于维护。持续学习和实践,可以提升你的CSS编写技能,更好地适应不断发展的前端开发环境。

    css框架Blueprint CSS

    Blueprint CSS 是一个强大的前端开发工具,它为网页设计师和开发者提供了高效的CSS解决方案。这个框架的主要目标是简化...对于任何希望提升开发速度并保持代码整洁的前端团队,Blueprint CSS 都是一个值得考虑的选择。

    两个CSS代码精简工具(网页教学网推荐)

    在进行网页设计时,应遵循编写简洁、高效的CSS代码的原则,同时利用这些工具定期检查和优化CSS文件,以确保网站性能的最佳状态。 在CSS编码时,以下几点也是值得我们注意的: - 使用简洁的选择器:避免过于复杂的...

    CSS菜单样式模板完整代码

    - 使用语义化HTML元素,保持CSS代码整洁、模块化,遵循BEM(Block Element Modifier)命名规范,以及合理地分离结构(HTML)、表现(CSS)和行为(JavaScript),都是实现高效、可维护的菜单样式设计的重要原则。...

    Firefox_css_usage-0.2.9.zip

    同时,定期检查和更新CSS代码,确保始终保持着高效、简洁的代码风格,这对于维持高质量的Web开发标准至关重要。 综上所述,Firefox CSS Usage插件以其独特的功能和实用性,成为Web开发者不可或缺的利器,它不仅能够...

    原子类css提高css开发效率

    随着项目的复杂性增加,管理CSS代码变得越来越困难,这时引入原子类CSS的概念,可以显著提升CSS开发效率。本文将深入探讨原子类CSS(也称为原子设计或原子样式库)以及它如何改善JavaScript开发中的CSS相关工作流程...

    DIV+CSS制作切图原则性 图片素材如何切出思考.docx

    同时,CSS代码也要保持整洁,注释清晰,便于理解。可以采用模块化或者组件化的思想,使代码块之间相互独立,降低耦合度。 2. **代码扩展性**:在编写DIV+CSS代码时,我们需要考虑代码的可扩展性和可复用性。这意味...

    可视化 Blueprint 框架 CSS 生成工具

    “可视化Blueprint框架CSS生成工具”则是这个概念的延伸,它将Blueprint的设计原则与可视化的交互界面相结合,允许开发者通过图形化操作生成对应的CSS代码。这个工具极大地降低了CSS的学习曲线,使得即使是对CSS不...

    CSS编码规范.docx

    **CSS编码规范** 在网页设计中,CSS(Cascading Style Sheets)的编码规范是确保代码可读性、可维护性和团队协作效率的关键...遵循这些编码规范,可以使CSS代码更加整洁、高效,并有利于团队协作,提升项目整体质量。

    快速提升CSS编码能力的五个必备知识点

    掌握基本和高级选择器,如类选择器、ID选择器、伪类和属性选择器,能让你写出更高效、更具可读性的CSS代码。 学习资源:《CSS Selectors: Just the Tricky Bits》、《The 30 CSS Selectors you Must Memorize》和...

    CSS_命名规范参考及书写注意事项.rar

    通过遵循这些命名规范和注意事项,你可以创建更加整洁、高效的CSS代码,从而提升网页开发的质量和效率。在实际工作中,结合使用这些方法,你的CSS代码将更具可维护性和扩展性,同时降低出错率。记得不断学习和更新...

    CSS禅意花园[源码221例+更新源码工具]

    9. **代码组织与优化**:了解如何编写整洁、高效的CSS代码,如利用CSS预处理器(Sass、Less等),进行模块化开发,以及减少冗余代码,这些都是提高代码质量和维护性的关键。 10. **浏览器兼容性**:虽然现代浏览器...

    CSS样式命名以及兼容性.pdf

    在网页设计中,CSS(层叠样式表)是一种用于控制网页元素样式的关键技术。本篇文档主要探讨了CSS样式的命名规则和兼容性问题,这对于确保网页的可读性...同时,不断学习和应用最佳实践,可以使CSS代码更加专业和高效。

Global site tag (gtag.js) - Google Analytics