前端开发编号标准（4）—— CSS 和 Sass (SCSS) 开发

日期：2021-01-20 类型：科技新闻我要分享

关键词：自助建站，专业建站，建站网站，建站平台，网站在线制作app

ID and class naming

ID和class(类)名一直应用能够反映元素目地和主要用途的名字，或别的通用性名字。替代表象和晦涩难懂晦涩难懂的名字。

应当首选实际和反应元素目地的名字，由于这些是最能够了解的，并且产生转变的将会性最少。

通用性名字只是好几个元素的备用名，她们弟兄元素之间是1样的，沒有非常实际意义。
区别她们，使她们具备独特实际意义，一般必须为“助手”。

虽然class(类)名和ID 的词义化针对测算机分析来讲沒有甚么具体的实际意义，
词义化的名字一般是正确的挑选，由于它们所意味着的信息内容含意，不包括主要表现的限定。

不强烈推荐

.fw⑻00 {
  font-weight: 800;
}
 
.red {
  color: red;
}

强烈推荐

.heavy {
  font-weight: 800;
}
 
.important {
  color: red;
}

有效的防止应用ID

1般状况下ID不可该被运用于款式。
ID的款式不可以被复用而且每一个网页页面中你只能应用1次ID。
应用ID唯1合理的是明确网页页面或全部站点中的部位。
虽然这般，你应当自始至终考虑到应用class，而并不是id，除非只应用1次。

不强烈推荐

#content .title {
  font-size: 2em;
}

强烈推荐

.content .title {
  font-size: 2em;
}

另外一个抵制应用ID的见解是含有ID挑选器权重很高。
1个只包括1个ID挑选器权重高于包括1000个class(类)名的挑选器，这使得它很怪异。

// 这个挑选器权重高于下面的挑选器
#content .title {
  color: red;
}
 
// than this selector!
html body div.content.news-content .title.content-title.important {
  color: blue;
}

CSS挑选器中防止标识名

当搭建挑选器时应当应用清楚，精确和有词义的class(类)名。不必应用标识挑选器。假如你只关注你的class(类)名
，而并不是你的编码元素，这样会更非常容易维护保养。

从分离出来的角度考虑到,在主要表现层中不可该分派html标识/词义。
它将会是1个井然有序目录必须被改为1个无编码序列表，或1个div将被变换成article。
假如你只应用具备具体实际意义的class(类)名，
而且不应用元素挑选器，那末你只必须更改你的html标识，而无需修改你的CSS。

不强烈推荐

div.content > header.content-header > h2.title {
  font-size: 2em;
}

强烈推荐

.content > .content-header > .title {
  font-size: 2em;
}

尽量的精准

许多前端开发开发设计人员写挑选器链的情况下不应用立即子挑选器（注：立即子挑选器和子孙后代挑选器的差别）。
有时，这将会会致使痛疼的设计方案难题而且有时将会会很耗特性。
但是，在任何状况下，这是1个十分不太好的做法。
假如你不写很通用性的，必须配对到DOM尾端的挑选器，你应当一直考虑到立即子挑选器。

考虑到下面的DOM:

<article class="content news-content">
  <span class="title">News event</span>
  <div class="content-body">
    <div class="title content-title">
      Check this out
    </div>
 
    <p>This is a news article content</p>
 
    <div class="teaser">
      <div class="title">Buy this</div>
      <div class="teaser-content">Yey!</div>
    </div>
  </div>
</article>

下面的CSS将运用于有title类的所有3个元素。
随后，要处理content类下的title类和 teaser类下的title类下不一样的款式，这将必须更精准的挑选器再度重新写过她们的款式。

不强烈推荐

.content .title {
  font-size: 2rem;
}

强烈推荐

.content > .title {
  font-size: 2rem;
}
 
.content > .content-body > .title {
  font-size: 1.5rem;
}
 
.content > .content-body > .teaser > .title {
  font-size: 1.2rem;
}

缩写特性

CSS出示了各种各样缩写特性（如 font 字体样式）应当尽量应用，即便在只设定1个值的状况下。

应用缩写特性针对编码高效率和可读性是有很有效的。

不强烈推荐

css 编码:

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

强烈推荐

css 编码:

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 和企业

省略“0”值后边的企业。不必在0值后边应用企业，除非有值。
不强烈推荐

