CSSのベストプラクティス：悪いCSSの9つの兆候

CSSまたはカスケードスタイルシート— Webページの外観、および場合によっては動作を定義する言語。 Web開発者は、あまり注意を払う必要のない「簡単な」言語として見過ごされがちです。 最も一般的なプロパティのいくつかを記憶し、一般的なフローとよりあいまいなプロパティをグーグルで検索するのが道です。 しかし、経験豊富な開発者が知っているように、何かをするための良い方法と悪い方法が常にあるので、見落とされるに値する言語はありません。

CSSを使用すると、エラーをスローするコンパイラがなく、不適切な実装に対する警告や通知がないため、間違った方法で行うのは非常に簡単です。 JavaScriptのようなプログラミング言語には、優れたコード品質を追跡するツールがたくさんあり、特定の関数が正しい方法で実装されていないというメッセージを開発者に投げかけるものさえあります。

この比較的短い投稿では、開発者が直面する一般的な問題のいくつかと、それらを修正する方法について説明します。 これは、特定のビジュアルコンポーネントの特定の実装の詳細に関するものではありません。 代わりに、リストは思考プロセス、アーキテクチャ、およびアプローチに焦点を当てています。

CSSの複雑さ

CSSは難しいですか？ 番号！ 確かにそうではありませんが、いくつかの非常に基本的な構造規則があります。 セレクター（クラス、ID、要素）があり、プロパティがあり、スコープがあります。 これは、C、Java、PHPなどの言語よりもはるかに少ないです。 開発者は、数分でアイデア全体を読み、スタイリングを開始できます。 もちろん、マージンとパディングの違いを知るために、w3schoolsを見ることができますが、いつ使用するかはある程度の経験が必要です。 しかし、それはロケット科学ではありません。

さて、物事をもう少し複雑にしているのは、セレクターが次を上書きするために競争するすべての方法と、あるプロパティが別のプロパティにどのように影響するかです（たとえば、表示：ブロックと表示：インライン）。 次に、マージンの折りたたみ、z-indexスタッキング、GPUとCPUのパフォーマンスのプロパティ、ボックスモデル、タイポグラフィのプロパティなどの詳細を示します。

それに加えて、ブラウザ間で常に同じ方法で実装されるとは限らない新しいCSS機能、まったく実装されていないもの、異なるプロパティを必要とするものもあります。

上記の2つの段落を見ると、フロントエンド開発者がCSSを使用するときにヒットする2つの主要な段階がわかります。1つは「ああ、それだけですか？ 」と2番目は「ああ****、それだけではなかった」です。 これが「CSSの複雑さ」の意味です

スケールアップするのが難しい、絡み合っている小さなものがたくさんあります。 コンポーネントを1つだけ作成する場合、それは簡単です。見たものは何でもスタイルを設定して機能します。 ただし、その単一のコンポーネントをより大きなアプリケーションに配置すると、追加のスタイルが適用されます。 最終的に他のもの（.buttonなど）と同じクラスになり、スタイルがアプリケーション全体に適用され、すべてが壊れてしまう可能性があります。 ストレスがたまります！

WordPress CSS：初心者のための基本ガイド

CSSの書き方：その複雑さとの戦い

賢い人々が思いついたいくつかの解決策があります、概要は次のようになります：

• 衝突の可能性を減らすクラス名のルールを定義する、BEM、SMACSSなどのCSS命名規則。
• JSのCSSは、CSSコンポーネントをJSファイルに実際に書き込むことができる新しい方法です（音が悪く、見た目も悪いですが、少なくともある程度は意味があります）。 React、Vueなどで主に有効です。
• CSSモジュールは、すべてのスタイルを1つのファイルにまとめる人にとって、JSのCSSに対するより適切なアプローチです。 CSSモジュールは、各コンポーネントのスタイルをカプセル化して、他のコンポーネントにリークしないようにし、再利用性を大幅に向上させます。 ストレスも大幅に軽減！

