技术头条(投递你的文章)     搜索本站     邮件订阅     微信号:IT技术博客大学习
您现在的位置首页 --> CSS/HTML --> 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

浏览:561次  出处信息

CSS and Sass (SCSS) style rules


ID and class naming

ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和晦涩难懂的名称。

应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小。

通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义。
区分他们,使他们具有特殊意义,通常需要为“帮手”。

尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义,
语义化的名称 通常是正确的选择,因为它们所代表的信息含义,不包含表现的限制。

不推荐

  1. .fw-800{

  2.  font-weight:800;

  3. }

  4. .red {

  5.  color: red;

  6. }

推荐

  1. .heavy {

  2.  font-weight:800;

  3. }

  4. .important {

  5.  color: red;

  6. }


合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次。

不推荐

  1. #content .title {

  2.  font-size:2em;

  3. }

推荐

  1. .content .title {

  2.  font-size:2em;

  3. }

另一个反对使用ID的观点是含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器,这使得它很奇怪。

  1. // 这个选择器权重高于下面的选择器

  2. #content .title {

  3.  color: red;

  4. }

  5. // than this selector!

  6. html body div.content.news-content .title.content-title.important {

  7.  color: blue;

  8. }


CSS选择器中避免标签名

当构建选择器时应该使用清晰, 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
,而不是你的代码元素,这样会更容易维护。

从分离的角度考虑,在表现层中不应该分配html标记/语义。
它可能是一个有序列表需要被改成一个无序列表,或者一个div将被转换成article。
如果你只使用具有实际意义的class(类)名,
并且不使用元素选择器,那么你只需要改变你的html标记,而不用改动你的CSS。

不推荐

  1. div.content > header.content-header > h2.title {

  2.  font-size:2em;

  3. }

推荐

  1. .content >.content-header >.title {

  2.  font-size:2em;

  3. }


尽可能的精确

很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。
有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而,在任何情况下,这是一个非常不好的做法。
如果你不写很通用的,需要匹配到DOM末端的选择器, 你应该总是考虑直接子选择器。

考虑下面的DOM:

  1. <articleclass="content news-content">

  2. <spanclass="title">News event</span>

  3. <divclass="content-body">

  4. <divclass="title content-title">

  5.      Check this out

  6. </div>

  7. <p>This is a news article content</p>

  8. <divclass="teaser">

  9. <divclass="title">Buy this</div>

  10. <divclass="teaser-content">Yey!</div>

  11. </div>

  12. </div>

  13. </article>

下面的CSS将应用于有title类的全部三个元素。
然后,要解决content类下的title类 和 teaser类下的title类下不同的样式,这将需要更精确的选择器再次重写他们的样式。

不推荐

  1. .content .title {

  2.  font-size:2rem;

  3. }

推荐

  1. .content >.title {

  2.  font-size:2rem;

  3. }

  4. .content >.content-body >.title {

  5.  font-size:1.5rem;

  6. }

  7. .content >.content-body >.teaser >.title {

  8.  font-size:1.2rem;

  9. }


缩写属性

CSS提供了各种缩写属性(如 font 字体)应该尽可能使用,即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

不推荐

  1. border-top-style: none;

  2. font-family: palatino, georgia, serif;

  3. font-size:100%;

  4. line-height:1.6;

  5. padding-bottom:2em;

  6. padding-left:1em;

  7. padding-right:1em;

  8. padding-top:0;

推荐

  1. border-top:0;

  2. font:100%/1.6 palatino, georgia, serif;

  3. padding:01em2em;


0 和 单位

省略“0”值后面的单位。不要在0值后面使用单位,除非有值。

不推荐

  1. padding-bottom:0px;

  2. margin:0em;

推荐

  1. padding-bottom:0;

  2. margin:0;


十六进制表示法

在可能的情况下,使用3个字符的十六进制表示法。
颜色值允许这样表示,
3个字符的十六进制表示法更简短。

始终使用小写的十六进制数字。

不推荐

  1. color:#FF33AA;

推荐

  1. color:#f3a;


ID 和 Class(类) 名的分隔符

使用连字符(中划线)分隔ID和Class(类)名中的单词。为了增强课理解性,在选择器中不要使用除了连字符(中划线)以为的任何字符(包括没有)来连接单词和缩写。

另外,作为该标准,预设属性选择器能识别连字符(中划线)作为单词[attribute|=value]的分隔符,
所以最好的坚持使用连字符作为分隔符。

不推荐

  1. .demoimage {}

  2. .error_status {}

推荐

  1. #video-id {}

  2. .ads-sample {}


Hacks

