BEM Naming Cheat Sheet by 9elements
When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don't always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components. If you still have no idea what BEM means, we have added some helpful links below. For
BEMSkel - A lightweight responsive CSS framework using BEM and SASS
Introduction BEMSkel, or short for BEM Skeleton, is a lightweight CSS framework using BEM and SASS. It's designed to provide a solid foundation for building a component-based web applications and user interfaces. It is written using the BEM (Block, Element, Modifier) naming convention to provide a consistent and strict naming convention which allows you to divide your user interface into independe
BEMIT: Taking the BEM Naming Convention a Step Further – CSS Wizardry
5 August, 2015 BEMIT: Taking the BEM Naming Convention a Step Further Written by Harry Roberts on CSS Wizardry. Table of Contents Namespaces Responsive Suffixes Healthchecks Final Word Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different nam
実践 めんどうくさくない 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 101 | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which we loved, and just about everybody around here had thoughts and opinions about BEM, so we figured we’d all get together on it and do it t
eCSStractor - Packages - Package Control
Sublime Text plugin for extracting class names from HTML and generate CSS stylesheet for following work. Default extracting: With BEM nesting: With BEM nesting and class names as comments: Usage Open any document contain HTML and do one of the following: Press Cmd+Shift+X on Mac OS X or Ctrl+Shift+X on Windows/Linux. Go to Tools → eCSStractor → Run Right click and select eCSStractor → Run Then you
CCSS
CCSS [Component CSS] is an architecture which simplifies the CSS authoring experience for large web applications. Why? Large web applications generally have a lot of CSS files and many developers working on them simultaneously. With the advent of so many frameworks, guidelines, tools and methodologies (OOCSS, SMACSS, BEM, ...), developers need a CSS architecture that is maintainable, manageable, a
Sassの変数名での-と_
SassでBEMを利用して変数名を付けようとして、今までハイフンのみでどうにかしていた変数名を書き換えていた時に気づいたんだけど、Sassの変数名ではハイフン(-)とアンダースコア(_)が同一視される。バグだと思ってIssue立てたら、3.0.0でSCSS記法を追加した時に入れた仕様だという返事だった。 -と_が同一視されるということはどういうことかというと、以下の変数はすべて同じとみなされるということで、すべての変数の値は最後に定義した変数の値になる。 $foo--bar: "foo--bar"; $foo-_bar: "foo-_bar"; $foo_-bar: "foo_-bar"; $foo__bar: "foo__bar"; .test-foo--bar { content: $foo--bar; } .test-foo-_bar { content: $foo-_bar; }
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
bera - npm
Les méthodologies BEM & ABEM en CSS
Atomic Design system with ABEM naming convention — Part 1
File structure / Methodology / BEM
BEMおじさんは考えた vol.1
http://bem.github.io/bem-method/html/all.en.html
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md
inuit.css – a powerful, scalable, Sass-based, BEM, OOCSS framework.
BEM