長い間ブログを更新していませんでしたが、この間色々なことがあり、疲れてしまいました。でも、merceCSSをアップデートしたり、これまでまとめたモジュールコンテンツを整理してみんなで共有したり、交流会に参加したり、まだまだやりたいことはたくさんあります。
「 IKEAの家具デザインのモジュール性」、「ページ再構成におけるモジュール思考」、「ページ再構成におけるコンポーネント制作のポイント」など、私はモジュラーデザインについて何度も言及してきましたが、具体的な内容についてはこれまで一度も話したことはありませんでした。実装内容は以前ですが、ちょっとした感想です。今回は実装面に焦点を当て、これまでに行ったモジュール化のいくつかをまとめます。
モジュール化をうまく行うには、スタイルの範囲を理解することが非常に重要だと思うので、この部分がこのシリーズの最初の記事となります。
プログラムを書いたことがある学生なら、変数にはスコープがあることを知っているはずです (知らない場合は Google に聞いてください。ここでは説明しません)。スタイルの定義にもスコープの問題、つまり定義のスコープがあります。 . 以下のpの範囲など、わかりやすいです。
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
スタイル セレクターの優先事項は、スタイルの学習に関する基本的な知識です。簡単に復習しましょう。
使用されるルールも非常に単純です。つまり、セレクターの重みが合計され、大きい方が優先されます。重みが同じ場合は、後で定義された方が優先されます。非常にシンプルですが、注意して書かないとCSSの定義の重複や冗長なコードが発生しやすくなります。
上記から、2 つの重要な要素を導き出すことができます。
スタイルの重みを知ることに何の意味があるでしょうか?たとえば、次のように使用できます。 最も単純な例を挙げると、
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
スタイルの重みを理解すると、上記の例がどのように実行されるかがわかります。さらなる応用はモジュール化です。「 IKEA 家具デザインからのモジュール化」の例のように、詳細については次に進んでください。