[CSS]CSSメソッド

CSSメソッド:メンテナンスが容易なCSSの作成方法

OOCSS

CSSをモジュール化して冗長性を最小限に抑える
構造と外観(形状)の分離

/* 구조 */
.btn { … }

/* 스킨 */
.accept { … }
.cancel { … }

構造属性:width、height、padding、marginなど.
外観属性:color、font、background、box-shadowなど.
コンテナ

/* .main .btn (x) */
.main { … }
.btn { … }

SMACSS

Scalable and Modular Architecture for CSS
CSSの拡張モジュール化構造
役割によってCSSコードを分類する
派生CSSコレクタの無効化
IDコレクタの無効化
!重要な使用を禁止

Base

デフォルトスタイル(Reset、Default、Variables、Mixins)
基本スタイルは!使わなくてもいい

Layout

レイアウトに関するスタイル
クラス名に接頭辞l-を指定
主要部品idコレクタ(header、footerなど)
サブエレメントclassコレクタ(nav、formなど)

#content { … }
.l-fixed #content { … }

Module

モジュラースタイル
スタイルの再使用に使用する要素
Block, Element, Module
IDと要素の再利用を禁止します(elementが必要な場合はサブセレクタ(>)を使用します).

State

要素の状態変化を表すスタイル(ex、툴팁、아코디언)
主にJavaScriptによって操作されるクラス
クラス名に接頭辞is-を指定!important利用可能

is-hidden { … }
is-error { … }
is-hover { … }

Theme

サイト全体のlookとfeelを制御
ユーザーが選択できるようにスタイルを再宣言
クラス名に接頭辞theme-を指定

BEM

Block Element Modifier

OOP(オブジェクト向けプログラミング)類似

クラス名のみ使用(id x使用)

利点:直感的なクラス名で、ファイルの構築が容易です.
欠点:クラス名が比較的長い.

Blcok

エレメントコンテナ
(ex, logo , login , form , menu , search , from , content , footer )

.header { … }
.menu { … }
.search { … }

ブロックは重なり合う

Element

Blcokで特定の機能を実行する構成部品
2つのUnderscore(Lodash)記号を接続し、blockの後に作成します.

.header__logo { … }
.header__menu { … }
.header__search { … }
.header__login { … }

名前が長い場合は-を使用します.

.block-name__element-name

要素が重なり合わないblock__element1__element2はエラーの構成

Modifiers

blockまたはelementのプロパティを使用して外観またはステータスを変更する
2つのHyphen(Dash)シンボルを接続

.block--modifier {…}
.block__element--modifier {…}

Booleanタイプ
Modifierが有効で値に関係なく使用される場合のみ:disabled,focused修飾語がある場合はtrueと仮定します

.form__button--disabled {…}

key-valueタイプ

.form__button--color-red {…}
.form__button--theme-ocean {…}

Utility-First CSS / Functional CSS

例:Tailwind CSS、Tachyons、Atomic CSS

インタラクティブでコンテキストに依存しないCSS

の作成

個々の属性と値を表すCSSを事前に定義しておくと、クラス名を直接使用して追跡できます

HTMLで定義済みクラスを組み合わせる

<button class="w-1/2 rounded-md border border-gray-300">Button</button>

inline styleとの違い

擬似クラスコレクタの有効化

mediaquery利用可能