前端开发规范（二、CSS篇）“广东会”

CSS代码组织以组件为单元组织代码段；制定一致的注释规范；组件块和子组件块以及声明块之间使用一空行分开，子组件块之间三空行分开；如果使用了多个 CSS 文件，将其根据组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；良好的注释是很是重要的。请留出时间来形貌组件（component）的事情方式、局限性和构建它们的方法。

不要让你的团队其它成员 来推测一段不通用或不显着的代码的目的。提示：通过设置编辑器，可以提供快捷键来输出一致认可的注释模式。Class 和 ID使用语义化、通用的命名方式；使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；制止选择器嵌套层级过多，只管少于 3 级；制止选择器和 Class、ID 叠加使用；出于性能考量，在没有须要的情况下制止元素选择器叠加 Class、ID 使用。

元素选择器和 ID、Class 混淆使用也违反关注分散原则。如果HTML标签修改了，就要再去修改 CSS 代码，倒霉于后期维护。

声明顺序相关属性应为一组，推荐的样式编写顺序PositioningBox modelTypographicVisual由于定位（positioning）可以从正常的文档流中移除元素，而且还能笼罩盒模型（box model）相关的样式，因此排在首位。盒模型决议了组件的尺寸和位置，因此排在第二位。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。引号使用url() 、属性选择符、属性值使用双引号。媒体查询（Media query）的位置将媒体查询放在尽可能相关规则的四周。

不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们离开了，未来只会被大家遗忘。

不要使用 @import与 <link> 相比，@import 要慢许多，不光增加分外的请求数，还会导致不行预料的问题。替代庖法：使用多个 元素；通过 Sass 或 Less 类似的 CSS 预处置惩罚器将多个 CSS 文件编译为一个文件；其他 CSS 文件合并工具；链接的样式顺序：a:link -> a:visited -> a:hover -> a:active（LoVeHAte）选择字体在 Web 上应用字体，是一门技术，同时也是一门艺术. 由于盘算机历史生长的原因，西文有大量优秀的字体可供选择，可对于中文来说就是一项挑战. 主流操作系统提供的当地中文字体少少，另一方面中文字体组成的特殊性，其体积过于庞大，无法良好地使用 webfont. 所以编写结实的 font-family 是一件需要深思熟虑的事情.以下列出种种平台下合适的中西文字体：桌面端 Mac, Windows, Linux 上适合网页显示的优秀中文字体移动端 iOS, Android 上适合网页显示的优秀中文字体主流操作系统上适合网页显示的优秀西文字体抛开宋/明体长时间作为系统默认字体，所发生的审美疲劳，宋/明体相比黑体是更合适作为内文字体. 大多的宋/明体针对内文设计，横细直粗，造型方正，笔画在小字号的情况下，不会糊在一起，给人一种素雅的感受. 而黑体笔画粗壮有力，引人注目，更适互助为标题使用.但大部门人已经习惯在网页上阅读黑体，以及宋/明体在字重过大的情况下，显示效果还是不太理想. 所以内文默认提供黑体，可选择性的切换宋/明体.垂直的旋律音阶Robert Bringhurst 在《The Elements of Typographic Style》谈到字号巨细之间的比例，形似于音乐中的音阶. 作曲时以某个特定的音阶为基础，才会形成特定的气势派头. 字号的排版同样如此，有纪律的字号变化，才会形成特定的排版气势派头.将内文以 16px 作为字号标题 h1, h2, h3, h4, h5, h6 以 16px 作为字号基础，按同比例的递减节奏此外，Robert Bringhurst 还谈到版式中的空间就像音乐中的时间(Space in typography is like time in music)，言下之意，掌握间距（行高）就如掌握节奏. 节奏是对时间的支解，倘若抢拍便失去节奏. 文字的间距（行高）亦是对空间的支解，纷歧致间距（行高）比例，便会失去「垂直的旋律」.将内文以 1.7em 作为行高标题 h1, h2, h3, h4, h5, h6 以 1.5em 作为行高.段首缩进 VS 段落间距段落分开对于中文排版而言也是特别重要，主要以「段首缩进」和「段落间距」两种方式体现，它们的唯一目的就是将段落分开.「段首缩进」主要用于印刷书籍，节约纵向空间，保持文本连贯，但一般在网页上的阅读速度较快，会使文字过于麋集发生压力. 相反「段落间距」主要用于网页，充实使用网页无限的纵向空间，保障文本块的整洁，同时给予长篇阅读休息的间隙. 所以一般网页排版，会思量选择「段落间距」，可以设置以下属性实现「段落间距」.对齐汉字的方块性质组成了汉字独占的艺术美感，使其具有工致的特点，从而显现出中文排版的重要原则：所有元素都是正方体. 但从二十世纪开始使用标点后，以及中西文混排的情况越来越多，为了保证「禁则处置惩罚」和「齐头尾」实现，可能需要在差别条件下举行适当的断词处置惩罚.「禁則」是来自日语的排版术语，主要指的就是克制一些标点等字符泛起在行首或行尾的规则，大致相当于汉语常说的「避头尾」.可以设置以下属性实现「齐头尾」，其中inter-ideographic意思是「通过调整单词和字符之间的留白来实现两头对齐」.但这样的「齐头尾」并不是完美的，主要由于技术遗留原因，在 Windows 和 Linux 上的 webkit 浏览器并没有实现 inter-ideographic 导致中西文混排的时候，容易泛起过分拉伸字间距的情况。

为此有一种不优雅的解决方案，在极易泛起字间距拉伸的小尺寸屏幕（手机）上使用「断词处置惩罚」，制止字间距拉伸，可是这样也带来「无视避头尾规则」和「西文单词断词」的坏毛病. 这是用一种不优雅解决另一种不优雅，按需决议吧.可以设置以下属性举行「断词处置惩罚」。

本文来源：广东会-www.shangbiaocs.com