避免用户代理检测以及CSS“hacks” - 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜,变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库,这两种方法都应该被认为是最后的手段。换句话说,从长远来看,用户代理检测和hacks
会伤害项目,作为项目往往应该采取阻力最小的途径。也就是说,轻易允许使用用户代理检测和hacks 以后将过于频繁。


声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):

  1. 结构性属性:

    1. display

    2. position, left, top, right etc.

    3. overflow, float, clear etc.

    4. margin, padding


  2. 表现性属性:

    1. background, border etc.

    2. font, text


不推荐

  1. .box {

  2.  font-family:'Arial', sans-serif;

  3.  border:3px solid #ddd;

  4.  left:30%;

  5.  position: absolute;

  6.  text-transform: uppercase;

  7.  background-color:#eee;

  8.  right:30%;

  9.  isplay: block;

  10.  font-size:1.5rem;

  11.  overflow: hidden;

  12.  padding:1em;

  13.  margin:1em;

  14. }

推荐

  1. .box {

  2.  display: block;

  3.  position: absolute;

  4.  left:30%;

  5.  right:30%;

  6.  overflow: hidden;

  7.  margin:1em;

  8.  padding:1em;

  9.  background-color:#eee;

  10.  border:3px solid #ddd;

  11.  font-family:'Arial', sans-serif;

  12.  font-size:1.5rem;

  13.  text-transform: uppercase;

  14. }


声明结束

为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。

不推荐

  1. .test {

  2.  display: block; height:100px

  3. }

推荐

  1. .test {

  2.  display: block;

  3.  height:100px;

  4. }


属性名结束

属性名的冒号后使用一个空格。出于一致性的原因,
属性和值(但属性和冒号之间没有空格)的之间始终使用一个空格。

不推荐

  1. h3 {

  2.  font-weight:bold;

  3. }

推荐

  1. h3 {

  2.  font-weight: bold;

  3. }


选择器和声明分离

每个选择器和属性声明总是使用新的一行。

不推荐

  1. a:focus, a:active {

  2.  position: relative; top:1px;

  3. }

推荐

  1. h1,

  2. h2,

  3. h3 {

  4.  font-weight: normal;

  5.  line-height:1.2;

  6. }


规则分隔

规则之间始终有一个空行(双换行符)分隔。

推荐

  1. html {

  2.  background:#fff;

  3. }

  4. body {

  5.  margin:auto;

  6.  width:50%;

  7. }


CSS引号

属性选择器或属性值用双引号(””),而不是单引号(”)括起来。
URI值(url())不要使用引号。

不推荐

  1. @import url('//cdn.com/foundation.css');

  2. html {

  3.  font-family:'open sans', arial, sans-serif;

  4. }

  5. body:after {

  6.  content:'pause';

  7. }

