Rumah >hujung hadapan web >html tutorial >编写如一、符合习惯的CSS的原则_html/css_WEB-ITnose
英文原文:Principles of writing consistent, idiomatic CSS(原版)译者:tslmy原文地址:https://github.com/necolas/idiomatic-css/blob/master/translations/zh-CN/README.md
以下文档将概述一个合理的CSS开发风格指导。本指导文件强烈鼓励开发者使用已经存在了的、常见的、合力的文风。您应该有选择地吸纳一些内容来创造您自己的风格指南。
这个文档将持续更新,欢迎提出新的想法。还请多多贡献。
致谢
“作为成功的项目的一员,很重要的一点是意识到只为自己写代码是很糟糕的行为。如果将有成千上万人使用你的代码,那么你需要编写最具明确性的代码,而不是以自我的喜好来彰显自己的智商。” - Idan Gazit
在项目的所有代码中,应该只有一个风格。在空格的使用上,必须始终保持一致。使用空格来提高可读性。
提示:将编辑器配置为“显示不可见内容”。这使你可以清除行尾的空格和不需要缩进的空行里的空格,同时可以避免对注释的污染。
提示:确定好一种空格格式后,您可以用一个EditorConfig文件(或者其他相同的东西)来帮助在代码库之间维持这种基本的空格约定。
良好的注释是非常重要的。请留出时间来描述组件(component)的工作方式、局限性和构建它们的方法。不要让你的团队其它成员来猜测一段不通用或不明显的代码的目的。
注释的风格应当简洁,并在代码库中保持统一。
提示:通过配置编辑器,可以提供快捷键来输出一致认可的注释模式。
/* ========================================================================== 区块代码注释 ========================================================================== *//* 次级区块代码注释 ========================================================================== *//** * “Doxygen式注释格式”的简短介绍 * * 较长的说明文本从这里开始,这是这段文字的第一句话,而且这句话还 * 没结束,过了好一会儿,我了个去终于结束了,烦不烦啊。 * * 当需要进行更细致的解释说明、提供文档文本时,较长的说明文本就很 * 有用了。这种长长的说明文本,可以包括示例HTML啦、链接啦等等其 * 他你认为重要或者有用的东西。 * * @tag 这是一个叫做“tag”的标签。 * * TODO: 这个“‘需做’陈述”描述了一个接下来要去做的小工作。这种文本, * 如果超长了的话,应该在80个半角字符(如英文)或40个全角字符( * 如中文)后便换行,并(在“ * ”的基础上)再在后面缩进两个空格。 *//* 一般的注释 */
最终选择的代码风格必须保证:易于阅读,易于清晰地注释,最小化无意中引入错误的可能性,可生成有用的diff和blame。
.selector-1,.selector-2,.selector-3[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; font-family: helvetica, arial, sans-serif; color: #333; background: #fff; background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));}.selector-a,.selector-b { padding: 10px;}
样式声明的顺序应当遵守一个单一的原则。我的倾向是将相关的属性组合在一起,并且将对结构来说比较重要的属性(如定位或者盒模型)放在前面,先于排版、背景及颜色等属性。
小型的开发团体,可能会想要把相关的属性声明(比如说定位和箱模型)摆在一起。
.selector { /* Positioning */ position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; /* Display & Box Model */ display: inline-block; overflow: hidden; box-sizing: border-box; width: 100px; height: 100px; padding: 10px; border: 10px solid #333; margin: 10px; /* Other */ background: #000; color: #fff; font-family: sans-serif; font-size: 16px; text-align: right;}
大型团队,则可能更喜欢按字母排序,因为这样做起来很方便,而且维护起来很容易。
对于大量仅包含单条声明的声明块,可以使用一种略微不同的单行格式。在这种情况下,在左大括号之后及右大括号之前都应该保留一个空格。
.selector-1 { width: 10%; }.selector-2 { width: 20%; }.selector-3 { width: 30%; }
对于以逗号分隔并且非常长的属性值——例如一堆渐变或者阴影的声明——可以放在多行中,这有助于提高可读性,并易于生成有效的diff。这种情况下有多种格式可以选择,以下展示了一种格式。
.selector { box-shadow: 1px 1px 1px #000, 2px 2px 1px 1px #ccc inset; background-image: linear-gradient(#fff, #ccc), linear-gradient(#f3c, #4ec);}
不同的CSS预处理有着不同的特性、功能以及语法。编码习惯应当根据使用的预处理程序进行扩展,以适应其特有的功能。推荐在使用SCSS时遵守以下指导。
.selector-1 { @extend .other-rule; @include clearfix(); @include box-sizing(border-box); width: x-grid-unit(1); // other declarations}
不要试着把自己当作编译器或者预处理器,因此命名的时候尽量采用清晰的、有意义的名字。另外,对于html文件和css文件中的代码,尽量采用一致的命名规则。
/* 没有意义的命名 */.s-scr { overflow: auto;}.cb { background: #000;}/* 比较有意义的命名方式 */.is-scrollable { overflow: auto;}.column-body { background: #000;}
下面是含有上述约定的示例代码:
/* ========================================================================== Grid layout ========================================================================== *//** * Column layout with horizontal scroll. * * This creates a single row of full-height, non-wrapping columns that can * be browsed horizontally within their parent. * * Example HTML: * * <div class="grid"> * <div class="cell cell-3"></div> * <div class="cell cell-3"></div> * <div class="cell cell-3"></div> * </div> *//** * Grid container * * Must only contain `.cell` children. * * 1. Remove inter-cell whitespace * 2. Prevent inline-block cells wrapping */.grid { height: 100%; font-size: 0; /* 1 */ white-space: nowrap; /* 2 */}/** * Grid cells * * No explicit width by default. Extend with `.cell-n` classes. * * 1. Set the inter-cell spacing * 2. Reset white-space inherited from `.grid` * 3. Reset font-size inherited from `.grid` */.cell { position: relative; display: inline-block; overflow: hidden; box-sizing: border-box; height: 100%; padding: 0 10px; /* 1 */ border: 2px solid #333; vertical-align: top; white-space: normal; /* 2 */ font-size: 16px; /* 3 */}/* Cell states */.cell.is-animating { background-color: #fffdec;}/* Cell dimensions ========================================================================== */.cell-1 { width: 10%; }.cell-2 { width: 20%; }.cell-3 { width: 30%; }.cell-4 { width: 40%; }.cell-5 { width: 50%; }/* Cell modifiers ========================================================================== */.cell--detail,.cell--important { border-width: 4px;}
对于css代码库来说,如何组织代码文件是很重要的,尤其对于那些很大的代码库显得更加重要。这里介绍几个组织代码的建议:
任何一个项目,都应该有一个build的过程,在这个阶段我们可以通过工具对代码进行检测,测试,压缩等等,还可以为生产环境准备好带有版本号的代码。在这里我推荐一下grunt这个工具,我感觉它很不错。
感谢所有对idiomatic.js作出贡献的网友。