タグ

smacssとweb制作に関するoreskboysのブックマーク (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設計法 | 第1回 OOCSSの基本

    知っておきたいCSS設計法 第1回 OOCSSの基 HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か? 今回はその考え方の基をまずおさえましょう。 はじめに このシリーズでは、OOCSS(オーオーシーエスエス)、BEM(ベム)、SMACSS(スマックス)という3つのCSS設計概念の概要を解説します。HTMLCSSをどのように書いていけばよいかは、過去に「CSSの設計」シリーズにまとめました。今回のシリーズは、その2014年度版とでもいうような内容になっています。 というのも、CSSの設計を書いた頃と比較すると、さまざまな設計概念が広く知られるようになったものと思います。今回紹介するBEMやSMACSSが、その代表です。また、CSSのプリプロセッサSassのバージョンアップでは、BEMを意識したような機能なども追

    知っておきたいCSS設計法 | 第1回 OOCSSの基本
  • 1