css 编码:

padding-bottom: 0px;
margin: 0em;

强烈推荐

css 编码:

padding-bottom: 0;
margin: 0;

106进制表明法

在将会的状况下，应用3个标识符的106进制表明法。
色调值容许这样表明，
3个标识符的106进制表明法更简洁明了。

自始至终应用小写的106进制数据。

不强烈推荐

color: #FF33AA;

强烈推荐

color: #f3a;

ID 和 Class（类）名的隔开符

应用连标识符（中划线）隔开ID和Class（类）名中的单词。以便提高课了解性，在挑选器中不必应用除连标识符（中划线）认为的任何标识符（包含沒有）来联接单词和缩写。

此外，做为该规范，预设特性挑选器能鉴别连标识符（中划线）做为单词[attribute|=value]的隔开符，
因此最好是的坚持不懈应用连标识符做为隔开符。

不强烈推荐

.demoimage {}
.error_status {}

强烈推荐

#video-id {}
.ads-sample {}

Hacks

防止客户代理商检验和CSS“hacks” – 最先尝试不一样的方式。根据客户代理商检验或独特的CSS滤镜，变通的方式和 hacks 很非常容易处理款式差别。以便做到并维持1个合理的和可管理方法的编码库，这两种方式都应当被觉得是最终的方式。换句话说，从长久看来，客户代理商检验和hacks
会损害新项目，做为新项目常常应当采用阻力最少的方式。也便是说，随便容许应用客户代理商检验和hacks 之后将过度经常。

申明次序

这是1个挑选器内撰写CSS特性次序的大概轮廊。这是以便确保更好的可读性和可扫描仪关键。

做为最好实践活动，大家应当遵照下列次序（应当依照下表的次序）：

构造性特性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
主要表现性特性：
background, border etc.
font, text
不强烈推荐

.box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

强烈推荐

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

申明完毕

以便确保1致性和可拓展性，每一个申明应当用分号完毕，每一个申明换行。

不强烈推荐

css 编码:
.test {
  display: block; height: 100px
}

强烈推荐

css 编码:

.test {
  display: block;
  height: 100px;
}

特性名完毕

特性名的冒号后应用1个空格。出于1致性的缘故，
特性和值（但特性和冒号之间沒有空格）的之间自始至终应用1个空格。

不强烈推荐

css 编码:

h3 {
  font-weight:bold;
}

强烈推荐

css 编码:
h3 {
  font-weight: bold;
}

挑选器和申明分离出来

每一个挑选器和特性申明一直应用新的1行。

不强烈推荐

css 编码:

a:focus, a:active {
  position: relative; top: 1px;
}

强烈推荐

css 编码:

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

标准隔开

标准之间自始至终有1个空行（双换行符）隔开。

强烈推荐

css 编码:

html {
  background: #fff;
}
 
body {
  margin: auto;
  width: 50%;
}

CSS引号

特性挑选器或特性值用双引号（””），而并不是单引号（”）括起来。
URI值（url()）不必应用引号。

不强烈推荐

css 编码:

@import url('//cdn.com/foundation.css');
 
html {
  font-family: 'open sans', arial, sans-serif;
}
 
body:after {
  content: 'pause';
}

强烈推荐

css 编码:

