BEM - Los problemas de CSS y cómo se pueden aliviar

Presentación para Platanus en Febrero 2017

Transcript

1. BEM BLOCK ELEMENT MODIFIER AKA: LOS PROBLEMAS DE CSS Y CÓMO SE PUEDEN ALIVIAR
2. <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?
3. Secciones Home Contacto Sponsors Platanus Google
4. <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; }
5. Secciones Home Contacto Sponsors Platanus Google
6. <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>
7. Secciones Home Contacto Sponsors 1. Platanus 2. Google
8. 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 {
9. <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; }
10. Secciones Home Platanus Contacto Sponsors 1. Platanus 2. Google
11. 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
12. BEM BLOCK * ELEMENT * MODIFIER
13. UN COMPONENTE O ENTIDAD QUE TIENE SIGNIFICADO POR SI MISMO Y ES INDEPENDIENTE DEL RESTO BLOCK
14. 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
15. 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
16. .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>