恐竜に教える現代のCSS – Part 3 | POSTD
CSS方法論を使って保全性を高める CSSプリプロセッサ、CSSポストプロセッサのようなツールは、CSS開発のエクスペリエンス向上に向かって長い道のりを歩んでいます。しかし、これらのツールだけでは巨大なCSSコードベースの保守に伴う問題を解決するには足りません。対応策として、人々はCSSの記述方法に関する様々なガイドラインドキュメントを作成し始めました。一般にCSS方法論と呼ばれるものです。 特定のCSS方法論を詳しく知る前に、CSSの長期にわたる保守が困難な理由を理解することが重要です。問題の鍵はCSSが持つグローバル性、定義したスタイルは全てページのあらゆる部位にグローバルに適用される、という性質です。固有のクラス名を維持するために細かい命名規則を用意する、または 詳細度の規則 に抗い、あらゆる要素にどのスタイルを適用するかを決めるのがあなたの仕事になります。CSS方法論は、そのような
BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか） - Frasco
CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね？そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。 BEM とは何か BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。 BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element（アンダースコアが2つ）、そして最後に Modifier が続きます（ダッシュが2つ）。 画像1：BEM で命名されたコンポーネントの例 Block（ブロック） Block は、独立しており再
flocssについてまとめてみた - Qiita
最近flocssを触っているのでいいタイミングだと思い今回まとめてみました。 flocssとは cssの設計思想の一つで、OOCSS、SMACSS、BEMなどのコンセプトが取り入れられています。 cssでありがちなこと 基本原則 flocssでは次のようなレイヤーで構成されます。 foundation ブラウザのデフォルトスタイルの初期化(Reset.cssやNormalize.cssなど)や、プロジェクトにおける基本的なスタイルを定義をする場所。 layout header,footer,メインコンテンツなどのページを構成する大枠の部分を指定する場所。 基本的にはページ内で唯一の存在になるのでIDを使用するのも可能だが、IDセレクタは高い詳細度を持つため、 接頭辞(l-◯◯など)をつけた命名規則を採用するか,[id="header"]のように属性セレクタを使用することが推奨されている。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
