はんのうそしせっけい

CDD(Component Driven Development)

部品単位でUIコンポーネントを作成する開発

構造化CSSの作成方法

なぜ構造化CSSが必要ですか?

プロジェクトの規模や複雑さはますます大きくなっています
チームメンバー数を増やす
モバイルデバイスまたはタブレット(複数ディスプレイ)

CSSフロントプロセッサ

SASS(Syntactically Awesome Style Sheets)

$base-color: rgba(255, 255, 255, 0.5)
.alert {
  border: 1px solid $border-dark
}
.button {
  color: $border-dark
}  

属性を変数として宣言し、必要に応じて宣言された変数を使用します.
繰り返しコードは、宣言を繰り返し使用できます.
内部でどのような操作を行うか分かりませんが、階層を作成するだけで、コンパイルされたCSSの容量は非常に大きいです.

BEM(Block, Element, Modifier)

.header__navigation--navi-text {
  color: red;
}  

Block:ブロック要素全体を囲む(前、.header)
要素:ブロックに含まれる一部(--前の部分、navigation)
Modifier:ブロックまたは要素のプロパティ(ブロックまたはエンティティの外観、状態を可変にする部分)
クラス名セレクタが冗長になり、寸法が不要になり、繰り返し使用するたびにすべてのUIコンポーネントを明示的に拡張する必要があります.
SASSとBEMの共通の問題は,パッケージの概念がないため,開発者は唯一のクラス名の選択に頼るしかないということである.

CSSフロントプロセッサの問題をどのように解決しますか?

コード

を繰り返し使用

コードの簡潔性(保守可能)

コードの拡張性

コードの予測性(クラス名で予測)

Styled-Component

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

Automatic critical CSS

スクリーンでレンダリングされた構成部品を追跡し、その構成部品のスタイルを自動的に挿入します.最小限のコードでスクリーンをレンダリング

No class name bugs

独自のクラス名を独自に作成することで、重複やエラーによるエラーを低減

Easier deletion of CSS

既存の状況では、削除された構成部品に対応するスタイル属性を検索するためにCSSファイルでclassNameを検索する必要がありますが、スタイル属性は構成部品に関連付けられているため、構成部品を削除すると同時にスタイル属性が削除されます.

Simple dynamic styling

Propsまたはグローバルプロパティに基づいてコンポーネントにスタイルプロパティを割り当てることで、手動で管理する必要がなくなり、シンプルで直感的になります.

Painless maintenance

スタイルを構成部品に継承する属性を検索して他のCSSファイルを検索する必要がないため、コードが大きくなってもメンテナンスは難しくありません

Automatic vendor prefixing

既存のCSSを使用して各構成部品のスタイル属性を定義する