project_html/css_WEB-ITnose での CSS スタイルの再利用を覚えておいてください。

この記事は WeChat 公開アカウントと同期されています: http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0# wechat_redirect

QR コード:

私はいつも、CSS は真剣に受け止められていない、または十分な注意が払われていないデザートだと感じてきました。これは「単純」すぎて敷居が低いため、大多数の退屈なプログラマーの能力を強調したり強化したりすることはできません。 。 。 CSS に関連する雑多なことについて、ずっと話したいと思っていました。最近のプロジェクトの実践を使って CSS について話しました。

Yu Bo もかつて記事で同様の例えをしました。「CSS は中国語のようなものです。誰もが漢字を知っており、漢字を書くことができますが、優れた記事を書けるのは素晴らしいライターだけですが、私たちにはできません。」言い換えれば、CSS は学ぶのは簡単ですが、使用するのは難しいのです。プロジェクト内のページ数が増えると、CSS コードの数も急増する可能性があります。ロードが遅いだけでなく、メンテナにとっても、これらのコードがどこで使用されているかがわからないため、簡単には触れようとはしません。 。したがって、CSS スタイルの再利用の重要性が想像できます。また、初心者や CSS に十分な注意を払っていない人にとっては、これが欠けています。 。

上記は非常に誤りではありませんか?早速、ページ デザイン図 (解答ページ) から始めて、ページ レイアウトを分析してみましょう:

デザイン ドラフトから最も直感的にわかるのは、ページ上の各質問のスタイルが統一されていることです。 、質問を質問モジュールとして開発できます。しかし、レイアウトの観点から見ると、これらの問題の縦軸は非常に不規則です。ページ上のこれらの質問の位置を特定するにはどうすればよいですか?次の写真を見てください:

はい、ページ全体を 1 つずつグリッドに分解することです。最良の方法は、各質問を 500*500 のグリッドに配置することです。この方法では、質問がグリッド内のグリッドに相対的に配置されます。これは非常に簡単です。上記はページのレイアウトです。

そして具体的なコード:

最初に行うのはもちろん CSS リセットです、

ご存知のとおり、ブラウザにはタグのデフォルトのスタイルがあります。たとえば、a タグにはデフォルトで下線が付き、li タグにはデフォルトでドットが付きます。ただし、ブラウザごとにこれらの要素のデフォルト値は異なります。要素のデフォルト スタイルの違いからブラウザを保護するには、一部の要素のスタイルをリセットする必要があります。おそらく誰もがreset.cssを見たことがあるでしょう。リセットスタイルはたくさんありますが、私はそれが必要だとはまったく思っていません。私のCSSリセットには上記のものしかありません。 cssreset の他のバージョンが悪いと言っているわけではありません。実際のビジネスから切り離して、特定のクラス ライブラリの品質について単純に話すことはお勧めできません。最適なフレームワークというものはなく、あなたのビジネスに最も適したフレームワークがあるだけです。 。

次に、CSS アトミック クラスがあります。いわゆる CSS アトミック クラスを以下の図に示します。

なぜこれらの CSS アトミック クラスがあるのでしょうか?大規模なプロジェクトでは、text-align、float、border、position などの一般的に使用される CSS ルールが何十回も出現することがあります。 。さらに、プロジェクトの開始時に css アトミック クラスをすでに定義しているため、フロート状態にしておく必要がある要素に .fl クラスを導入するだけで済みます。 float:left は、当初は何十回も出現する必要がありましたが、現在は (理論上) 1 回だけ出現するだけで済みます。理論的には、各 CSS アトミック クラスをアトミック クラスとして定義している限り、これらのアトミック クラスをさまざまに組み合わせてページを完成させることができます。 CSS アトミック クラスは特定のプロジェクトやビジネスとは何の関係もありません。定義された CSS アトミック クラスはどのプロジェクトにも適用できます。 CSS スタイルの分離が徹底されるほど、再利用性が高まります。これらのアトミック クラスのように。ただし、要素にさらに多くの CSS アトミック クラスが導入されると、この要素のクラスの値も急速に拡大します。 。 。ページを書いているとき、受け入れられるクラス値の最大数は 4 でした。この問題を考慮して、次のトピックである CSS モジュール化が導入されました。

通常、1 つのプロジェクトは 1 つのサイトであり、サイト全体のスタイルは統一されている必要があります。公式にはスタイルが統一されているため、ほとんどの CSS スタイルを再利用できます。たとえば、私の現在のプロジェクトでは、問題はモジュールとみなすことができます。質問のHTMLは以下の通りです

qhはタイトル、qaは3つの選択肢です。最も外側の div はグリッドであり、qwrapper はグリッドを基準にして配置されます。次に、統一された CSS スタイルを定義します。このページには質問が 10 個ありますが、HTML と CSS を書く必要があるのは 1 回だけです。

各質問のパーソナライズされたスタイルは、.question1、.question2、およびその他のクラスを使用して実装されます。そういえば、実はこのページの CSS スタイルは大きく異なります。実際の効果は最初の写真をご覧ください。開発時は、ブロックをモジュールとして扱うだけでなく、たとえばページ内のすべてのボタンやテキストもモジュールとして扱うことができます。ボタンが必要な場合は、.btn をインポートするだけです。ブートストラップと同じように。 。 。ここで、モジュール スタイルを定義する場合、安定したパブリック スタイルのみを定義できることに注意してください。テキストボックスに関しては、テキストボックスの幅が100のところもあれば80のところもあります。このとき、幅とスタイルを分離する必要があります。次のように考えてください

.txt {

幅 100 のテキストは次のように記述できます:

幅が 80 の場合、次のように記述できます。 :

.w100 は上記のアトムです。 Class.w100 {width: 100px}

このようにして、プロジェクト内の再利用可能なブロックがモジュール化されます。その後の開発では、以前に定義したクラス ライブラリを導入するだけで済みます。開発前に設計草案を注意深く分析したとします。ページ内に繰り返し表示される共通コンポーネントを分析しました。これらのパブリック スタイルを開発の初期段階で開発して、後で再利用しやすくすることができます。最初は少し遅いかもしれませんが、時間が経つにつれて簡単になります。

上記の手順が完了すると、理論的にはプロジェクトのほとんどの CSS スタイルが開発されたことになります。後でページを作成するときは、定義したクラスを導入するだけで済みます。あたかも私たちが独自のプロジェクト用にカスタマイズしたバージョンの「ブートストラップ」を開発したかのようです...残りはページレベルでのページ固有の CSS です。

時間とスペースの制約を考慮して、これ以上は書きません。以上が私のCSS作成ルーチンです。個人的には、誰もが独自のルーチンやパターンを持つべきだと思います。独自のスタイルを開発してください。 。 。上記はすべて個人的な意見ですので、間違っている点や異なる意見がございましたら、お気軽にご相談ください