フロント・エンドの開発はセレクター選択と最小コードによる迅速なローディングとレンダリングにおいて、ますます効率性に特化しています。
LessやSCSSといったプレ・プロセッサは仕事をする上で役立ちますが、自然なやり方で最小かつ手早くCSSを記述する方法は数多くあります。このガイドは20ProCSSをカバーしており、レイアウト全体でスタイルの流れを標準化し、効率的なだけでなく多くの共通した問題も解決できる個人のフレームワークを構築するのに役立ちます。
1. CSSリセットを使用する
「normalize.css」が長年そうであったように、CSSはライブラリーをリセットし、ブラウザを通してより長い一貫性を確実にするためにあなたのサイトのスタイルにクリーンな状態を提供しました。プロジェクトの大部分はこれらのライブラリーが含むルールの全てを実際に必要とするわけでなく、ブラウザのデフォルト・ボックスモデルによってレイアウト上でほとんどの要素に適用されるあらゆるマージンとパッドを取り除くために1つのシンプルなルールで実行することができます：
ボックスサイズのものを使用することはオプションになります。下記のボックスサイジング引継ぎのヒントに倣うならば、スキップすることが可能です。
2. ボックスサイズを引き継ぐ
Htmlからボックスサイズを引き継がせましょう：
異なる行動を取る第三者のプラグインやアプリケーションによってコードが導入される際に、このことによってボックスサイズの変更が容易になります。
3. Flexboxでマージン・ハックを取り除く
あなたの望む数列に侵入させるためにマージンをリセットさせる必要がある時に、何度ポートフォリオやイメージギャラリーなどのグリッドのデザインを試してみましたか？Flexboxでプロパティバリューの間にスペースを用いることによって、「nth-」や「first-」、「last-child」のハックを取り除きましょう。
4.「not()」を使用してリスト上でボーダーのスタイルを整える
ウェブデザインにおいて使用されてきた非常に一般的な実践である「：last child」あるいは「：nth-child」はペアレンツ・セクター上で以前のスタイルに戻すことを宣言しました。各リンク間でセパレーターを構築するためにボーダーを使用したナビゲーション・メニューについて考えてみましょう：
これはブラウザに1つの方法を強制するだけではありませんので、特定のセレクターのためにそれを元に戻しましょう。このようにスタイルをリセットすることは避けられませんが、大部分を除いて1つの単独のステートメントにおいてあなたの望んだ要素を適用するために「:not()」を利用できます。
最後の１つを除いて全ての「.nav」リスト項目にボーダーを取り付けることができました。単純なことです!「.nav li」あるいは「.nav li:first-child」を使用することさえも可能ですが、「:not()」は常に意味論的で容易に理解できます。
5.「body」に「line-height」を付け加える
非効率的なスタイルシートにつながるのは、宣言を何度も繰り返すことです。あなたがプロジェクトを計画してルールを結合すれば、CSSはより流動性を増します。
「line-height」は全プロジェクトに設定可能な1つのプロパティです。コードの行を最小化するだけでなく、あなたのサイトのタイポグラフィに対して標準的な観察も実施します。「line-height」に「p」や「h*」などをそれぞれ加えるよりはむしろ、「body」に追加しましょう：
ここで単位を表明しない点に注意してください。レンダリングされたテキスト用のフォントサイズの1.5倍の「line-height」になるようにしましょう。
6.何でも垂直かつ中央に配置しましょう
垂直かつ中央にあなたのレイアウトを置くためにグローバルなルールを設定することは、CSSグリッドを使用する準備ができていない場所でコンテンツのレイアウトのために基盤を設置する素晴らしい方法です。
7.アイコンにSVGを使う
SVGスケールはあらゆるタイプに適応し、全てのブラウザでサポートされます。したがって「.png」、「.jpg」、「.gif-jif-whatev」ファイルは捨てましょう。「FontAwesome」でさえも、現在は「FontAwesome5」においてSVGアイコン・フォントを提供しています。SVGを設定することによって、他のどのイメージタイプのようにでも働かせることができます：
アクセスしやすさの秘訣：ボタンのようなインタラクティブな要素としてSVGを使用するならば、このルールによってアクセスがしやすくなります：
8.「Owl」セレクターを使う
隣り合わせになった兄弟セレクター(+)で普遍的なセクターを使用することによって、その他の要素に続く特定のドキュメントのフローの中で、あらゆる要素にとってCSSの機能を使ってルールを設定することが可能です：
これはより均一なタイプと間隔をつくるのに役立つもう１つの素晴らしいトリックです。上記の例では、H3に続いているH4あるいはもう１つの段落に続いている段落のように、他の要素に続くあらゆる要素は少なくとも(30pxと等しい)1.5remsを備えています。
9.一貫性のある垂直リズム
一貫した垂直リズムは、コンテンツを遥かに読みやすくする視覚的な美学を提供します。owlセレクターがあまりに一般的なところで、レイアウトにおける特定のセクション向けに一貫した垂直リズムを構築するために、要素内で普遍的なセレクター(*)を利用しましょう：
10.「box-decoration-break」の使用
均一なスペースやマージン、ハイライトまたは背景色を長文テキストに適用したいとあなたが思っていても、段落全体あるいは見出しが１つの大きなブロックのように見えることは望んでいないでしょう。「box-decoration-break」を使用すればスタイルをテキストに手用することができます。特に強調して見えるようにしたい時にこれは役立ちます：
「inline-block」によって色や背景、マージン、パッドを全体的な要素よりもむしろテキストのそれぞれのラインに適用させることができます。そしてクローンによって、それらのスタイルが一貫してそれぞれのラインに適用されるのを確認できます。
11.等間隔のテーブルセル
テーブルレイアウトを使用してみると、セルを等間隔に固定することができます：
12.特定のセレクターでリンクを関連づける
これは特にCMSを介して挿入されるリンクに役立ちます。通常はカスケード表示に影響を与えることなくスタイルを整えるのには便利です。たとえば、「a」要素はテキストとしての価値を持ちませんが、「href」とはリンクします：
13.「デフォルトの」リンク
リンクスタイルと言えば、まさにあらゆるスタイルシートの中から一般的なスタイルを見つけることができます。「デフォルト」リンクのためにスタイルを加えるこの方法を試してみましょう：
14.比率ボックス
固有の比率でボックスを作成するためにあなたが行う必要のあることは、「div」を一番上や下のパッドに適用することです：
パッド向けに20%を使用することで、ボックスの高さはその幅の20%と等しくなります。ビューポートの幅にかかわらず、「child div」は「100％：20％＝5：1」のアスペクト比を保ちます。
15.壊れたイメージを整える
コードを少なくすることよりも、あなたのデザイン詳細を純化することについてより多くのヒントがあります。壊れたイメージはいくつかの原因により生じますが、これらは見苦しさや混乱に繋がります。わずかなCSSを使用して見やすいものをつくってみましょう：
16.ローカル・サイジングのために「em」を使用する
ルートで基本のフォントサイズを設定した後に、たとえばhtmlの「font-size:15px:」とすれば、「rem」に要素を含んだフォントサイズを設定できます：
それから「em」に原文の要素であるフォントサイズを設定します：
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
今やそれぞれの含有要素は区分され、形成が容易になっています。持続可能で柔軟性があります。
17.ミュートされない自動再生ビデオを隠す
これはカスタムユーザー・スタイルシート向けの素晴らしいトリックです。ページがロードされる時にこのトリックは訪問者を自動再生ビデオの音声でいらいらさせることを回避します：
18.柔軟性を持たせるために「:root」を使用する
敏感なレイアウトのフォントサイズは自動的にビューポートに適用できるものでなければなりません。それはフォントサイズに対処するためにメディアクエリを書く作業を省略してくれます。「:root」を使うことで、ビューポートの高さや幅に基づくフォントサイズを算出できます：
今やあなたは「:root:」によって算出された価値に基づいた「em」ユニットを利用できます。
19.より良いモバイル体験のためにフォントサイズをフォーム要素上に設置する
「select」ドロップダウンをタップする時、HTML上でフォーム要素を拡大することからiOSサファリなどのモバイルブラウザを避けるために、入力スタイルにフォントサイズを加えましょう：
20.CSS変数を使用する
最後になりますがおろそかにできないのはCSS変数から生じる最も強力なCSSです。スタイルシート内で、キーワードを通してどこでも再利用することができる1組の共通したプロパティ価値があります。エンドユーザー向けの製品を構築する時に、変数によってカスタム化が容易になります。たとえば：
※本記事は、Level Up Your CSS Skils With These 20 Pro CSS Tipsを翻訳・再構成したものです。
おすすめ新着記事
おすすめタグ