Battling BEM – 5 common problems and how to avoid them
*** PLEASE NOTE: This article has been extended as of 01/06/2016 with an additional 5 problems. The latest version (which includes all the below points also), can be found here: https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/ *** Whether you’ve just discovered BEM or are an old hand (in Web terms anyway!) and have been using it for the
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
Working with BEM at Scale — Advice From Top Developers — SitePoint
At the start of the year, I put together an article on BEM and SMACSS that focused on the confusion of choosing a CSS methodology. I contacted a range of different developers and got their words of advice, their success stories and their horror stories in the hope that others could learn from their experiences with these popular CSS methodologies. The article was quite well received, but there was
今年のネーミングルール #CSS設計
CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。 接頭辞としてプロジェクト名や世代などを付与
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
This document discusses strategies for making CSS more scalable and maintainable. It recommends automating CSS with preprocessors, using clear and descriptive class names, avoiding descendant selectors when possible, and minimizing unnecessary nesting and complexity. Pseudoselectors should only be used when other options aren't available. Overall, the document emphasizes writing CSS according to f
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
Grouping related classes in your markup – CSS Wizardry
21 May, 2014 Grouping related classes in your markup Written by Harry Roberts on CSS Wizardry. Table of Contents How it works Scanning your code Featured case study: NHS Vim Validity Errors Extra bytes Teams JavaScript To use, or not to use? N.B. 2016-02-23 I no longer advise this technique—it proved far too problematic on teams where people we unfamiliar with the syntax. If you do wish to clearly
An Introduction to the BEM Methodology | Envato Tuts+
Let’s face it, we all want to make our code easier to read. Doing so helps us work more quickly and efficiently, and when others work with us we can maintain clarity and coherent semantics. These days there seem to be so many standards and terms in the CSS world: OOCSS, SMACSS, BEM and more! These are all approaches for improving CSS structure, and today we are going to cover BEM. BEM stands for B
Flexbox for forms - German for black
You’re about to read articles on the subject of building for the web by Ben Schwarz. Say you wanted to have two form elements side by side, except one of the elements fills the “empty” space. The text input fills the available horizontal space, and the button sits on the right comfortably; Traditionally, you’d use floats, or display: inline-block, but in both situations you’d have to manually set
PSDファイルのレイヤー名でBEM - dskd
公開日2013-12-26タグAdvent CalendarBEMBEM Advent Calendar 2013 24 日目のエントリです。 BEM はセレクタの命名規則だけでなく、ファイルシステムの管理にも導入できますよという bem.info のページを見ていて、MindBEMding な名前付けは何もウェブだけのものに留まらなくていいんじゃないかと思うようになりました。そこでタイトルにあるように、PSD ファイルのレイヤー名で BEM です。 何回か前の記事で紹介したこちらの画像の、 PSD ファイルをこんな感じにしてみました。 冗長になるので Block と Element の継承は省略して Modifier を書いています。レイヤー名で BEM と言いましたが、このような単純なイラストでもレイヤー単位では HTML 化できないところが出てくるので、グループにしてそこで BEM
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 に寄せてい
BEMのロゴが個性的で面白い - dskd
公開日2013-12-25タグAdvent CalendarBEMBEM Advent Calendar 2013 23 日目のエントリです。初日から日をまたいで公開しているので今さら日付通りに書けなくてもなんの罪悪感もありません。本当にすみませんでした。 突然ですが、BEM にロゴがあることをみなさんご存知でしたか？ bem.infoのトップページにロゴが載っているのですが、何種類かのロゴがリロードするたびに変わります。今回はそのロゴをざざっとご紹介しようと思います。 なんなんですかね、このセンス。面白いです。 僕が 100 回くらいリロードして出てきたロゴはこれが全部でした。もしかしたらまだ他にもあるかもしれません。その時は@o_tiまで教えていただければと思います。 もしかして公式ロゴって存在してない？ 上記でご覧頂いたように、BEM のロゴってだいぶ自由です。なので、僕も BEM
BEM, Multiple Modifiers, and Experimenting with Attribute Selectors | Viget
The FEDs here at Viget love using BEM syntax for our CSS. It enables us to adhere to an expressive naming convention which helps in hand-offs, code reviews, and just coding faster. However, the more abstract a design becomes, the more you need multiple modifiers for a single design element. You can apply each specific modifier, but that can quickly become unwieldy. Note: If you’re not familiar wit
BootstrapをBEMに考えてみる - Blog.おにぎりたまごうぃんなー
この記事はBEM Advent Calendar 2013の22日目の記事です。 こちらの記事を読んで、初めてBEMを知りました。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません！ Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。 とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。 よくあるあるヘッダーでBEMる Components - Navbar / Bootstrap bootstrapのコードはこう <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navba
モディファイアの付け方
21日も遅くになりましたが、BEM Advent Calendar 2013の20日目の記事です。 モディファイアをどうやって付けるのがいいかなーとか悩んでるので書いておきます。 悩んでるだけなので、特に「これにしろ！！」とかはありません。 画像が左に来て、右にテキストが来るようなブロックを作った際に、画像の左右を反転させるモディファイアを作るとします。 方法1.マルチクラス関係無いですが、マルチクラスする際の区切りの半角スペースを２つにすると気持ち見やすいです。 1-1.元の名前にハイフン２つ付けて、その後に意味を付けます（この時はreverse）他のブロック、エレメントで使用させないように元の名前にプラスする。 JavaScriptで操作する時は、元の名前を書かないといけないので、ちょっと面倒かもしれない。 1-2.元の名前にハイフンを２つ付けて、key-value的な感じにするkey
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a photography portfolio website - Viewbook
GitHub - dfilatov/bem-react: BEM-flavoured React
GitHub - bensmithett/style: An opinionated starting point for scalable, maintainable CSS architecture.
14islands
「Qiitaのサイトに勝手にBEMを取り入れてみた」の解説 - Qiita
