CSS团队精神:CSS最佳实践团队开发
你有过多少次接手别人开发过的项目,却发现作者的代码思路一团糟吗?或是你跟几个团队成员合作开发,他们每个人都有自己书写代码的方式吗?或是你重新回顾你多年前开发的项目,不记得当初是怎么想的?我总是遇到这种事情。事实上,我最近在修复供应商提供facepalm-inducing的css上花费了将近300个小时。这300个小时,使我充满了挫败感,不仅是因为我自己,还有我的团队成员的原因。而且他占用了本应该花费在新项目上的宝贵时间和资源
如果供应商在他的css中已经遵循了一些基本的指导方针。那么将会为他节省宝贵的时间和金钱,更不用说我会已更好的状态去对待他。在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工作。
结构化
书写好的css的基础是有良好的结构。这样的css可以帮助我以及任何将来要更新这段代码的人,更好的理解并快速定位到要找的样式上。
在开始写样式前,我先定义了一个css文件结构,根据页面中不同内容部分划分的区块。通常,这些结构是每个网站通用的:
1.Header
2.Navigation
3.Main content
4.Sidebar
5.Footer
在我的样式文件里,我添加了必要的注释,以标明每个部分的样式从哪里开始
/*---GLOBAL---*/
/*---HEADER---*/
/*---NAV---*/
/*---CONTENT---*/
/*---SIDEBAR---*/
/*---FOOTER---*/
注意第一个注释global的部分,他不是针对于网站的特定内容,而是针对网站上的通用样式,例如布局结构,以及标题、段落、列表和链接等基础样式。
在样式头部设置通用的样式,有助于全站更好的继续共有样式,并在需要时覆盖即可。
越多的css就需要越多的组织
在创建超大型的网站,处理相当多的css时,我就会给每个区块里添加二级注释。例如,在global里我定义这样的二级结构分类:
/*---GLOBAL---*/
/*--Structure--*/
/*--Typographic--*/
/*--Forms--*/
/*--Tables--*/
/*---HEADER---*/
/*---NAV---*/
/*--Primary--*/
/*--Secondary--*/
/*---CONTENT---*/
/*---SIDEBAR---*/
/*---FOOTER---*/
同样你也看到了我给NAV也添加了二级注释,分别为主导航和次导航。
事实上,对于很少css的小型网站,我通常是不使用二级注释的。但是对于大型的css文件,二级注释被证实是很管用的。
自由格式化
你使用的注释格式完全取决于你。以上你看到的例子是我和我的团队很钟爱的方式。也有些人喜欢用两行定义他们的注释格式:
/* HEADER
------------------------------*/
另一些人使用特殊字符如‘=’,作为搜索字符的标记:
/* =Header
------------------------------*/
一些人不使用二级注释,他们用一种完全不同的结构,不是根据页面内容划分,而是用元素的类型划分如:headers,images,lists等等。关键是用你喜欢的格式去定义并一直这么使用。
想根据内容元素划分?没问题。想要小写注释,那就去做。不想使用二级注释缩进?那就不用.不喜欢连字符想用时间?ok。你只需要做对于你和你的团队最有意义的事情就好。
交流注释用法
我们已经了解了注释的结构,但是你应该就这如何使用注释的问题跟你团队的同事交流一下。
什么时间,谁做了什么
作为团队成员的一份子,很有必要在团队成员之间交流已经写好的css文件的相关细节。在我的团队里,我们在css文件的头部添加了一些css文件创建和更新信息的摘要注释。
/*----TITLE: Main screen styles | AUTHOR: EPL | UPDATED: 03/23/10 by EPL----*/
在处理多个样式表时,头部的信息是有用的。如一个屏幕,一个用于打印,一个用于移动甚至是关于ie的hack写法。作者的信息让团队成员知道一旦css出了问题应该去找谁。而更新信息让团队了解谁最后做的更新以及更新时间。
至于你的摘要注释,仅需要包含对你团队有用的信息。如果你不需要作者信息,跳过。如果想要版权声明加上。我甚至见过摘要里面有地址和联系信息的。
/*---- IE6 screen styles (ie6.css) Company ABC 1234 Avenue of the Americas New York, NY 10020 http://companyabc.com Updated: 03/23/10 by EPL ----*/
颜色值
我遇到过的最有用的css注释之一是网站用到的颜色值。
/*---COLORS: Green #b3d88c | Blue #0075b2 | Light Gray #eee | Dark Gray #9b9e9e | Orange #f26522 | Teal #00a99d | Yellow #fbc112---*/
颜色值在开发阶段很有用,节省你测试颜色和从其他样式里查找的时间。你不需要知道这个十六进制值是不是蓝色,你只需要找到这个颜色值,然后复制粘贴即可。
在我的团队里,我们在css文件头部添加通用的颜色值,要在所有样式声明和注释前,摘要注释后面添加。我们也尝试保持关键字尽可能简单方便维护,但是他到底有多复杂完全取决于你。
格式也全取决于你。你可以让所有定义的颜色值放在一行显示,也可以把他们分成多行显示:
/*---COLORS
Green #b3d88c
Blue #0075b2
Light Gray #eee
Dark Gray #9b9e9e
Orange #f26522
Teal #00a99d
Yellow #fbc112
---*/
同样,找到一个最好的有利于你需要的格式,一旦定义好就要保持他的一致性。
开发和调试
有时候在我开发的过程中,不得不徘徊在我的css 和团队其他成员之间。而这时注释就派上用场了。当我有时冥思苦想为什么css在ie下会有这样的bug,我就只需要走开即可。
你或是你的同事做个笔记,包括可能的样式,和没有解决的困惑:
/*--//--Styling for link states is pending new changes from designer, please don't edit | EPL 03/23/10--\\--*/
a, a:link, a:visited {
color:#0075b2;
text-decoration:none;
}
a:hover, a:focus, a:active {
color:#b3d88c;
}
为了让他们与众不同,我通常用一种不同于其他注释的格式,同时让他们尽可能的详细。还是使用最适合你的格式。</span>
不过记住,一旦你完成开发和调试工作,这些注释就没有用了。他们既不跟你的工作有关,也不跟你的css有关,他们的存在只会增大你的文件体积。
样式重置
样式重置已经很流行。他们出现在样式文件的头部,用来设置html元素在跨浏览器显示的基本样式:
/*---RESET---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
以上的例子摘自Eric Meyer的重置文档,这个我也经常用。但是我倾向于去掉我用不到的标签,我也建议你这样做。比如我的团队构建的网站里面几乎没有<kbd>,也没有<iframe>,<applet>或是包含以上的一些元素。
所以,我去掉这些元素选择器。虽然在页面加载或是文件体积上只有很小的不同,但是我感觉这样有助于,避免团队成员间对于不使用的标签的困扰。
如果我不想要覆盖浏览器的内置样式,我也可以编辑重置样式表,例如如何处理无序列表。在这种情况下,我确保这些元素不包含在样式表声明里。
不过,我应该澄清一下,css重置并不适用于所有人。你有很多不使用他的理由,这由你决定。如果你要重置样式,要保持你的重置样式表尽量干净和特殊。
命名约定
最头疼的事情之一是,遇到其他人写的css,而且是定义的类名和id名毫无意义的那种。例如像下面这样:
.f23 {
background: #fff;
补充:web前端 , HTML/CSS ,
- 更多html/css疑问解答:
- div+css中关于ie浏览器中非啊元素的:hover的实现问题,哪位大神指点下啊
- css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
- css 属性选择器 ie6 不支持吗?
- 用css、jquery做的选项卡效果,有一个小疑问,请高手指点,代码如下:
- 介绍本学习css的书
- wordpress多个CSS样式怎么调用?
- 这个div 的css是如何编写的
- div+css中,div的右边框小于div的高度且居中,除了用背景图片,如何实现?
- 表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
- CSS 在一个大的DIV里面,另一个DIV怎么居中并置底。
- dw中html文档为什么无法链接css文档
- 设计一个小例子说明DIV+CSS的优势(例子要解释并注释)。
- 我会html css目前正在学js,打算在大三的寒假找个实习,请问应该找哪方面的实习?
- css问题,跪求大大帮忙
- 请教网页设计高手,如下图的这种css代码怎么写?