Como Escalar CSS
Sin Morir en el Intento
¿Qué buscamos en nuestro CSS?
MANTENIBLE
ESCALABLE
DRY
Mantenible
BEM + Namespacing
¿Qué es BEM?
BEM es lo más feo que hay
Jorge Epuñan y varias personas más
block__element--modifier
.o-card {
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
background-color: white;
&--flat {
box-shadow: none;
background-color: lightgrey;
}
}
.o-card__image {
margin-bottom: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 150px;
}
.o-card__title {
margin-bottom: 15px;
font-size: 20px;
font-weight: bold;
}
.o-card__text {
margin-bottom: 15px;
font-size: 16px;
}
<div class="o-card">
<figure class="o-card__image">
<img src="https://media.giphy.com/media/wmKa73ET9IoMM/giphy.gif">
</figure>
<h3 class="o-card__title">Título de la Carta</h3>
<p class="o-card__text">Texto de la carta</p>
</div>
<div class="o-card o-card--flat">
<figure class="o-card__image">
<img src="https://media.giphy.com/media/wmKa73ET9IoMM/giphy.gif">
</figure>
<h3 class="o-card__title">Título de la Carta</h3>
<p class="o-card__text">Texto de la carta</p>
</div>
Namespacing
o- para objetos
js- para clases que se usarán en el Javascript
u- para clases utilitarias
Escalable
Atomic Design + Sass
¿Qué es Atomic Design?
¿Qué es Sass?
Arquitectura CSS
- scss/
|- lib/
|- helpers/
|- variables/
|- base/
|- layouts/
|- objects/
|- components/
|- styles.scss
|- _utilities.scss
styles.scss
[...]
// Variables
@import 'variables/colors';
@import 'variables/typography';
@import 'variables/breakpoints';
[...]
// Objects
@import 'objects/buttons';
@import 'objects/input';
@import 'objects/typography';
[...]
// Shame
@import 'shame';
DRY
Ya expliqué como modularizar el CSS así que no me repetiré
