知っておきたいCSS設計法 | 第1回 OOCSSの基本
知っておきたいCSS設計法 第1回 OOCSSの基本 HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か？ 今回はその考え方の基本をまずおさえましょう。 はじめに このシリーズでは、OOCSS（オーオーシーエスエス）、BEM（ベム）、SMACSS（スマックス）という3つのCSS設計概念の概要を解説します。HTMLとCSSをどのように書いていけばよいかは、過去に「CSSの設計」シリーズにまとめました。今回のシリーズは、その2014年度版とでもいうような内容になっています。 というのも、CSSの設計を書いた頃と比較すると、さまざまな設計概念が広く知られるようになったものと思います。今回紹介するBEMやSMACSSが、その代表です。また、CSSのプリプロセッサSassのバージョンアップでは、BEMを意識したような機能なども追
CSSのルールについて考える！ ー OOCSS、BEM、SMACSSって何？ | panmimi design
模写をする習慣がついてから、公開されているいろいろなスタイルシートを見るようになったのですが、その中で気になる表記を見つけました。 .mt5{ margin-top: 5px; } .mt10{ margin-top:10px; } .text-left { text-align: left; } .text-right { text-align: right; } ↑こういう表記です。「common.css」とか「base.css」と名付けられたファイルの中に記述されていることが多く、見かけるたびにこれって業界ではよく使われているのものなの？と思いました。 この表記の意味はわかります。あらかじめわかりやすいクラス名でスタイルシートを用意しておいて、HTMLにクラス名を記述しレイアウトを組んでいく…というものですよね。私も「.clearfix」と名付けたクラス用意して同じ手法を使っています
oocss&smacss&bemでのcss改善まとめ - Qiita
参考 知っておきたいHTMLテンプレート設計法 - OOCSSの基本 ルール 場所に依存した指定方法をしない レゴのように考える スキン 装飾など。smacssでいうモジュールの部分。 構造 骨格。 参考 SMACSSによるCSSの設計 ベースとレイアウト つくってるプロジェクトでは、oocssだけで十分で、smacssはガチで取り入れなくてもいい気がした。理由↓ レイアウト>>使う機会が少ない。gridなどを使う機会があまりない。あるとしても、oocssでいう骨格を作るのと同等（な気がしている）。 テーマルール>>使わなそう モジュール>>oocssのスキン的な考えで十分 状態>>これは普段からやっている気がする。 ベース 要素そのもののデフォルトスタイル レイアウト ページをエリアごとに分割 モジュール 再利用可能なパーツ 状態（ステート） レイアウトやモジュールの特定の状態を示す テ
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
