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
46
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
31
Build in Private
matheusrich
0
61
Start TDDing in 5 minutes
matheusrich
0
90
3 Steps Every Test Should Take
matheusrich
0
66
Taming God Objects: easy, incremental and secure
matheusrich
1
80
Stimulus 2.0-alpha - What's new?
matheusrich
0
48
De Repente 7
matheusrich
0
12
Other Decks in Programming
See All in Programming
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
350
『品質』という言葉が嫌いな理由
korimu
0
160
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
47
17k
Domain-Driven Transformation
hschwentner
2
1.9k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
320
もう僕は OpenAPI を書きたくない
sgash708
5
1.7k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
150
Software Architecture
hschwentner
6
2.1k
Formの複雑さに立ち向かう
bmthd
1
850
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
790
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Building Adaptive Systems
keathley
40
2.4k
How to Ace a Technical Interview
jacobian
276
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
How GitHub (no longer) Works
holman
314
140k
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/