CSS および Sass (SCSS) 開発ガイドライン

この記事では主にフロントエンドのコーディング仕様 (4) - CSS と Sass (SCSS) の開発仕様を紹介します

ID とクラスの名前付け

ID とクラス (クラス) 名は常にです。 used 要素の目的と用途を反映した名前、または別の一般的な名前。見た目や曖昧な名前の代わりに。

最も理解しやすく、変更される可能性が低いため、要素の目的を反映した具体的な名前を優先する必要があります。

共通名は複数の要素の代替名にすぎず、兄弟要素と同じであり、特別な意味はありません。
それらが特別な意味を持ち、通常は「ヘルパー」として必要とされるように区別します。

クラス名と ID のセマンティクスはコンピューターの解析にとって実際的な意味はありませんが、
セマンティクス名が表す情報にはパフォーマンスの制限が含まれていないため、通常はセマンティクス名が正しい選択となります。

非推奨

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

推奨

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

IDの使用は合理的に避けてください

一般に、IDはスタイルに適用すべきではありません。
ID スタイルは再利用できず、ID はページごとに 1 回のみ使用できます。
ID でうまく機能する唯一のことは、Web ページまたはサイト全体内の位置を決定することです。
ただし、一度しか使用しない場合を除き、id の代わりに class を使用することを常に検討する必要があります。

非推奨

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

推奨

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

ID の使用に対するもう 1 つの議論は、ID セレクターの重みが高いということです。
ID を 1 つだけ含むセレクターは、1000 個のクラス名を含むセレクターよりも重みが高く、奇妙になります。

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

CSS セレクターではタグ名を使用しないでください

セレクターを構築するときは、明確で正確かつセマンティックなクラス名を使用する必要があります。タグセレクターは使用しないでください。 コード要素ではなく、クラス名
のみに注意すれば、保守が容易になります。

分離の観点から考えると、HTMLタグ/セマンティクスはプレゼンテーション層に配置されるべきではありません。
それは、順序なしリストに変更する必要がある順序付きリスト、または記事に変換される p である可能性があります。
意味のあるクラス名のみを使用し、
要素セレクターを使用しない場合は、CSS ではなく HTML マークアップのみを変更する必要があります。

非推奨

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

推奨

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

できるだけ正確に

多くのフロントエンド開発者は、セレクターチェーンを記述するときに直接サブセレクターを使用しません (注: 直接サブセレクターおよび子孫セレクター)。
場合によっては、これが設計上の問題を引き起こし、パフォーマンスに影響を与える可能性があります。
ただし、いずれにせよ、これは非常に悪い習慣です。
DOM の末尾に一致する必要がある非常に一般的なセレクターを作成していない場合は、常に直接の子セレクターを考慮する必要があります。

次の DOM について考えてみましょう:

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

次の CSS は、title クラスを持つ 3 つの要素すべてに適用されます。
次に、コンテンツ クラスの下のタイトル クラスとティーザー クラスの下のタイトル クラスのさまざまなスタイルを解決するには、スタイルを再度書き直すためのより正確なセレクターが必要になります。

非推奨

.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 には、値が 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 値の後に単位を使用しないでください。 S 推奨されません

CSS コード:

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

推奨

CSS コード:

padding-bottom: 0;
margin: 0;

16 進数ステートメント

考えられる状況では、3 文字の 10 進数を使用してください進数表記。

色の値では、
より短い 3 文字の 16 進表記が可能です。

常に小文字の 16 進数を使用してください。

非推奨

color: #FF33AA;

推奨

color: #f3a;

IDとクラス名の区切り文字
IDとクラス名の単語を区切るにはハイフン(ダッシュ)を使用します。レッスンの理解を促進するために、セレクター内の単語や略語を接続するためにハイフン (ダッシュ) 以外の文字 (何も使用しない場合も含む) を使用しないでください。

また、標準の時点では、デフォルトの属性セレクターは単語 [属性|=値] の区切り文字としてハイフン (ダッシュ) を認識するため、
そのため、区切り文字としてはハイフンにこだわることが最善です。

非推奨

.demoimage {}
.error_status {}

推奨

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

ハック

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

声明顺序

这是一个选择器内书写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;
}

声明结束

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

不推荐

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

推荐

css 代码:

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

属性名结束

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

不推荐

css 代码:

h3 {
  font-weight:bold;
}

推荐

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

选择器和声明分离

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

不推荐

css 代码:

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

推荐

css 代码:

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

规则分隔

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

推荐

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中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，
可以使用常规的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属性之间空一行。

不推荐

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将被转换，这样的媒体查询将包裹选择器的形式呈现。

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

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

不推荐

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的嵌套功能的时候，
重要的是有一个明确的嵌套顺序，
以下内容是一个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;
    }
  }
}

更多CSS 和 Sass (SCSS) 开发规范相关文章请关注PHP中文网！