1つ目–命名規則は、支援するツールがないため、おそらく実装が最も困難です。 規則を理解して適用するのは、開発者としてのあなたにすべてを任せます。 あなたはまだクラス名を考える必要があります、それらはまだ衝突するべきではありません、そしてあなたはチーム全体にそれに従うようにさせなければなりません。 かなり難しい！

JSおよびCSSモジュールのCSSは、実装上の修正です。 それらはコード出力全体を変更するため、スタイルをリークすることは事実上不可能です。 しかし、それらは完全に異なる考え方とビルドのセットアップを必要とします。これは常に実行可能または望ましいとは限りません。

ここでの最善のアドバイスは次のとおりです。最も一般的で成功している命名規則を研究し、会社またはエコシステムのコーディング標準に適合するものを使用してください。 コンポーネントの分離を理解し、大きなアプリを構築するスコープと単一のユニットの観点から考え始めます。 最初から大きなアプリではないので、管理するのは不可能です。

ReactのようなライブラリまたはVueのようなフレームワークを含むスタックで作業している場合は、それらを使用してスタイルを管理できる追加のツールを調べてください。 初心者から中級レベルのCSS開発者にとって、彼らは大きな助けになるでしょう！ そして、何か良いことがあなたの道に来ない限り、あなたはそれらを捨てたくないかもしれません。

新しいツールに目を光らせてください！ それらは、開発者コミュニティがすでに見つけ、修正し、それらに対処する方法を提供した問題と戦うことから私たちを止めます。

CSSの複雑さの意味とそれと戦うためのいくつかのスターターのヒントを概説したので、より詳細な概要に飛び込み、直接的な例を示しましょう。

ウェブサイトのデザインのヒント：ウェブデザインでゲームをステップアップする方法

悪いCSSの9つの兆候

このリストは、長いマイルではなく、間違いなく完全ではありません。 悲しいことに、あなたは他の無数の問題に直面し、うまくいけば、Stackoverflowのようなサイトで特定の問題の直接的な解決策を見つけるでしょう。
ただし、ゲームを強化したい場合は、数行のcssで問題を修正するときに、それらが何をするのかを理解する必要があります。 なぜマークアップを変更しなければならなかったのですか、そしてなぜいくつかのセレクター、プロパティを変更しなければならなかったのですか？

マージンは奇妙に振る舞います

開発者が直面する一般的な問題は、2つの要素がマージン（上/下）を合計しない場合です。 たとえば、マージンのある2つの<p>要素があります：20px0;。 それらの間の合計スペースは40ではなく20pxです。これはマージンの崩壊によるものです。 要素が浮いているか、絶対に配置されている場合を除きます。 この「例外」は、ほとんどすべての定義でほとんどどこにでもあります。

Z-index：9999999、それでもz-indexの上にない：1

まず第一に、そのような高いzインデックスを書く必要はめったにありません。 99999999999999以上のような値を見たこともあります。 まず、z-indexの最大値は2147483647であるため、上記のものは役に立ちません。 第二に、それはそのようには機能しません。 どの要素が一番上にあるかは、z-index値だけでなく、スタッキングコンテキストによって定義されます。 以下の図を参照してください。

適切なプロパティをアニメーション化していない

かなり単純な質問ですが、アニメーションや取るべきアプローチに関して苦労している開発者もいます。 まず、何をアニメートできますか？ 開始値、終了値、およびその間のすべてを持つことができるもの。 不透明度はそのようなプロパティです。0から開始して1で終了し、0.3、0.6758、0.9875などの間に無限のステップを追加できます。インラインとグリッドの間に中間ステップがないため、「表示」をアニメーション化することはできません。

非効率的なアニメーション

アニメーションのFPSが悪い最も一般的な理由は、アニメーション化されているプロパティが間違っているためです。 絶対要素の「左」プロパティを変更すると、CPUを使用して計算することになります。 ただし、変換を使用する場合は、GPUになります。 そして、私たち全員が知っているように、GPUはグラフィックスを行う方が良いです。

