创建CSS样式表的十个技巧

时间：2016.04.18 发布人：tide_xi**unsai

已解决问题

谷歌tide_xi**unsai用户在2016.04.18提交了关于“重生之大涅磐创建CSS样式表的十个技巧”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2024-10-07T09:23:10。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，滴水之恩,来日我当涌泉相报！

希望以下的回答，能够帮助你。

第1个回答

用户名：u人地方人时间：2016.04.18

　　如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，JinaBolton将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。

　　本文主要内容为：CSS代码编码规范，教来自你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入问答正题

　　1.不要在又h**TML文件中使用CSS样式定义

　　相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你啊均圆依里文这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地**定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。

　　想象一下，当旧这样的坏习惯被我们保持了下来素清针飞影了运算，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，Oh**，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。

　　千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。

　　注意：请小心使用过多的外部样式表，如果每次更改你都创建没负铁光粮保一个新的样式表，这不坏适药息手联会给你带来任何好处。过多的样式表会让苏倍洋解火副包专你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后为某保面的内容中我会专门和你一起讨论这个问题。

　　友情提醒：过多的样式表应用保践争师组秋序代起阶械，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。

　　2.“语义学Semantics”不仅仅是一个让你迷惑的词语

　　我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能铁季让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义：

　　.l13k{节聚击工规color:#369;}

　　我相信你乍看到这条定义，你能否知道它是用来干嘛的吗?我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗?让我们再来看一条定义：

　　.left-blue{color门作呀同采条角:#369;}

　　这条定义希多目机围穿今，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右爆文字颜色将换成红色。很显然，这个名称将变得不再煤己科神合适，甚至变得不正确脱定察资，现在你有两个选适口银画五载地非法区择，一是替换掉每个使用该class的地方，二是继续使用这个让人**生误解的名称。

　　这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免余基百向使用具有具体形象的词汇来命名(比如使用box)，这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来修础看一下这个：

　　.pro**ct-description{color:#369;}

　　这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。

　　3.善用代码注释

　　善用代码注释将会给你和你的团队成员带来极大的便利，不仅仅是通常的注解，我们还能非常创造性的去使用注释来帮助我们更好的完成工作。

　　*提示和标注

　　代码注释最基本和最常见的用处就是用来提示和标注代码，告诉别人这是用来干嘛的。

　　/*Turnoffbordersforlinkedimages*/

　　img{border:0;}

　　*时间戳和署名

　　和我们写程序代码一样，是用注释在文件头部留下时间戳，版本号以及编辑者的署名，将更好的帮助我们追踪记录文件的历史记录。

　　/*SushimonsterTypographyStyles

　　Updated:Thu10.18.07@5:15p.m.

　　Author:JinaBolton

　　—————————————————-*/

　　*组织代码

　　将样式定义按照不同的组别来分组是一个非常好的主意，如果我希望将页首的样式定义放在一起，我会使用这样的注释来帮助我提高代码可读性：

　　/*h**EADER

　　—————————————————-*/

　　*注释标帜

　　如果你采用了我上面提及的使用注释来分隔不同分组的样式定义代码的方法的话，那使用注释标帜将是一个非常有用的技巧来帮助你更好的查找代码，迅速准确的**到你想要的位置。我们可以使用一个特殊的符号(比如[=])来作为注释标帜

　　/*=h**EADER

　　—————————————————-*/

　　非常酷的一个小技巧，这样你不用上下拖动，就能迅速通过查找来**到你想要编辑的位置了，查看更多关于注释标帜。

　　*参考索引

　　虽然不常用，但是也是非常有用的一个注释使用方式就是作为代码的参考索引，比如在文件头部留下使用到的颜色代码：

　　/*COLORS

　　BodyBackground:#2F2C22

　　MainText:#B3A576

　　Links:#9C6D25

　　DarkBrownBorder:#222019

　　Greenh**eadline:#958944

　　4.明确什么时候使用CSSh**ack什么时候使用IE条件注释

　　有很多关于使用CSSh**ack带来的问题，或是使用IE条件注释来解决IE兼容性问题是更佳的方法的文章，以及两者都不支持的文章。以前，我一直认为使用IE条件注释解决这个问题要比CSSh**ack来的合适，但是最近通过一些例，我发现条件注释也不是最合适的解决方案。

　　原因在于，使用条件注释，必然需要维护同一样式的不同IE版本的副本，这样就带来了工作量的增加，而使用CSSh**ack则没有这个问题，因此要具体问题具体分析。

　　但是不管采用哪种方法，请注意以下两点：

　　a)如果使用了条件注释，请在主代码文件中留下注释，提醒自己以及其他设计师，如果修改了此处样式，则需要同时更新其他所有IE版本的样式定义。

　　b)如果使用CSSh**ack，也请留下注释，标明这里使用哪些h**ack，对于什么版本浏览器生效，因为在可以预见的将来，随着浏览器版本的升级，这些h**ack很有可能会失效。

　　5.组织好你的选择器以及属性声明

　　切记，切记，请将你的样式表文件组织的结构清晰，我比较倾向于以下的代码组织方式：

　　resetstyles重置浏览器默认值

　　typographystyles文字，版式定义

　　layoutstyles(header,content,footer,etc.)布局定义

　　mo**leorwidgetstyles模块定义

　　etc.

　　对于上面的分组之下，我根据元素DOM位置来分组：

　　anyparentstyles(containingelements,workingoutside-in)容器元素

　　block-levelelementstyles(paragraphs,lists,etc.)块级元素

　　inlineelementstyles(links,abbreviations,etc.)行级元素

　　etc.

　　再之下，我根据元素类型来分组：

　　paragraphs

　　blockquotes

　　addresses

　　lists

　　forms

　　tables

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

　　positioning(withcoordinates)styles

　　float/clearstyles

　　display/visibilitystyles

　　spacing(margin,padding,border)styles

　　dimensions(width,height)styles

　　typography-related(line-height,color,etc.)styles

　　miscellaneous(list-style,cursors,etc.)styles

　　很多人喜欢将属性声明按照字母排序，这个就是看个人喜好，但是我喜欢这样的分组方式。

　　6.创建CSSFramework

　　如果你发现你经常创建类似的样式表的话，那你可以创建属于自己的CSSFramework来积累大量的基础样式表，这样在将来可以大大简化你的工作。

　　screen.css-AscreenCSSfilecaneitherh**eallyourstylesyouwanttobeusedforonscreen,and/orcanimportadditionalstyles,suchasthefollowing:

　　reset.css-AresetCSSfilecanbeusedto“reset”allthedefaultbrowserstyling,whichcanhelpm**eiteasiertoachievecross-browsercompatibility.(我的重置样式表undohtml.css)

　　typography.css-AtypographyCSSfilecandefineyourtypefaces,sizes,leading,kerning,andpossiblyevencolor.

　　grid.css-AgridCSSfilecanh**eyourlayoutstructure(andactasthewireframeofyoursite,bydefiningthebasicheader,footer,andcolumnsetup).

　　print.css-AprintCSSfilewouldincludeyourstylesyouwanttobeusedwhenthepageisprinted.

　　Blueprintframework就是一个非常不错的CSSFramework，大家可以看一下。

　　7.平衡可读性和代码优化

　　是将代码优化到极致(比如，没有注释，没有换行，压缩到体积最小)，还是保留文档非常好的可读性。这个问题，每个人可以去找属于自己的平衡点。当然最理想的做法是，发布网站的时候再去压缩CSS样式表文件。

　　8.熟练掌握你的文本编辑器

　　不管你是使用textmate，dreamwe**er，vim，还是什么，请一定要熟练掌握他们。工欲善其事，必先利其器。

　　9.使用版本控制

　　使用例如SVN或者CVS等版本控制程序来**我们更好的维护样式表。(对于我们程序员来说，可能这个再熟悉不过了，推荐使用SVNiloveit)

　　10.创建并维护样式表文件指南

　　如果你想成为一名出色的设计师，坚持这点吧。

注：更多精彩文章请关注三联网页设计教程栏目。