提高编写CSS代码效率的10个习惯

   这篇文章介绍了提高编写CSS代码效率的10个习惯,看了觉得不错,大家可以学习一下。文章底部有原文链接。

  1、保持一贯性。

  就像其它的任何事一样,值得一直保持一贯性。保持连贯性,而不是想到什么就给id和class命名什么。

  CSS的级联样式有利于加深你的记忆,而且充分利用样式的继承去设置样式表。

  首先声明通用的部分的样式,然后继续声明不通用的。这样当你需要的时候更容易的去覆盖一个特定的样式。因为样式更易于阅读和更具逻辑性,你会发现编写CSS更迅速。

  使用一种最是适合你的方式。

  复位和覆盖

  链接和类型

  主要布局

  二次布局结构

  表单元素

  杂项


  2、注释标题,日期和签名

  当样式被重写的时候遇到问题,可以很方便的找到是原始样式的编写者。当设计模板或者主题的时候这也是一个很好的习惯。


  稍等…什么是swatch colors(色板颜色)?根据多年的经验,我发现在样式表中添加通用颜色的列表注释,在开始编写代码和以后的维护代码都是好非常有帮助的。

  节省了你打开photoshop来取色的或者打开网站的风格指南文档的步骤。当你需要指定的蓝色,滚动到顶端的注释找到相关颜色代码复制即可。

  3、整理出一套模板库

  一旦你决定使用一种结构,删除不是多余的部分留下主框架并且保存一个通用样式模板以备以后使用。

  同时你可以保存多种版本的模板已适应不同结构的网站。

  如:2列布局、博客布局、等等…。Coda(苹果系统下的编辑器)http://www.panic.com/coda/ 有很强的编辑功能,让你的编写代码更加容易。其它的编辑器也有类试的功能,只要使用相同的批处理文件,就会工作很nicely。

  如果每次都从头,尤其每次以相同的习惯和方法写一遍样式,会让人很抓狂。

  4、使用有用的命名规则

  尤其在我声明一个列的id同时将它们命名为col-alpha和col-beta的地方注意一下。为什么不叫col-left和col-right?

  时常需要想想将来的编辑。

  明年你可以需要重新设计你的网站并移动左右边栏。你不应该因为仅仅改变了位置而去重名你的html元素并重命名你的样式id。

  当然,你只需要重新定义元素的左右列的位置并保持这id仍然为#col-left,但是就会产生让人困惑的问题?如果是叫left,不要指望它一直是实现居左的。这样在移动元素以后,不会给你太多的空间的命名方式。

  CSS的优点之一就是让内容现实不同风格能力。你重构网站的时候,完全可以只是修改CSS而不去修改HTML。

  因此,不要让因为CSS的名字而局限。通过使用更通用的命名约定并保持一致性。

  给位置或者样式以固定的命名方式。如命名一个叫.link-blue的class将会让你麻烦不断,当客户要求你讲链接的蓝色改成橘色的时候将会让你的样式变的很凌乱不堪。

  因此命名的规则建立在他们是什么,而不是他们看起来像什么。例如,

  通用方面:.comment-deta > .comment-blue

  约束方面:.post-title > .post-largefont

  .comment-deta更通用,.post-title约束更少。

  5、使用连字符而不使用下划线

  有些比较老的浏览器对取得带下划线的CSS会出现问题,或就是不支持下划线。

  因此为了让代码拥有更好的向后兼容性,培养使用连字符成为一个习惯。使用#col-alpha 而别使用 #col_alpha。

  6、避免重复定义

  重复的属性尽可能避免重复定义,而需要分组定义元素的属性。如果您的h1和h2元素都是使用相同的字体大小、颜色、和边框等,他们完全和可以合并成组定义。

  同时尽可能使用样式的简写方式。时常对一些相同定义的元素进行合并和定义使用简写。


  详细写法:


  简单写法:


  你了解CSS解释中的顺时针上、下、左、右简写方式,这是相当重要。

  另外,如果你的顶部和底部,或者左边和右边的属性是相同的,你只需要两个命名。

  例子中意思是距离顶部和底部都是1em,距离左右都是0em。


  7、优化使样式轻量化。

  使用好上边的提示,你才会真正的减少你的样式表的大小。越小越容易加载,越小越容易维护及更新。

  尽可能采用分组,删除不需要的样式。

  另一种CSS常用简写:当值为零的时候,你可以不指定度量单位。如果边距设置为0,你不用定义成0px或者0em。无论测量单位是什么0都是0,同时CSS是可以识别的。

  8、代码基于火狐编写,然后针对webkit内核浏览器和IE浏览器进行调整

  首先解决CSS在火狐浏览器下的一些让人头疼的问题。如果CSS在火狐下都有问题,其它浏览器下更可能出现问题。

  9、进行验证

  请使用W3C的CSS验证器进行验证。如果你坚持认为你的布局没有什么可以修改的时候,你可以使用CSS验证器对找出错误会有很大帮助。

  10、保持页面的整洁性

  支持单独的浏览器使用单独的CSS独立的样式表,同时javascript需要的样式、服务器端需要的样式、评论的样式。这样就可以避免一些不必要的ie的hack。只有这样才会保证样式的整洁性和可管理性。