推荐

  1. @import url(//cdn.com/foundation.css);

  2. html {

  3.  font-family:"open sans", arial, sans-serif;

  4. }

  5. body:after {

  6.  content:"pause";

  7. }


选择器嵌套 (SCSS)

在Sass中你可以嵌套选择器,这可以使代码变得更清洁和可读。嵌套所有的选择器,但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性,而父元素将不什么样式属性,
可以使用常规的CSS选择器链。
这将防止您的脚本看起来过于复杂。

不推荐

  1. // Not a good example by not making use of nesting at all

  2. .content {

  3.  display: block;

  4. }

  5. .content >.news-article >.title {

  6.  font-size:1.2em;

  7. }

不推荐

  1. // Using nesting is better but not in all cases

  2. // Avoid nesting when there is no attributes and use selector chains instead

  3. .content {

  4.  display: block;

  5. >.news-article {

  6. >.title {

  7.      font-size:1.2em;

  8. }

  9. }

  10. }

推荐

  1. // This example takes the best approach while nesting but use selector chains where possible

  2. .content {

  3.  display: block;

  4. >.news-article >.title {

  5.    font-size:1.2em;

  6. }

  7. }


嵌套中引入 空行 (SCSS)

嵌套选择器和CSS属性之间空一行。

不推荐

  1. .content {

  2.  display: block;

  3. >.news-article {

  4.    background-color:#eee;

  5. >.title {

  6.      font-size:1.2em;

  7. }

  8. >.article-footnote {

  9.      font-size:0.8em;

  10. }

  11. }

  12. }

推荐

  1. .content {

  2.  display: block;

  3. >.news-article {

  4.    background-color:#eee;

  5. >.title {

  6.      font-size:1.2em;

  7. }

  8. >.article-footnote {

  9.      font-size:0.8em;

  10. }

  11. }

  12. }


上下文媒体查询(SCSS)

在Sass中,当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中,你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换,这样的媒体查询将包裹选择器的形式呈现。

这技术非常方便,
有助于保持媒体查询属于的上下文。

第一种方法这可以让你先写你的手机样式,然后在任何你需要的地方
用上下文媒体查询以提供桌面样式。

不推荐

  1. // This mobile first example looks like plain CSS where the whole structure of SCSS is repeated

  2. // on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate

  3. // the content in the media query to the content in the upper part (mobile style)

  4. .content-page {

  5.  font-size:1.2rem;

  6. >.main {

  7.    background-color: whitesmoke;

  8. >.latest-news {

  9.      padding:1rem;

  10. >.news-article {

  11.        padding:1rem;

  12. >.title {

  13.          font-size:2rem;

  14. }

  15. }

  16. }

  17. >.content {

  18.      margin-top:2rem;

  19.      padding:1rem;

  20. }

  21. }

  22. >.page-footer {

  23.    margin-top:2rem;

  24.    font-size:1rem;

  25. }

  26. }

  27. @media screen and(min-width:641px){

  28. .content-page {

  29.    font-size:1rem;

  30. >.main >.latest-news >.news-article >.title {

  31.      font-size:3rem;

  32. }

  33. >.page-footer {

  34.      font-size:0.8rem;

  35. }

  36. }

  37. }

推荐

  1. // This is the same example as above but here we use contextual media queries in order to put the different styles

  2. // for different media into the right context.

  3. .content-page {

  4.  font-size:1.2rem;

  5. @media screen and(min-width:641px){

  6.    font-size:1rem;

  7. }

  8. >.main {

  9.    background-color: whitesmoke;

  10. >.latest-news {

  11.      padding:1rem;

  12. >.news-article {

  13.        padding:1rem;

  14. >.title {

  15.          font-size:2rem;

  16. @media screen and(min-width:641px){

  17.            font-size:3rem;

  18. }

  19. }

  20. }

  21. }

  22. >.content {

  23.      margin-top:2rem;

  24.      padding:1rem;

  25. }

  26. }

  27. >.page-footer {

  28.    margin-top:2rem;

  29.    font-size:1rem;

  30. @media screen and(min-width:641px){

  31.      font-size:0.8rem;

  32. }

  33. }

  34. }


嵌套顺序和父级选择器(SCSS)

当使用Sass的嵌套功能的时候,
重要的是有一个明确的嵌套顺序,
以下内容是一个SCSS块应具有的顺序。

  1. 当前选择器的样式属性

  2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)

  3. 伪类元素 (:before and :after)

  4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)

  5. 用Sass的上下文媒体查询

  6. 子选择器作为最后的部分

The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

  1. .product-teaser {

  2. // 1. Style attributes

  3.  display:inline-block;

  4.  padding:1rem;

  5.  background-color: whitesmoke;

  6.  color: grey;

  7. // 2. Pseudo selectors with parent selector

  8. &:hover {

  9.    color: black;

  10. }

  11. // 3. Pseudo elements with parent selector

  12. &:before {

  13.    content:"";

  14.    display: block;

  15.    border-top:1px solid grey;

  16. }

  17. &:after {

  18.    content:"";

  19.    display: block;

  20.    border-top:1px solid grey;

  21. }

  22. // 4. State classes with parent selector

  23. &.active {

  24.    background-color: pink;

  25.    color: red;

  26. // 4.2. Pseuso selector in state class selector

  27. &:hover {

  28.      color: darkred;

  29. }

  30. }

  31. // 5. Contextual media queries

  32. @media screen and(max-width:640px){

  33.    display: block;

  34.    font-size:2em;

  35. }

  36. // 6. Sub selectors

  37. >.content >.title {

  38.    font-size:1.2em;

  39. // 6.5. Contextual media queries in sub selector

  40. @media screen and(max-width:640px){

  41.      letter-spacing:0.2em;

  42.      text-transform: uppercase;

  43. }

  44. }

  45. }

原文:Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / SASS coding style

觉得文章有用?立即: 和朋友一起 共学习 共进步!

建议继续学习:

  1. 规范自己的JavaScript书写    (阅读:5300)
  2. PHP编码规范    (阅读:3540)
  3. 各浏览器的默认CSS    (阅读:3178)
  4. 数据库开发规范    (阅读:2640)
  5. CSS的未来:明智的布局工具终于到来    (阅读:2584)
  6. 分清“语言/规范”以及“平台/实现”,以及跨平台.NET开发    (阅读:2540)
  7. CSS 忍者:安全的 CSS hacks 秘籍    (阅读:2220)
  8. Android 4.0设计规范 优先导读 十大改变 (附全文翻译pdf)    (阅读:2120)
  9. phpDocumentor    (阅读:2091)
  10. 编码风格不是编码规范    (阅读:2020)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2017 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号