タグ

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

  • BEMで命名する時に役に立ちそうな単語

    BEM Advent Calendar 2013の10日目の記事です。 ちょっとBEMツールのことは1日お休み。明日やろう明日。 BEMツールの Full stack quick startをやってた軌跡は以下です。 サンプルプロジェクトを使ってみる:BEMツールに触れてみる(1)ブロックライブラリを使ってみる:BEMツールに触れてみる(2)ブロックを作ってみる:BEMツールに触れてみる(3)ということで、今回はBEMで命名する時に役立ちそうな単語を書き出して見ようと思います。 役立ちそうな単語一覧あくまで名付けるときの参考になったらいいな、程度で書いてます。 ※…..で頭合わせしてるのはinuit.cssがやってたからっていうそれだけ。 色々組み合わせて使いそうなものhero とかお洒落っぽいので使う。大きさ順序は hero > main > sub くらいのイメージ。 hero....

    BEMで命名する時に役に立ちそうな単語
    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 - howtohp リソースおよび情報

    This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it

    howtohp.com - howtohp リソースおよび情報
    kzms2
    kzms2 2014/08/19
    BEMをSassで使いやすくするMixin。ステキ。
  • 1