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 - Los problemas de CSS y cómo se pueden ali...
Search
Guillermo Moreno
February 23, 2017
Programming
0
90
BEM - Los problemas de CSS y cómo se pueden aliviar
Presentación para Platanus en Febrero 2017
Guillermo Moreno
February 23, 2017
Tweet
Share
More Decks by Guillermo Moreno
See All by Guillermo Moreno
Desarrollo Móvil en Javascript: Cordova y React Native
gmq
0
120
Other Decks in Programming
See All in Programming
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
4.3k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
320
旅行プランAIエージェント開発の裏側
ippo012
2
930
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Become a Pro
speakerdeck
PRO
29
5.5k
Faster Mobile Websites
deanohume
309
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Statistics for Hackers
jakevdp
799
220k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Docker and Python
trallard
46
3.6k
Transcript
BEM BLOCK ELEMENT MODIFIER AKA: LOS PROBLEMAS DE CSS Y
CÓMO SE PUEDEN ALIVIAR
<div class="sidebar"> <h2>Secciones</h2> <ul> <li>Home</li> <li>Contacto</li> </ul> <h2>Sponsors</h2> <ul> <li>Platanus</li>
<li>Google</li> </ul> </div> .sidebar h2 { font-size: 1em; color: red; } .sidebar ul { list-style: none; } .sidebar ul li { font-size: .8em; } ¿PROBLEMAS EN CSS?
Secciones Home Contacto Sponsors Platanus Google
<div class="sidebar"> <h2>Secciones</h2> <ul> <li>Home</li> <li>Contacto</li> </ul> <h2 class="sponsors">Sponsors</h2> <ul
class="sponsors"> <li id="platanus">Platanus</li> <li>Google</li> </ul> </div> .sidebar h2 { font-size: 1em; color: red; } .sidebar ul { list-style: none; } .sidebar ul li { font-size: .8em; } .sidebar h2.sponsors { color: blue; } #platanus { color: yellow; text-decoration: underline; }
Secciones Home Contacto Sponsors Platanus Google
<div class="sidebar"> <h2>Secciones</h2> <ul> <li>Home</li> <li>Contacto</li> </ul> <h2 class="sponsors">Sponsors</h2> <ol
class="sponsors"> <li id="platanus">Platanus</li> <li>Google</li> </ol> </div>
Secciones Home Contacto Sponsors 1. Platanus 2. Google
ol { color: pink; } /* --- */ .sidebar h2
{ font-size: 1em; color: red; } .sidebar ul { list-style: none; } .sidebar ul li { font-size: .8em; } .sidebar h2.sponsors { color: blue; } #platanus {
<div class="sidebar"> <h2>Secciones</h2> <ul class="secciones"> <li>Home</li> <li id="platanus">Platanus</li> <li>Contacto</li> </ul>
<h2 class="sponsors">Sponsors</h2> <ol class="sponsors"> <li id="platanus">Platanus</li> <li>Google</li> </ol> </div> /* ... */ #platanus { color: yellow; text-decoration: underline; } .secciones * { text-decoration: none; }
Secciones Home Platanus Contacto Sponsors 1. Platanus 2. Google
Especi cidad. #platanus es mucho más especi co que .secciones
Fragilidad. el cambio de ul a ol rompió código que no debería haber roto Poco modular. El estilo de ol de otra parte de la página cambió el estilo de nuestra PROBLEMAS
BEM BLOCK * ELEMENT * MODIFIER
UN COMPONENTE O ENTIDAD QUE TIENE SIGNIFICADO POR SI MISMO
Y ES INDEPENDIENTE DEL RESTO BLOCK
PARTES DE UN BLOQUE QUE NO TIENEN SIGNIFICADO FUERA DE
ÉL. NOMBRE DE LA SECCIÓN + DOS GUIONES BAJOS. .sidebar__titulo .sidebar-section__link .btn__icon ELEMENT
IDENTIFICA CAMBIOS DE APARIENCIA O COMPORTAMIENTO EN UN ELEMENTO O
BLOQUE. NOMBRE DEL BLOQUE O ELEMENTO + DOS GUIONES. .sidebar__titulo--primary .sidebar-section__link--platanus MODIFIER
.sidebar__title { font-size: 1em; color: red; } .sidebar__list { list-style:
none; } .sidebar__item { font-size: .8em; } .sidebar__item--underline { text-decoration: underline; } .sidebar__title--sponsors { color: blue; } .sidebar__item--platanus { color: yellow; <div class="sidebar"> <h2 class="sidebar__title">Secciones</ <ul class="sidebar__list"> <li class="sidebar__item">Home</li> <li class="sidebar__item sidebar__item--platanus <li class="sidebar__item">Contacto</ </ul> <h2 class="sidebar__title--sponsors"> <ol> <li class=" sidebar__item sidebar__item--platanus sidebar__item--underline ">Platanus</li> <li class="sidebar__item">Google</li </ol> </div>