@import url(//cdn.com/foundation.css);
 
html {
  font-family: "open sans", arial, sans-serif;
}
 
body:after {
  content: "pause";
}

挑选器嵌套循环 (SCSS)

在Sass中你能够嵌套循环挑选器，这可使编码变得更清理和可读。嵌套循环全部的挑选器，但尽可能防止嵌套循环沒有任何內容的挑选器。
假如你必须特定1些子元素的款式特性，而父元素将不甚么款式特性，
可使用基本的CSS挑选器链。
这将避免您的脚本制作看起来过度繁杂。

不强烈推荐

css 编码:

// Not a good example by not making use of nesting at all
.content {
  display: block;
}
 
.content > .news-article > .title {
  font-size: 1.2em;
}

不强烈推荐

css 编码:

// Using nesting is better but not in all cases
// Avoid nesting when there is no attributes and use selector chains instead
.content {
  display: block;
 
  > .news-article {
    > .title {
      font-size: 1.2em;
    }
  }
}

强烈推荐

css 编码:

// This example takes the best approach while nesting but use selector chains where possible
.content {
  display: block;
 
  > .news-article > .title {
    font-size: 1.2em;
  }
}

嵌套循环中引进空行 (SCSS)

嵌套循环挑选器和CSS特性之间空1行。

不强烈推荐

css 编码:

.content {
  display: block;
  > .news-article {
    background-color: #eee;
    > .title {
      font-size: 1.2em;
    }
    > .article-footnote {
      font-size: 0.8em;
    }
  }
}

强烈推荐

css 编码:

.content {
  display: block;
 
  > .news-article {
    background-color: #eee;
 
    > .title {
      font-size: 1.2em;
    }
 
    > .article-footnote {
      font-size: 0.8em;
    }
  }
}

左右文新闻媒体查寻(SCSS)

在Sass中，当你嵌套循环你的挑选器时还可以应用左右文新闻媒体查寻。
在Sass中，你能够在任何给定的嵌套循环层级中应用新闻媒体查寻。
由今生成的CSS将被变换，这样的新闻媒体查寻将包裹挑选器的方式展现。

这技术性十分便捷，
有助于维持新闻媒体查寻属于的左右文。

第1种方式这可让你先写你的手机上款式，随后在任何你必须的地区
用左右文新闻媒体查寻以出示桌面上款式。

不强烈推荐

css 编码:

// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate
// the content in the media query to the content in the upper part (mobile style)
 
.content-page {
  font-size: 1.2rem;
 
  > .main {
    background-color: whitesmoke;
 
    > .latest-news {
      padding: 1rem;
 
      > .news-article {
        padding: 1rem;
 
        > .title {
          font-size: 2rem;
        }
      }
    }
 
    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }
 
  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;
  }
}
 
@media screen and (min-width: 641px) {
  .content-page {
    font-size: 1rem;
 
    > .main > .latest-news > .news-article > .title {
      font-size: 3rem;
    }
 
    > .page-footer {
      font-size: 0.8rem;
    }
  }
}

强烈推荐

css 编码:

// This is the same example as above but here we use contextual media queries in order to put the different styles
// for different media into the right context.
 
.content-page {
  font-size: 1.2rem;
 
  @media screen and (min-width: 641px) {
    font-size: 1rem;
  }
 
  > .main {
    background-color: whitesmoke;
 
    > .latest-news {
      padding: 1rem;
 
      > .news-article {
        padding: 1rem;
 
        > .title {
          font-size: 2rem;
 
          @media screen and (min-width: 641px) {
            font-size: 3rem;
          }
        }
      }
    }
 
    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }
 
  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;
 
    @media screen and (min-width: 641px) {
      font-size: 0.8rem;
    }
  }
}

嵌套循环次序和父级挑选器(SCSS)

当应用Sass的嵌套循环作用的情况下，
关键的是有1个确立的嵌套循环次序，
下列內容是1个SCSS块应具备的次序。

当今挑选器的款式特性
父级挑选器的伪类挑选器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级挑选器的申明款式 (.selected, .active, .enlarged etc.)
用Sass的左右文新闻媒体查寻
子挑选器做为最终的一部分
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

css 编码:

.product-teaser {
  // 1. Style attributes
  display: inline-block;
  padding: 1rem;
  background-color: whitesmoke;
  color: grey;
 
  // 2. Pseudo selectors with parent selector
  &:hover {
    color: black;
  }
 
  // 3. Pseudo elements with parent selector
  &:before {
    content: "";
    display: block;
    border-top: 1px solid grey;
  }
 
  &:after {
    content: "";
    display: block;
    border-top: 1px solid grey;
  }
 
  // 4. State classes with parent selector
  &.active {
    background-color: pink;
    color: red;
 
    // 4.2. Pseuso selector in state class selector
    &:hover {
      color: darkred;
    }
  }
 
  // 5. Contextual media queries
  @media screen and (max-width: 640px) {
    display: block;
    font-size: 2em;
  }
 
  // 6. Sub selectors
  > .content > .title {
    font-size: 1.2em;
 
    // 6.5. Contextual media queries in sub selector
    @media screen and (max-width: 640px) {
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
  }
}

上一篇：运用CSS3伪元素完成慢慢发光的方格边框返回下一篇：没有了