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
85
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
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.1k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
140
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
470
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
820
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
止められない医療アプリ、そっと Swift 6 へ
medley
1
160
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
160
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
110
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How STYLIGHT went responsive
nonsquared
100
5.8k
Automating Front-end Workflow
addyosmani
1371
200k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Agile that works and the tools we love
rasmusluckow
331
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Building an army of robots
kneath
306
46k
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/