时间: 2024-10-30 06:06:35

提高编写CSS代码效率的10个习惯的相关文章

高效编写CSS代码:WEBJX分享15个CSS开发工具

文章简介:对于Web开发人员来说,好用的CSS工具可以让那些枯燥的工作变得有趣,并且还可以帮你更高效的编写CSS代码,在这里向大家推荐15个必不可少的CSS开发工具和应用. 对于Web开发人员来说,好用的CSS工具可以让那些枯燥的工作变得有趣,并且还可以帮你更高效的编写CSS代码,在这里向大家推荐15个必不可少的CSS开发工具和应用. 1. CSS Desk : An online CSS Sandbox 这是一个支持即时预览的在线CSS编辑工具,无需安装任何形式的插件或是软件,就能在线编辑CS

PHP实例说明编写PHP代码的5个好习惯

5个PHP编程的好习惯 有些人问,优秀程序员和大牛有什么区别,大概有10到20种吧.因为大牛有很好的编程习惯和丰富的经验,所以他们非常的高效.如果不好的编程习惯出现在你的代码里,你的代码效率就会降低.本文阐述一些好的编程习惯,他们可以让你成为更好的程序员. 这些习惯能让你的代码在高效运行的同时提高可维护性.你写代码的时候,可能大部分时间都浪费在维护上了,程序的维护代价很高.培养良好的编程习惯,如模块化设计,可以让你的代码可读性更好,从而容易维护. 代码中的问题往往伴随着不良的编程习惯,而且后者会

编写CSS代码时样式命名的规则

  要注意的内容: 一,命名所选用的单词应选择不过于具体表示某一状态(如颜色.字号大小等)的单词,以避免当状态改变时名称失去意义. 二,样式类名由以字母开头的小写字母(a-z).数字(0-9).下划线(_).减号(-)组成. ID名称由不以数字开头的小写字母(a-z).数字(0-9).下划线(_)组成. 可使用类似下面的规则: [模块前缀|类型|作用]_[名称]_[状态|位置] 约定模块.类型.状态.位置等的所使用的单词或其缩写,保持上面的顺序,尽量保持在两到三个单词说清用途. 例: 通用名词缩

[译] 编写整洁 CSS 代码的黄金法则

本文讲的是[译] 编写整洁 CSS 代码的黄金法则, 原文地址:Golden Guidelines for Writing Clean CSS 原文作者:本文已获作者 Tiffany Brown 授权 译文出自:掘金翻译计划 译者:reid3290 校对者:weapon-xx,bambooom 编写整洁 CSS 代码的黄金法则 要编写整洁的 CSS 代码,有一些规则是应当极力遵守的,这有助于写出轻量可复用的代码: 避免使用全局选择器和元素选择器 避免使用权重(specific)过高的选择器 使用

CSS技巧:五个方面促进你写出更加专业的CSS代码

核心提示:每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好! 每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好! 一.重置 首先,很认真的告诉你,总是要重置某些分类.无论你是使用 Eric Meyer Reset.YUI Reset,或者你自己编写的重置代码,只要使用就对了. 它能很简单的移除所

5种方法立刻写出更好的CSS代码

无论你决定使用什么方式去编写代码,保持一致.我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦.这是不需要争辩的.每个人都有自己的观点,所以选择一种你喜欢的工作方式,并在所有的样式表中保持一致. 简介当然,每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?开始用这5个Tips改进你的CSS吧!1.重置 首先,很认真的告诉你,总是要重置某些分类.无论你是使用 Eric Meyer Reset.YUI Reset 或者你自己编写的重置代码,只要

Less:优雅的写CSS代码

css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或者背景色.通常开发中,哪里需要这个颜色,我们就复制这个颜色并粘贴.下次要修改就得全部查找批量替换,其实不是很方便. 本文即将介绍的less将让我们更快更方便的编写css代码. Less是什么 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能

编写出色CSS代码的13个建议

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注意的是,请不要使用全局Reset: *{ margin:0; padding:0; }  这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距.在此建

Java程序员提高效率的10+个最佳库

众所周知,Java 的生态环境相当庞大,包含了数量相当可观的官方及第三方库.利用这些库,可以解决在用 Java 开发时遇到的各类问题,让开发效率得到显著提升. 举些例子,最常用的官方库有 java.lang.java.util.java.io.java.sql.java.net 等:而至于目前最流行的第三方库,就有 Junit.SLF4J.Google Guava.XStream.JSoup.Gson.Joda Time 等,可以说是不胜枚举.  我到底需要用到哪些 Java 库呢?某些库再热门