しかし、左/変形のような代替手段がない場合、どのようにシャドウをアニメートしますか？ さて、不透明度をアニメートしてください！ 2つの要素があります。1つは開始、状態、もう1つは終了状態です。 次に、開始と終了をフェードインします。これにより、シャドウが拡大しているように見えますが、実際にはフェードするだけです。

可能であれば、レイアウトに影響を与える要素をアニメーション化しないでください。 レイアウト計算は高価であり、CPUは限られた量の計算しか実行できません。 多くの場合、16ミリ秒ごとに1つ未満であるため、FPSは60未満になります。

セレクターが深すぎる

モディファイアとは何ですか？ 別のクラスに追加して、そのプロパティの一部を置き換えることができるクラス。 例：.buttonの色：赤。 .button-primary、色：青。 したがって、.button-primaryを.buttonに追加すると、最終的に青色になります。 簡単なピーシー。 ただし、毎回そう簡単なわけではありません。 そして、それがこのようなコンポーネントであるたびにではありません。

特定のページの別のコンポーネントの子であるコンポーネントを上書きしたい場合があります。 したがって、次のようになります。.page-name.section-name .component-1 .component-2 {…}すでに4レベルの深さです。 しかし、結局のところ、.page-name .componen-2 {…}を実行するだけで済みます。 短いほど良いです！ 何らかの理由でその新しいスタイルを上書きする必要がある場合は、5レベル、次に6レベル、さらにそれ以上深くする必要はありません。

ディープセレクターは怖く、人々は！importantを使用することになります。 ！importantは、制御できないインラインスタイルを上書きする場合に使用する必要があります。 そうでなければ、それはあなたが何か正しいことをしていないという危険信号です。

ファイルが大きすぎます

もちろん、大規模なアプリケーションの場合、多くのスタイルがあり、それは完全に理解できます。 しかし、それはいつもそんなに大きいのでしょうか？ SASSでクラスを（ミックスインを介して）拡張する悪い方法は、大きなセレクターチェーンを生成し、スクロールしてすべてを表示するのに数秒かかります。 適切な拡張子を付けると、そのファイルが大幅に削減されます。 サイズを2倍にすることもできます。

含まれているフレームワークのうち、使用されているプロパティが少ないことも、大きなファイルの一般的な理由です。 bootstrap / Foundation、font-awesome、animate.css、および他のいくつかの同様のフレームワーク/ライブラリをバンドルすると、約2％を使用する巨大なファイルになります。 クリーンアップし、整頓し、本当に必要なものだけを使用してください。 多くの場合、フレームワークは必要ありません。

不要な場合のフレームワーク

Bootstrap、Foundation、UIKit、その他すべてのフレームワークは素晴らしいです！ それらは実際の問題を解決し、Web開発コミュニティにとって非常に価値があります。 ダッシュボードやサイトを作成するのに十分なHTMLやCSSを知る必要はありません。 しかし、その場合から離れて、CSSを書き始めると、いくつかの問題が発生します。

• それらを構築する方法とそれらを含める方法を正しく理解する必要があります
• 彼らが提供するカスタム設定とミックスインを見つけるには、彼らのドキュメントを読む必要があります。
• あなたは彼らのマークアップに従い、あなたのチームにそうするように教えなければなりません。
• 独自のビューを作成するには、拡張とスタイル設定の方法を真に理解する必要があります。

それらを適切に含めるということは、必要なものだけを使用することを意味します。 そのようなフレームワークがカスタムを構築することを禁止する代わりにあなたを助けるために、あなたはそれが平均よりも内部の働きをよく知っている必要があります。 また、カスタムデザインを実現するには、設定とプロパティを変更する必要があります。 そして、いくつかのカスタムCSSを記述します。 そして、そのカスタムCSSは、フレームワークが提供するものをすべて上書きします。

