CSS样式表创建的十个技巧

发布时间:2019-08-22编辑:脚本学堂
主要介绍css样式表创建的几点技巧,实用性强,爱好者不仿看一下.

如果想成为一位CSS高手,记住一堆选择器是不够的,还要提高css样式表的开发效率。这里我们分享一下关于如何创建的CSS样式表的十个技巧。
CSS代码编码规范,教你怎么写出整洁漂亮性感的css代码,完整文字查看本文。

1. 在HTML文件中不要使用CSS样式
有经验的设计师来应该都使用外部样式表来定义CSS样式。这里需要再次告诉你这点,因为相当多的站点在最开始的时候,有非常结构清晰,组织良好的代码,逐渐地内部定义甚至内联样式开始到站点的各个地方。也许项目周期十分紧迫,抑或我们有点偷懒。
这样的坏习惯被我们保持下来,如果老板要求不改动网页内容重新设计网站的样式,你不得不去查找这些自己丢在各个地方的代码,如果项目规模非常大,那就够你忙活的了。
注意不要过多的使用外部样式表,不要改一次就重建一个样式表,过多的样式表让你将来的调试和更新工作变得更加复杂。还会带来潜在的性能问题,并且在IE6下,最多只能引入32个外部样式表。

2. “语义学Semantics”不仅仅是一个让你迷惑的词语
在你选择最合适,语义最正确的元素来描述文档内容之外,也要选择语义清晰的词语来定义你的class名称以及元素ID名称。,这样还能让你和团队成员的工作更加简单。看一条样式定义:
 

.l13k { color: #369; }
 

这个名称应该是只有作者本人知道的缩写,即使作者现在知道含义,时间长了还能知道它的含义吗?让我们再来看一条定义:
 

.left-blue { color: #369; }
 

这个你可能立刻猜到它是用来干什么的了,页面左边区域,文字颜色为蓝色,表述的非常清楚明确。如果老板希望重新设计样式,这个区域的换到右边,颜色换成红色。很显然,这个名不正确,现在你有两个选择,一是换掉每个使用该class的地方,二是继续使用这个让人产生误解的名称。
我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义,同样的也尽量避免使用具有具体形象的词汇来命名(比如使用 box),这样将内容和样式分离的初衷。让我们来看一下这个:
 

.product-description { color: #369; }
 

这个定义命名,无论你重构多少次,它都是非常合适的。

3. 善用代码注释
不仅仅是通常的注解,还能使用注释来帮助我们更好的完成工作。
* 提示和标注
代码注释最基本和最常见的用处就是用来提示和标注代码,告诉别人这是用来干嘛的。
 

img { border: 0; }
 

* 时间戳和署名
和我们写程序代码一样,是用注释在文件头部留下时间戳,版本号以及编辑者的署名,将更好的帮助我们追踪记录文件的历史记录。
* 组织代码
如果我希望将页首的样式定义放在一起,我会使用这样的注释来帮助我提高代码可读性:
* 注释标帜
如果采用了上面提及的使用注释来分隔不同分组的样式定义代码,那将更好的帮你查找代码,迅速准确的定位到你想要的位置。我们可以使用一个特殊的符号(比如 [=])来作为注释标帜
* 参考索引
不常用,但是也是非常有用的一个注释使用方式就是作为代码的参考索引,比如在文件头部留下使用到的颜色代码:

4. 明确什么时候使用CSS Hack 什么时候使用IE条件注释
关于使用CSS Hack带来的问题,或是使用IE条件注释来解决IE兼容性问题是更佳的方法的文章,以及两者都不支持的文章。以前,我一直认为使用IE条件注释解决这个问题要比CSS Hack来的合适,但是最近发现条件注释也不是最合适的解决方案。
原因是使用条件注释,必然需要维护同一样式的不同IE版本的副本,工作量的增加,而使用CSS Hack则没有这个问题,具体问题具体分析。
采用哪种方法,都应注意以下两点:
a) 如果使用了条件注释,请在主代码文件中留下注释,提醒自己以及其他设计师,如果修改了此处样式,则需要同时更新其他所有IE版本的样式定义。
b) 如果使用CSS Hack,也请留下注释,标明这里使用哪些Hack,对于什么版本浏览器生效,因为在可以预见的将来,随着浏览器版本的升级,这些Hack很有可能会失效。

5. 组织好你的选择器以及属性声明
请将你的样式表文件组织的结构清晰,以下的代码方式:
reset styles  重置浏览器默认值
typography styles  文字,版式定义
layout styles (header, content, footer, etc.)  布局定义
module or widget styles  模块定义
etc.
对于上面的分组之下,我根据元素DOM位置来分组:
any parent styles (containing elements, working outside-in)  容器元素
block-level element styles (paragraphs, lists, etc.)  块级元素
inline element styles (links, abbreviations, etc.)  行级元素
etc.
再之下,我根据元素类型来分组:
 

复制代码 代码示例:
paragraphs  <p>
blockquotes  <blockquote>
addresses  <a>
lists <ul> <dl>
forms  <form>
tables  <table>
 

最后对于每一个样式定义,我会将属性声明根据不同的类型分组:
 

复制代码 代码示例:
positioning (with coordinates) styles
float/clear styles
display/visibility styles
spacing (margin, padding, border) styles
dimensions (width, height) styles
typography-related (line-height, color, etc.) styles
miscellaneous (list-style, cursors, etc.) styles
 

很多人喜欢将属性声明按照字母排序,这个就是看个人喜好,但是我喜欢这样的分组方式。
6. 创建CSS Framework
如果经常创建类似的样式表,那就可以创建属于自己的CSS Framework来积累大量的基础样式表,这样可以简化你的工作。
screen.css - A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
reset.css - A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.  (我的重置样式表 undohtml.css)
typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
grid.css - A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
print.css - A print CSS file would include your styles you want to be used when the page is printed.
Blueprint framework 就是一个非常不错的CSS Framework,大家可以看一下。
7. 平衡可读性和代码优化
是将代码优化到极致(比如,没有注释,没有换行,压缩到体积最小),还是保留文档非常好的可读性。这个问题,每个人可以去找属于自己的平衡点。当然最理想的做法是,发布网站的时候再去压缩CSS样式表文件。
8. 熟练掌握你的文本编辑器
不管你是使用textmate,dreamweaver,vim,还是什么,请一定要熟练掌握他们。工欲善其事,必先利其器。
9. 使用版本控制
例如SVN或者CVS等版本控制程序来辅助我们更好的维护样式表。
10. 创建并维护样式表文件指南

如你想成为一名好样的工程师,坚持这点吧。