CSSセレクターの書き方

世の中には 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 を対象とするルールは制限されており、最終的にラゲにこのタイプの要素が複数あるはずであることが後で判明した場合には、リファクタリングが必要になる可能性があります。

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

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

インラインCSS

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

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

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

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

ユーティリティクラス

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

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

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

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

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

---

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

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

以上がCSSセレクターの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。