前端开发编号标准(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;
    }
  }
}