タグ

MindBEMdingに関するkzms2のブックマーク (4)

  • Post by @geckotang

    BEM Advent Calendar 2013の10日目の記事です。 ちょっとBEMツールのことは1日お休み。明日やろう明日。 BEMツールの Full stack quick startをやってた軌跡は以下です。 サンプルプロジェクトを使ってみる:BEMツール…

    Post by @geckotang
    kzms2
    kzms2 2014/08/19
    これは良い例
  • BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号

    BEMを使った命名がとても明快で、このところHTMLCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな

    BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
    kzms2
    kzms2 2014/08/19
    BEM(MindBEMding)についてとても丁寧に解説してある。色々見たけど広義の意味でわかりやすい。ステキ。
  • Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説

    Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSS命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです(筆者は使っていませんが…)。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover

    Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
    kzms2
    kzms2 2014/08/19
    BEMで用いそうな「@at-root」の説明。解説が丁寧。
  • howtohp.com

    We’re getting things ready Loading your experience… This won’t take long.

    howtohp.com
    kzms2
    kzms2 2014/08/19
    BEMをSassで使いやすくするMixin。ステキ。
  • 1