フロントエンド開発仕様:3-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;
border-top: none; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em; 「0」の値を省略した後の単位宣言順序構造属性:
display position,left,top,right etc.overflow,float,clear etc.margin,padding表現性属性:
background,border etc.font,textはセミコロンを使用して宣言を終了し、各セレクタ/属性は新しい行の属性コロンを使用してスペースを使用します.
.test{display:block;height:100 px;}scssネストされたコンテンツのないセレクタが推奨されないことを避ける
.content { display: block;
.news-article{>.title{font-size:1.2 em;}}推奨
.content { display: block;
.news-article>.title{font-size:1.2 em;}コンテキストメディアクエリーメディアクエリーをセレクタにネストできます
.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)現在のセレクタのスタイル属性親セレクタの擬似クラスセレクタ(:first-letter,:hover,:active etc)擬似クラス要素(:before and:after)親セレクタの宣言スタイル(.selected,.active,.enlarged etc.)は、Sassのコンテキストメディアクエリーサブセレクタを最後の部分として使用します.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;
}

} }