今日のキーワード📌

OOCSS (Object Oriented CSS)

SMACSS (Scalable and Modular Architecture for CSS)

BEM (Block, Element, Modifier)

1. OOCSS

1-1. コンセプト

これは、レゴのようにさまざまなモジュールを作成し、組み合わせる方法論です.

1-2. に道を教える

構造と外観の分離

同じ形態のuiで皮膚だけが異なる場合、構造と皮膚を別々に組み合わせる.
構造は、width、height、padding、marginなどのレイアウトに影響を与える属性を含む.
皮膚には、font関連属性、color、backgroundなど、レイアウトに影響を与えないが視覚に影響を与える属性が含まれている.

<button type="button" class="btn"></button>
<button type="button" class="btn btn-close"></button>

.btn {
    width: 200px;
    height: 80px;
    font-size: 30px;
}

.btn-close {
    background: black;
    color: #fff;
    border: 3px dotted #fff;
}

コンテナとコンテンツを分離

コンテンツのスタイルがコンテナに依存しないことを確認します.すなわち,コンテナのクラスをコンテンツのスタイルセレクタから除外する.

<main id="main">
    <button type="button" class="btn general">기본 버튼</button>
    <button type="button" class="btn warning">취소 버튼</button>
</main>

/* 컨테이너에 스타일이 종속되어 있는 상태 */
#main .btn {
		width: 300px;
    padding: 20px 10px;
    margin: 10px;
    font-size: 18px;
    line-height: 1.5;
}

#main .general {
    background-color: aquamarine;
    color: black;
}

#main .warning {
    background-color: azure;
    color: blue;
}

2. SMACSS

2-1. コンセプト

ロールに基づいてcssコードを分離します.

低音

レイアウト

モジュール

国

トピック

2-2. に道を教える

きそ

プロジェクトの標準スタイルを定義します.
全体的に使用されるフォントシリーズ、フォントサイズ、リセットスタイル、<img>汎用スタイルなどが含まれます.

レイアウト

ウェブサイトでは、タイトル、URL、ツイッター、サイドバーなど、大きなフレームワークを構成するモジュールに関するルールです.
ほとんどのページにはいくつも存在しないので、IDセレクタも使用します.

モジュール

レイアウト内のすべての要素を表します.
これらは重複する要素であるため、IDセレクタは使用されず、要素セレクタの使用を最小限に抑えることができる.(サブエレメントのみ)
似たようなモジュールで、シェイプが少し異なる場合は、サブクラスを作成します.(btn-small, btn-long..)

<button type="button" class="btn">그냥 버튼</button>
<button type="button" class="btn btn-small btn-long">아이디/비밀번호 찾기</button>
<button type="button" class="btn btn-small">로그인</button>

.btn {
    display: inline-block;
    width: 300px;
    padding: 20px 10px;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    color: #fff;
    background-color: brown;
}

.btn.btn-small {
    width: 80px;
    padding: 10px 0;
    font-size: 14px;
}

.btn.btn-long {
    width: 160px;
}

国

既存のスタイルを上書きまたは拡張するスタイル.
サブクラスと異なる点は、レイアウトやモジュールに適用でき、サブクラスが適用されると変更されない属性に比べて、STATEはJavaScriptとして必要に応じて追加および削除することができる点です.
クラス名の前に接頭辞isが使用されます.(is-hidden, is-active..)

<ul class="tabnav">
    <li class="is-active"><a href="">탭1</a></li>
    <li><a href="">탭2</a></li>
    <li><a href="">탭3</a></li>
    <li class="is-hidden"><a href="">탭4</a></li>
</ul>

.tabnav {
    display: flex;
    margin: 20px;
}

.tabnav li {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.tabnav li:first-child {
    border-left: 1px solid black;
}

.tabnav li a {
    display: block;
    padding: 10px 30px;
    text-decoration: none;
}

.is-active {
    background-color: blanchedalmond;
}

.is-active a {
    pointer-events: none;
    color: red;
}
.is-hidden {
    display: none;
}

テーマ

サイト感覚をユーザに伝える画像(background-image)、色(background-color,color)などを表す.

3. BEM

3-1. コンセプト

Yandex社が制定した設計方法.基本的にはOOCSというモジュールベースの方法に基づいている.
IDセレクタと要素セレクタは推奨されません.(クラスセレクタのみを使用する理由は重み付け計算を容易にするためであり、z-indexを10単位として使用する理由と同じである)

3-2. に道を教える

Block

どこでも繰り返し使用できる部品を意味します.
クラス名は目的が明確である.(Error, hidden..)
小文字を使用して複数の単語を接続する場合は、ハイフネーションボックス(ロールケーキボックス)を使用します.(cont-nav..)

.box-green{}
.error-red{}

Element

Blockを構成する要素はBlockに従属する必要があります.したがって、blockのクラス名を継承し、要素の2つの参照バーを接頭辞として使用します.(error__link, opacity-half__btn)

<section class="chapter-baseball">
    <button type="button" class="chapter-baseball__btn"></button>
</section>

elementでelementも使用されている場合、クラス名はelementと重複しません.要素間は相互依存関係と見なされないからです.

<p class="txt-grey">더 많은 정보가 필요하시면
    <button class="txt-grey__btn">
        <!-- <strong  class="txt-grey__btn__bold">여기</strong> 이렇게 네이밍 하지 않습니다. -->
        <strong class="txt-grey__bold">여기</strong>
    </button>
    를 클릭하세요!
</p>

Modifier

ブロックまたは要素の外観、状態またはモーション(要素がアクティブ、寸法、色など)を定義します.
クラス名を単独で使用するのではなく、2番目のクラス名として使用します.

<!-- <nav class="nav-global--off"></nav> 잘못된 예 -->
<nav class="nav-global nav-global--off">
    <a href="" class="nav-global__link"></a>
    <a href="" class="nav-global__link"></a>
</nav>

クラス名はblockまたはelementの名前を継承し、2つのハイフンで接続します.btn-move btn-move--size-smallelementのmodifierの場合、elementの名前が継承されるため、underbarとハイフンのブレンド形式が使用されます.

<nav class="nav-global nav-global--off">
    <a href="" class="nav-global__link nav-global__link--off"></a>
    <a href="" class="nav-global__link"></a>
    <a href="" class="nav-global__link"></a>
</nav>

知らない場所

ハイフンとダッシュの違い

ハイフンは、単語または単語の一部を接続するための句読点である.

世代はハイフンよりも長く、カンマの代わりに範囲を表すか、ペアで(-)を使用するのに一般的に使用されます.

BEMは大文字を使用することを説明していますが、実際にはハイフンを使用しています.

OOCSS

SMACSS

BEM

今日一日を整理します..。🌃

今朝は运动に行ったので、夜はのんびりしているはずです.授业が终わってから晩御饭を食べる前に、少し寝たあげく、夜明けまで寝てしまった.
やるべきことが後回しにされるのも恐ろしいが、理解しなければならないことが後回しにされるのはもっと恐ろしいようだ.
なぜなら、理解とスキップが必要なことを一つ一つ遅らせなければならないと、授業の進度に追いつくことが難しいからだ.
大事が起こる前に今週も必殺技で...
必殺技「週末片付け終わり!」