したがって、そのようなCSSフレームワークが実際に必要ではないが、それでも存在し、適切に使用されていない場合、これは何かが間違っていることを示す危険信号です。 そして、一度それを使い始めると、プロジェクトのライフサイクルが終わるまでそれを使用することになります。 したがって、これは重要な決定です。

コンテンツでサイズを定義できない

これは初心者レベルの問題ですが、非常に一般的な問題です。 コンテンツにふさわしい自由を与える必要があります。

たとえば、サイトのwidthプロパティを1200pxに設定したくないとします。 max-widthを1200pxに設定します。 そうすれば、ビューポートによってサイトの応答性を維持できます。

次に、入力フィールドの高さは40ピクセルではなく、1emのパディングが必要です。 さて、フォントサイズ、コンテンツはサイズを定義するものです。 そして、内部のコンテンツが大きくなっても、要素は壊れません。

サイズを定義するときのこの考え方は、アプリケーション全体を通して重要です。 そして、各プロパティはそれを考慮する必要があります。 理想的には、コンテンツ領域の幅に％を設定しないでください。メディアクエリも作成する必要があるためです。

max-widthがあった場合、ブラウザがその最大幅を下回ると、コンテンツはブラウザの幅を埋めてから通常どおり縮小します。 それ以外の場合は、そのサイズのメディアクエリを作成する必要があります。 そして、サイトに書かれている他のカスタムサイズの場合。 これは、悪いアプローチのために追加された複雑さです。 すでに説明した他のすべてのポイントとほぼ同じです。

JavaScriptハック

JavaScriptは驚異的なことをすることができます！ しかし、それは必ずしも必要ではありません。 十分にサポートされ、機能を必要とせず（後で自動的にテストするのが最適です）、他のFEメンバーもJSを知る必要がない、CSSだけで多くのことができます。

もちろん、標準のトグル機能があり、：checkedのときにチェックボックス入力を使用してスタイルを変更できます。簡単にトリガーできる背景オーバーレイがあり、counterなどのプロパティを使用して単純な<ol>リスト以上のものを作成できます。 。

ここでのアドバイスは、最初にCSSソリューションを探すことです。 ポップアップを作成するとします。 中央に表示されます（位置：固定）。 次に、[X]アイコンから、またはクリックしたときに閉じます。 JSでは、ポップアップコンテンツ以外でトリガーされるイベントを作成する必要があります。 ただし、ポップアップコンテンツにある[X]でトリガーします。

代わりに、CSSから、ポップアップのすぐ下に100vw、100vhサイズ、z-indexを持つ別の<div>を書くことができます。 次に、ワンライナーであるJSでそのdivをターゲットにすることができます。

別の例–コンテンツに配置できるボタンが必要です。これにより、それに続くすべてのコンテンツが「展開」されます。 CSSでは単純ですが、JSではもう少し複雑です。 CSSを使用すると、次のようなことができます。

 Label.button-ボタンのスタイルを視覚的に設定します。

 Input：not（：checked）〜* {display：none}-同じコンテナ内でそれ以降のすべてを非表示にします。

「同じコンテナ内」のそのビットには、JSのカスタムロジックが必要です。 また、すべての要素を選択する必要があります。これには、DOMツリーをトラバースする必要があります。 次に、CSSスタイルをそれらに適用します。これは最終的にstyle =””タグになり、何らかの理由でそれらに対処する必要がある場合は、！importantが必要になります。 CSSでは、ありがたいことに、それは非常に簡単です。

優れたWebデザイナーになるための道

結論

ご覧のとおり、これらはごくわずかな一般的な問題です。 それらすべてをカバーするには、本が必要になります。 しかし、うまくいけば、それらはあなたに良い出発点を与え、間違ったアプローチのために発生する可能性のある潜在的な問題について考えるようにあなたに思い出させます。 そのような問題を見つけるには、たくさんの経験とたくさんの読書が伴います。 そして、ここで結論に達した場合、あなたは読書で正しい道を進んでいます、今それは練習する時です！