Metodología VIM para Nombres de Clases CSS

Para nombrar las clases de los contenedores y contenidos, vamos a usar la metodología BEM. Pero para tenerlo más claro, hagamos un repaso de lo que es BEM.

¿Qué es BEM?

BEM (Block, Element, Modifier o Bloque, Elemento, Modificador) es una metodología ágil de desarrollo basada en componentes. Divide toda la interfaz en bloques que se pueden reutilizar y escalar.

De esta manera, podemos separar una sección en múltiples secciones pequeñas y darles un nombre en este orden y función.

Consejos para el nombre de las clases

• Como no va a haber otra etiqueta img dentro del header, podemos no colocarle una clase y llamarla siendo específicos.
• La etiqueta div es muy común, por lo que una clase es necesario. La podemos llamar así: header–title-container en el que header es el contenedor principal y title-container el contenido.
• Como la etiqueta h1 es única en toda la página, tampoco es necesario colocarle una clase.
• Los botones también son comunes, así que aplicamos la clase: header–button.

No olvides:
Establecer la ruta de la imagen en tu etiqueta img.

<img src="./assets/img/logo.svg" alt="logo_batatabit">

Enlazar tu archivo .css a tu index.html antes de empezar a aplicar estilos.

<link rel="stylesheet" href="./styles.css">

Cómo aplicar estilos de las clases

Recuerda que estamos diseñando para móviles primero, por lo que nuestra vista debe centrarse en eso. Cuando compruebes los resultados en el navegador, asegúrate de tener activada la opción de Dimensión: responsive en las DevTools.

Header

• Aplicamos un position: relative.
• Usamos display: flex y flex-direction: colum para poder acomodarlo por medio de columnas.
• Ajustamos el ancho al 100% de la pantalla y el alto a 334px.
• Limitamos el ancho a 320px como mínimo.
• Centramos el texto con text-align: center.

header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 324px;
    height: 334px;
    text-align: center;
}

Img

• Definimos las dimensiones del logo con un ancho de 150px y un alto de 24px.
• Ajustamos el margen superior en 60px.
• Como estamos usando display: flex en el contenedor padre, centramos el logo con align-self: center.

header img {
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

Div

• Llamamos al contenedor directamente por el nombre de su clase.
• Ajustamos el ancho del contenedor para que siempre se mantenga el 90% entre 288px y 900px. Es decir, no va a crecer más de 900px ni se encogerá menos de 288px.
• Ajustamos la altura a 218px.
• Añadimos un margen superior de 40px.
• Centramos el texto con text-align: center.
• Centramos el contenedor con align-self: center.

.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40;
    text-align: center;
    align-self: center;
}

Deberíamos poder observar nuestro progreso de esta manera:

¡Y listo! Por ahora hemos aplicado varios estilos. Aún nos falta algunas etiquetas y agregar un degradado de fondo para terminar el header. Así que, ¡Vamos!

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).