Scaling Down The BEM Methodology For Small Projects — Smashing Magazine
To make the right choices for your project, you need to start with a general approach, or methodology. You probably already know of BEM, one of those methodologies developed by a big company, but Maxim Shirshin decided to try BEM on a smaller scale. He wanted the same benefits that Yandex gets from BEM: code sharing, a live style guide, scalability, faster development. He is now convinced that BEM
HTMLのメンテナンス性とBEM - アインシュタインの電話番号
BEMに関するこのあたりの考え方や期待感は、2014年でもう少し突っ込んで取り組みたい所存。Twitterへのツイートをブログ記事にする省エネ投稿。 似たような話として、以前書いたBEMに関する記事ではこういう表現をした。 例えばサーバーサイドやJavaScriptのエンジニアが仮にCSSの設計を把握していなくても、とりあえずBEMの命名規則を覚えてもらえればブロック単位で維持すべきだと理解してもらえるので、それだけでデザインを壊してしまうリスクを結構回避できる。また命名した本人であっても、半年経ってから見たらBEMの名前はわかりやすく見えそう。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 他のコードに比べると、HTMLはより多くの人が編集する場所なので、HTML上に割り振られるID名やクラス名はそれ単体で「何のための名前か」「どういう構造か」「変更
BEMを使ったSassファイルの整理
このウェブサイトのSassファイル群はずっとフラットなファイル構成でやっていた。主にSassが相対パスの修正を行うことができないことが理由だったけど、最近はポストプロセスすればどうにでも出来そうな感じなので、あまり気にせず整理することにした。単純にカテゴリ分けするだけでも良いのだけど、BEMを応用してやってみている。 CSSのクラス名及び変数やプレースホルダー・クラスにはまだ手を付けず、まずはBEMツリーとルールセットの配置の対応を作るところから始めた。 ファイル名でブロック ディレクトリでブロックのネスト セレクターの1段階のネストでエレメント &を使ったセレクターのネストでモディファイア 以上のようなルール付けの元にやってる(未完成)。 ブロック scss/ ├ _header.scss └ header/ ├ _logo.scss └ _site-navigation.scss ファ
BEMまとめ奴 - dskd
公開日2013-12-26タグAdvent CalendarBEMBEM Advent Calendar 2013 最終日のエントリです。 BEM Advent Calendar 2013 に参加していただいた皆さんお疲れ様でした。そしてありがとうございました。 リニューアルした Adventar で最初にカレンダーを登録した時にボックスのヘッダーカラーがアレな黄土色だった時はどうしてくれようかと思いましたし、開始４日前で 18 枠も開いていたりとか、TL では BEM への闇が広がっていたりとかもしていましたが、なんとか 25 日埋めることができました。カレンダーに参加していない方にも BEM の記事を書いていただいたりと、せまい範囲ながら BEM に触れる機会を提供できたのかなと思えています。 最終日 25 日目の本記事では、BEM Advent Calendar 2013 に寄せてい
［翻訳］MCSS (Multilayer CSS)
これは「BEM Advent Calendar 2013」19日目の記事です。 タイトルに書いてある通り、Robert HaritonovによるMCSSのドキュメントを日本語訳しました。 ほぼ同内容のものをプルリクエストしてあるので、そのうち本家でも公開されると思います。 公式ページでも公開されました。 英語版があったので基本的には英語版から日本語訳したのですが、英語版で意味がよく分からない部分があって、そういうのはオリジナルのロシア語版を機械翻訳で英語にして、それを元にしたりしました。ので、英語版からの完全翻訳ではありません。 本当はロシア語できる人がオリジナルのドキュメント群を翻訳したほうがよいと思います。 MCSSは主にCSSの管理方法についての考え方で、読んでいて自分のやり方に一番向いているのではないかと思いました。 そこで、ちゃんと理解しておきたいということもあって翻訳してみまし
BEM 化されたブログをのぞかせてもらう - CHROMA
@o_ti さんのブログの、 http://dskd.jp/archives/36.html をみてみた。 以下のようになっていた: .contents .header h1.header__logo .article article.article__item header.article-header h1.article-header__item footer.article-footer time.article-footer__pubtime dl.article-footer__categories dt.article-footer__categories-title dd.article-footer__categories-item p h2 ul ... nav.neighbor .neighbor-header h2.neighbor-header__item a.n
BEM とは - CHROMA
メンテナンスブルな CSS の設計の話で OOCSS や SMACSS ってのがあるけど、そのうちの一つで BEM というのがある。 http://bem.info/ BEM-Methodology Definitionsの日本語訳 を見てみると XJST とか BEMHTML とかいうテンプレートエンジンに関する内容（よくわかってない）も書かれてるんだけど、日本ではこの中の BEM を CSS 用に使いやすくした MindBEMding （日本語訳はこっち ）の命名規則が良いってことで流行ってるみたい。 また、今 BEM っていったら大体は MindBEMding のことを指してるみたい。 BEM-Methodology Definitions の内容全部をこれから理解しようとすると自分が知らない知識が多くてちょっとアレなので.. 、MindBEMding の内容を先に抑えておきたいと思
実践 めんどうくさくない BEM - ダーシマ・ヱンヂニヤリング
この記事は BEM Advent Calendar 2013 の１２日めの記事です。 BEM は優れた方法論だと思うが、大変めんどうくさいことを強いてくることがある。この記事ではそんなめんどうくさい BEM を、少しでもめんどうくさくない BEM に変えられるかどうかを思索するものである。なお、めんどうくさくなくする過程で「それは既に BEM ではな」くなっている面もあると思うが、そこは承知の上なので念頭に置かれたし。 CSS セレクターにタグを書くのは本当にダメなのか 例えば以下のコードがある。 <section class="item-list"> <h1>アイテム一覧</h1> <ul> <li> ... </li> <li> ... </li> <li> ... </li> </ul> </section> 上記のコードはシンプルなので、各要素にスタイルを当てるとしたらこのような
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....
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
