本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情 この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです
はじめに みなさまこんにちは！おはようございます！ マークアップエンジニアのうさこでございます！ またお前か・・・という声が聞こえてきそうですね・・・？花粉なんて爆発してしまえばいいと思っている今日この頃でございます。 さて・・・今回はコーディングをする際にきっと頭を抱える方も多いのでは・・・ クラス名の命名規則についてです！！ クラス名の命名・・・地味で単純な作業ですが、悩み始めると止まらず時間のロスに繋がっているのは紛れも無い事実なのです。。 目次 考え方 基本形 Prefix Block Element Modifier 注意点 さいごに 参考URL 考え方 目標はやはりこの4つとなります！ 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい なぜ SMACSS と BEM なのか BEM の Block や Element の考え方は素敵すぎるのですが、クラス名がものすごく冗
この記事はBEM Advent Calendar 2013の22日目の記事です。 こちらの記事を読んで、初めてBEMを知りました。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません！ Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。 とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。 よくあるあるヘッダーでBEMる Components - Navbar / Bootstrap bootstrapのコードはこう <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navba
こんにちは！basara669です。 勉強会で使った「イマドキCSS設計」の資料の解説の第2回目で、BEMについて書きました。 他の記事はこちら 「イマドキCSS設計」の解説 – 前編：css設計の必要性 BEMとは BEMとはロシアのYandexという会社が作った設計のための指針というか、方法論です。 Main / BEM フロントエンド全般の内容になっていて、CSS以外のこともかいてありますが、今回はCSSだけにフォーカスします。 BEMの基本概念 BEMとは、Block、Element、Modifierの頭文字をとったもの BEMの基本概念としては下記のような基本概念のもと作られています。 メンテナンス性の向上 共同作業 コードの再利用性 先ほど説明したとおり、ただ、CSSを書いていってしまうと非常にメンテナンス性が悪いです。結局追記を繰り返し破綻をします。 また、コーディング規約な
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！ 先日、LessでBEMってみたらかなりさくさくコーディングできた！という話という記事で、Sassを全力でDisったような気がしますが、 いい加減にsass3.3を導入しようとついに一念発起して、sass3.3.0.rc.3を突っ込んでみました。 Compassも1.0.0の開発版にアップデートし、いざ、SassでBEMるぞ！！！と、かの有名なBEM用Mix-in @mixin e($name) { @at-root #{&}__#{$name} { @content; } } @mixin m($name) { @at-root #{&}--#{$name} { @content; } } を突っ込んでみたんですが、このMix-inでコンパイルエラー。これはrc.2にしてみたらうまくい
BEMという命名規則とSass 3.3の新しい記法 であるように @at-rootという ディレクティブを使いたかったので、 Sassのバージョンを上げてみたけれど バージョン指定で引っかかったのでメモ。 まずはSassのRC版とCompassの最新版を指定した。 GemはBundlerで管理しているのでGemfileに以下を記述。 source "https://rubygems.org" gem 'sass', '3.3.0.rc.1' gem 'compass', '0.12.2' これだとどうもCompassが動かず『Incompatibility with Sass 3.3 Alpha』を参考に Sassのバージョンを変更。 source "https://rubygems.org" gem 'sass', '3.3.0.alpha.149' gem 'compass', '0.
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
