You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
25 January, 2013 MindBEMding – getting your head ’round BEM syntax Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher… BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yand
こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 皆様、CSS書いてますでしょうか。 今回はSMACSSやBEMをある程度ご存知の方向けに、コンポーネントをマークアップする際に役立つテクニックと題して、「SMACSSを使う際に役立つテクニック」「BEMを使う際に役立つテクニック」「さまざまなシーンで役立つテクニック」をご紹介したいと思います。 なお、SMACSSやBEMをご存知ない方は、本記事の参考文献＆記事のリンクが参考になると思いますので、はじめにこちらをご参照いただければと思います。 ※「コンポーネント」という言葉は、使われるシーンによってさまざまな意味になりえますが、本記事においては「Webページを構成するパーツ」と定義させていただきます。 SMACSSを使う際に役立つテクニック編 まずはSMACSSを使う際に役立つテクニックからご紹介します。
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語（仕様）といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く