タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

namingとbemに関するzoncoenのブックマーク (2)

  • SMACSSによるCSSの設計 | 前編 ベースとレイアウト

    はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース:要素そのもののデフォルトスタイル レイアウト:ページをエリアごとに分割 モジュール:再利用可能なパーツ 状態(ステート):レイアウトやモジュールの特定の状態を示す テーマ:サイトのルック&フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS(日

    SMACSSによるCSSの設計 | 前編 ベースとレイアウト
  • CSSのクラス名を決めるときに抑えておきたいBEMって概念 - yutaponのブログ

    普段フロントの開発ばかりやってるので、たまにはCSSのネタを。 CSSのidとかclassとかの命名って難しいです。 適当につけてると破綻してくる。 そこでBEMを覚えておくと命名に規則性を持たせることができます。 でも結論からいうと、完全にBEMで作るのは現実的ではないかなと感じてます。 なので、こういう概念があるから参考にして使うってのがいいと思います。 BEMとは? BEMって何?はこちらの記事がとてもわかりやすかったので参考にしてみてください。 BEM スタートガイド ― これからのWEB フロントエンド開発に必要な方法論に触れてみる | zerokara web この記事ではBEMっていうと Block, Element, Modifire を意識した 命名規則のことを指すことにします。 たとえば、このブログのタイトル部分のHTMLを例にすると、 現状こうなっているHTMLが <

    CSSのクラス名を決めるときに抑えておきたいBEMって概念 - yutaponのブログ
  • 1