Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BEM - A simple CSS methodology
Search
Matheus Richard
March 19, 2020
Programming
0
49
BEM - A simple CSS methodology
A short introduction to the BEM methodology for writing CSS.
Matheus Richard
March 19, 2020
Tweet
Share
More Decks by Matheus Richard
See All by Matheus Richard
The Fast Lane: Asynchronous Rails
matheusrich
0
38
Build in Private
matheusrich
0
67
Start TDDing in 5 minutes
matheusrich
0
100
3 Steps Every Test Should Take
matheusrich
0
82
Taming God Objects: easy, incremental and secure
matheusrich
1
100
Stimulus 2.0-alpha - What's new?
matheusrich
0
50
De Repente 7
matheusrich
0
14
Other Decks in Programming
See All in Programming
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
130
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
320
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
850
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
Featured
See All Featured
Designing for Performance
lara
610
69k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Building Adaptive Systems
keathley
43
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Facilitating Awesome Meetings
lara
55
6.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Transcript
BEM Easy. Modular. Flexible.
What comes to your mind when you think of CSS?
None
And CSS in a big project?
None
Why?
Why do we have a low bar in terms of
CSS code quality?
Web History • Everything was designed to share documents •
CSS had a different intention • Web apps became a thing
Several problems
Inline CSS Code duplication Browser incompatibility
None
Goals • Reuse code • Organization • Standardization • Modularization
• Simplicity
BEM Block__Element--Modifier
Block Standalone entity that is meaningful on its own.
Block Naming Block names may consist of Latin letters, digits,
and dashes
Element A part of a block that has no standalone
meaning and is semantically tied to its block
Element An element CSS class is formed as block name
plus two underscores plus element name
None
Element An element CSS class is formed as block name
plus two underscores plus element name
Element An element CSS class is formed as block name
plus two underscores plus element name
Modifier A flag on a block or element. Use them
to change appearance or behavior.
Modifier Naming A modifier CSS class is formed as block’s
or element’s name plus two dashes
Modifier HTML Remember that modifiers only carry modifications!
Rule of thumb Use meaningful names
None
Benefits
Modularity • Block styles are independent. No cascading problems. •
You also get the ability to transfer blocks from your finished projects to new ones.
Reusability • Composing independent blocks in different ways, and reusing
them intelligently, reduces the amount of CSS code that you will have to maintain. • You can build a library of blocks.
Structure • BEM methodology gives your CSS code a solid
structure that remains simple and easy to understand.
Easy • Only three core elements • No 3rd-party library
needed • You can start applying it now
That’s it Feel free to ask any question
That was just the basics... • https://en.bem.info/methodology/quick -start/ • http://getbem.com/introduction/