share facebook facebook twitter menu hatena pocket slack

2018.11.05 MON

そのCSS、もっと簡潔に書けるかも

工藤 響己

WRITTEN BY 工藤 響己

こんにちは。今回は省略してより簡潔に書けるかもしれないCSS記法4例とおまけ1つを紹介します。
サンプルコードでは冗長な記法のクラスを.verbose {...}、簡潔な記法のクラスを.concise{...}として書いていきます。

省略できる初期値

transition: all;

時間遷移効果を与えるtransition-propertyプロパティの初期値はallなので、transition: allと記述する必要はありません1

さらに遷移変化の進行割合を表すtransition-timing-functionプロパティは初期値がeaseなので2、もしeaseに設定する場合はこれも不要になります。

css

.verbose{
  transition: all .3s ease;
}
.concise{
  transition: .3s;
}

margin: 0 auto;



左右中央寄せ目的で書かれることが多いmargin: 0 auto;ですが、そもそもmargin: autoの初期値は0です3 4。そのため以下のように省略可能なことが多い。

css

.verbose{
  margin: 0 auto;
}
.concise{
  margin: auto;
}

position:absolute;を使った上下左右中央寄せなどのケースではmargin: 0 auto;margin: auto;は振る舞いが変わるので注意です。

css

/*このようなケースでは位置が変わることがあります*/
/*上下左右中央寄せ*/
.some-box{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.other-box{
/*左右は中央寄せのまま親相対要素の上にくっつく*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}

省略できる単位と0

0に単位は不要

0という数値にpxやremなどの単位は不要です。sassのmixin機能を使って単位suffixの自動付与をしているきなど意外と見落としてしまうことも。

css

.verbose{
  font-size: 0px;
  width: 0%;
  height: 0rem;
}
.concise{
  font-size: 0;
  width: 0;
  height: 0;
}

小数点前の0は不要

0.5などの小数は.5のように0を省略できます。
ただし0.5と0を付ける記法には可読性が向上するというメリットもあります。とくに複数でコーディングするときには0.5記法を許容しつつbuild時にはminifyして取り除く…など運用の取り決めを作っておくと良い。

css

.verbose{
  box-shadow: 2px 2px 0px rgba(0,0,0,0.5);

}
.concise{
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

おまけ: その他のハック


border: none;

線を消すとき、ショートハンド記法で border: none;border-style: none;)とするよりborder: 0;border-width: 0;)とする方が簡潔です。これはoutlineプロパティでも同じです。Airbnbスタイルガイドではこの書き方が推奨されています5 6

css

.verbose{
  border: none;
  outline: none;
}
.concise{
  border: 0;
  outline: 0;
}

所感

省略できるところは省略して、簡潔で理解しやすいCSSを書いていきたいですね。精進。


1.Don’t Forget About “transition: all”

2. CSSプロパティ初期値まとめ

3. 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, ‘inline-block’ replaced elements in normal flow and floating replaced elements


4. 10.6.2 置換インライン要素、通常フローにおいて置換ブロックレベルおよび置換インラインブロック要素、置換浮動要素の場合

5. Airbnb CSS / Sass Styleguide

6. Airbnb CSS / Sass スタイルガイド(日本語訳)

元記事はこちら

そのCSS、もっと簡潔に書けるかも

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。