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
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
為你自己學 Python - 冷知識篇
eddie
1
350
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
620
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
Design Foundational Data Engineering Observability
sucitw
3
200
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
670
print("Hello, World")
eddie
2
530
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Navigating Team Friction
lara
189
15k
Into the Great Unknown - MozCon
thekraken
40
2k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Producing Creativity
orderedlist
PRO
347
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
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>