SMACSS の CSS 構造を段階的に説明します。

この記事では、CSS アーキテクチャ SMACSS に関する関連知識を提供します。また、smacss とは何か、およびこのアーキテクチャの分類に関する関連問題についても説明します。皆様のお役に立てれば幸いです。

CSS にはスコープが 1 つしかないため、CSS コードの保守に注意を払わないと、作成したコードが読みにくく保守しにくくなります。そのため、CSS のスコープは 1 つだけです。 Web ページ自体が階層化され、BEM 方法論が抽象化されます。

BEM のシンプルな 3 層分類方法は、中小規模の Web サイトを扱うのには問題ありませんが、複雑な Web サイトのスタイルを扱うのはさらに困難になる可能性があります。より良い方法を見つける必要があります。

そこで SMACSS が誕生しました SMACSS と BEM の関係は、レイアウトにおける Flex レイアウトとグリッド レイアウトの関係に少し似ています。

しかし、SMACSS と BEM はこれまで包含と包含の問題ではなかったことにご注意ください。フレックス レイアウトとグリッド レイアウトを適用するときと同じように、Web サイトの構造をレイアウトするときは、グリッド、通常のレイアウト、およびグリッド レイアウトを使用する傾向があります。単純な2次元 レイアウトはFlexを使用し、適切なタイミングで適切な方法を使用します SMACSSとBEMは似ています 考え方をマスターすれば、応用は簡単です。

BEM をまだ学習していない場合は、CSS アーキテクチャに関する記事「BEM」を参照してください。

SMACSS とは

SMACSS は略語であると考えるのが難しくありません。この略語が Web サイトの開設です。 注: Scalable and Modular Architecture for CSS 名前の意味モジュール性と構造を記述することは非常に明確で、カスタマイズされたスケーラブルな CSS です。

SMACSS の学習を完了すると、CSS のスケーラブルなモジュラー アーキテクチャについてより深く理解できるようになります。

SMACSS の発音方法? SMACSS は単語ではありませんが、独自の発音があり、{smacks} と同じように発音されます。

SMACSS の分類

BEM の中心となる単語が見つかったら、それは階層化です。SMACSS の中心的な単語も見つかったら、それは分類であるはずです。1 語の違いがありますSMACSS がどのように分類するかを見てみましょう。

SMACSS の中核は分類であり、具体的にはプロジェクト スタイルを次の 5 つのカテゴリに分類します。

• Base (Basic)

• レイアウト

• モジュール

• 状態

• ##テーマ(トピック)

html {
    margin: 0;
    font-family: sans-serif;
}
a {
    color: #000;
}
button {
    color: #ababab;
    border: 1px solid #f2f2f2;
}

さらに細かく分割してみましょう レイアウト内の要素は、ナビゲーションバーなど、さらに細分化できます。

レイアウトは HTML タグに非常に近いもので、Web サイトのスケルトンとしてレイアウトを担当します。モジュールはビジネス表示とインタラクションをより担当します。

レイアウトとモジュールの関係は次のとおりです (> 包含を意味します):

Web サイトが複雑な場合、実際は次のようになります ：

> レイアウト > モジュール > レイアウト > モジュール...

したがって、レイアウト (レイアウト) ルールは、ページをいくつかの部分に分割することです。一部のモジュールは 1 つ以上存在する可能性があります。

一般的なレイアウト クラス名は .l- で始まります。

なお、公式ではメインレイアウトはIDセレクター、セカンダリレイアウトはクラスセレクターとありますが、これは絶対に許せません、全クラスを使うべきだと思います。

例を見てみましょう:

.l-header {}
.l-primarynav {}
.l-main-content {}

実際のプロジェクト開発では、レイアウトは などのコンポーネントとして直接使用されることが多いことに注意してください。

<div class="l-article">
    <article class="post">
        <header class="post-header">
            <h2 class="post-title"></h2>
            <span class="post-author"></span>
        </header>
        <section class="post-body">
            <img  class="post-image" src="..." alt="SMACSS の CSS 構造を段階的に説明します。" >
            <div class="post-content">
                <p class="post-paragraph"></p>
                <p class="post-paragraph"></p>
            </div>
        </section>
        <footer class="post-footer"></footer>
    </article>
</div>

.is-collapsed {}
.is-expanded {}
.is-active {}
.is-highlighted {}
.is-hidden {}
.is-shown {}
.is-successful {}

.button-large {
    width: 60px;
    height: 60px;
}

<button class="button-large">Like</button>