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
止められない医療アプリ、そっと Swift 6 へ
medley
1
170
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
730
私はどうやって技術力を上げたのか
yusukebe
43
18k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
690
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
Leading Effective Engineering Teams in the AI Era
addyosmani
3
350
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
310
株式会社 Sun terras カンパニーデック
sunterras
0
290
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
840
CSC305 Lecture 03
javiergs
PRO
0
240
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Visualization
eitanlees
149
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Fireside Chat
paigeccino
40
3.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Balancing Empowerment & Direction
lara
4
690
Side Projects
sachag
455
43k
Scaling GitHub
holman
463
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
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/