世の中にはたくさんの CSS 手法がありますが、私はそれらすべてが大嫌いです。より多くのものもあれば (追い風など)、いくつかは少なくなります (BEM、OOCSS など)。しかし結局のところ、それらにはすべて欠点があります。

人々がこれらのアプローチを使用するのにはもちろん正当な理由があり、対処された問題の多くは私も遭遇した問題です。そこでこの投稿では、CSS を整理する方法に関する私自身のガイドラインを書き留めたいと思います。

これは、誰でもすぐに使い始めることができる完全に説明された CSS 手法ではありません。もしかしたら、追加の作業を加えればそれを実現できるかもしれませんが、この投稿の目的は、単に CSS を書くときにこれらの決定をどのように行うかを示すことです。

内蔵要素

経験則として、私はできるだけ組み込みの要素タイプを使用し、余分な毛羽立ちをできるだけ少なくするようにしています。

何千もの異なる種類のボタンが必要ということは、より深いレベルでデザインに問題がある可能性があることを示しているため、場合によっては、フレームワーク固有のクラスが使用されるまで CSS が不活性であることに魅力を感じます。ほとんどの場合、ボタンが単に Click Me! であり、それ以上の魔法が何も必要とされていないボタンのように見えるのが理想的であると私は考えています。

div.btton はボタンに変わります

カスタム要素

すべてのデザイン要素に、意味的に適合する HTML 相当物があるわけではありません。このような場合、私は通常、カスタム要素に頼ります。

JavaScript を伴わずにカスタム要素名が使用されている例はあまり見たことがありませんが、これは、私が望むように見える明確な HTML を記述するための驚くほど確実な選択肢であることが証明されています。

デザインの観点から完全に独立した要素は、時間の経過とともに JavaScript でのみ実装できる要件を開発する可能性が高くなります。そのため、HTML やコンポーネントの変更を必要としない要件を実装するための明確な道筋が残ります。 CSS。

div.vsep は垂直区切り記号

クラス

クラスは、まったく新しい要素タイプではなく、既存のノード名の修飾子として機能する必要があり、多くの場合、異なる要素タイプに対して同様ではあるが異なる効果をもたらします。

危険なボタンはボタンです。危険

属性

要素を変更するいくつかの方法は、クラスが便利な単純なオン/オフ スイッチではなく、キーと値のペアのように動作します。

このような場合、一致するセレクターを備えたカスタム属性が、私が使用するたびに最良のオプションであることが証明されています。ハイフンでつながれたクラスとは異なり、どれが属性でどれが値であるかを構文レベルで示すため、編集者が強調表示しやすくなり、人間の目で素早く解析しやすくなり、JavaScript を使用したインターフェースが容易になります。

attr() 関数がいつかコンテンツだけでなく CSS に取り入れられるかもしれないという希望をまだ持っている人にとって、これは将来を見据えた追加のレイヤーでもあります。

ID

ID は、定義上、ドキュメント内で一意です。そのため、特定の ID を対象とするルールは制限され、結局、lage にこのタイプの要素が複数あるはずであることが後で判明した場合には、リファクタリングが必要になる可能性があります。

そのため、ID は慎重に使用し、1 つのドキュメントに複数の要素を含めることに意味がない場合にのみ使用する必要があります。

実用性と読みやすさの両方の意味で、クラスよりも優れた利点はかなり小さいため、要素とスタイルの間の明確な 1 対 1 の関係が特定できない場合は、通常、クラス側で誤ることが最善のアイデアです。

インラインCSS

現実世界のアプリケーションには、ある時点で、表示されるコンテキストで見た目をより美しくするために、単純に個別の調整が必要な要素が含まれることがあります。

このような場合には、style 属性が最適です。これを使用することが悪い習慣であると考えられる理由はすべて、ユーティリティ クラスを含むあらゆる種類のインライン スタイルに当てはまります。問題は属性ではなく、スタイルとマークアップが混在していることです。

インライン スタイルのスタイルとクラスの 1 つの違いは、一方は目的を示し、プレーンな CSS の使用を許可し、ほとんど普遍的であるのに対し、もう一方はそうではないことです。

簡単に言えば、width: 100px には普遍的に定義された意味がありますが、.width-100 にはあらゆる意味が含まれます。

ユーティリティクラス

非常にまれに、要素固有のスタイルが非常に複雑になり、明示的にインライン化すると可読性が損なわれるか、不可能ですらあります (メディア クエリが必要な場合など)。

このような場合、たとえそれが醜くても、ユーティリティ クラスが基本的に唯一の選択肢です。

理想的な世界では、これらは特定のミックスイン クラスとは別に処理でき、より簡単に区別するためにプレフィックスを使用することも検討しましたが、最終的にはこれらを醜くしない良い方法を見つけられませんでした。

要素の型を指定する通常のクラスとは対照的に、ユーティリティ クラスに a という接頭辞を付けて、要素に何らかの機能を追加するというアイデアが気に入っています。

赤いフローティング ボタン

それで終わりです。もちろん、同じプロジェクトは 2 つとしてなく、実用性を保つためにルールを少し曲げる必要がある場合もありますが、全体的には、これが画面上の物を特定の方法で見せる方法を決定するための私のフレームワークです。

どう思いますか？嫌いですか？意味があると思いますか?コメントでお知らせください?