IT狗

前端范例(2)---Css和Sass编码范例

Css和Sass编码范例

1、id和class的定名

  • 虽然class(类)和id的语义化关于计算机分析没有甚么实践意义,可是id和class就是用以反应元素目标和用处的,最好防止运用一些表象大概艰涩难明的词语。

    不引荐

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

引荐

.heavy {  font-weight: 800;}.important {  color: red;}
  • 为挑选器增加状况前缀

    不引荐

    .withdrawal { background-color: #ccc;}

    引荐

    .withdrawal { background-color: #ccc;}

2、恰当地防止运用ID

一样平常状况下,ID不应当被运用于款式,不能够被复用而且每一个页面中只能运用一次ID。

以是,倡议一直斟酌运用class,而不是id,除非只运用一次。

不引荐

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

引荐

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

另外,由于ID挑选器权重很高,一个只包罗一个ID挑选器的权重高于包罗1000个class(类)名的挑选器,这使得它很希奇。

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

3、CSS挑选器中防止标署名

当构建挑选器时,应当运用清楚、正确和有语义的class类名,不要运用标签挑选器,这样会使得你的代码更简单保护。

不引荐

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

引荐

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

4、尽全力地精准

假如开发职员写挑选器链的时间,不间接运用子挑选器,大概会引发计划成绩大概消耗功能。假如你不写很通用的,须要婚配到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类的悉数三个元素。
然后,要办理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;}

5、缩写属性

不引荐

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;

引荐

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

6、单元和0

  • 省略“0”值前面的单元。不要在0值前面运用单元,除非有值。

    不引荐

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

    引荐

    padding-bottom: 0;margin: 0;
  • 去掉小数点前的“0”

    不引荐

    font-size: 0.8em;

    引荐

    font-size: .8em;

7、十六进制表示法

色彩值使用十六进制表示法越发清新,一直运用小写的十六进制数字。

不引荐

color: #FF33AA;

引荐

color: #f3a;

8、id和class名的分开符

  • 运用连字符(中划线)分开ID和Class(类)名中的单词。
  • 在挑选器中不要运用除连字符(中划线)认为的任何字符(包含没有)来毗连单词和缩写。

不引荐

.demoimage {}.error_status {}

引荐

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

9、声明按次

  • 每一个声明用分号竣事,每一个声明换行。

  • 属性名的冒号后空一格。

    不引荐

    h3 { font-weight:bold;}

    引荐

    h3 { font-weight: bold;}
  • 每一个挑选器和属性声明老是运用新的一行。

    不引荐

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

    引荐

    a:focus,a:active { position: relative;  top: 1px;}
  • 划定规矩之间一直有一个空行(双换行符)分开。

    引荐

    html { background: #fff;}body { margin: auto; width: 50%;}
  • 可按照以下声明按次:

    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

不引荐

.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;}

10、CSS引号

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

不引荐

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

引荐

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

11、挑选器嵌套(SCSS)

在Sass中你可以嵌套挑选器,这可使代码变得更干净和可读。嵌套一切的挑选器,但尽全力防止嵌套没有任何内容的挑选器。

不引荐

//没有嵌套,不引荐.content {  display: block;}.content > .news-article > .title {  font-size: 1.2em;}//不引荐,嵌套无用的内容.content {  display: block;  > .news-article {    > .title {      font-size: 1.2em;    }  }}

引荐

content {  display: block;  > .news-article > .title {    font-size: 1.2em;  }}

12、嵌套中引入空行(SCSS)

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

不引荐

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

引荐

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

13、上下文媒体查询(SCSS)

  • 在Sass中,当你嵌套你的挑选器时也可以运用上下文媒体查询。

  • 在Sass中,你可以在任何给定的嵌套条理中运用媒体查询。

  • 由此天生的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;    }  }}

引荐

/ 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;    }  }}

14、嵌套按次和父级挑选器(SCSS)

以下内容是一个SCSS块应具有的按次。

  1. 以后挑选器的款式属性
  2. 父级挑选器的伪类挑选器 (:first-letter, :hover, :active etc)
  3. 伪类元素 (:before and :after)
  4. 父级挑选器的声明款式 (.selected, .active, .enlarged etc.)
  5. 用Sass的上下文媒体查询
  6. 子挑选器作为末了的局部

引荐

.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;    }  }}

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论