Añade especificidad consistente en todo el
proyecto. Esto significa que utilizar una metodología
nos va a ayudar que al modificar una parte del código
no se generen conflictos y se rompa todo nuestro
trabajo.
Aumentar la independencia de nuestro código,
generalmente lo que al comenzar tratamos de hacer es
replicar nuestro código HTML en el CSS y con las
metodologías, lo que logramos es evitar escribir más
código del que necesitamos
Permite la reutilización de código y evitando
que se repita
Con cualquier elemento autónomo que podemos
reutilizar en cualquier parte del proyecto, por
ejemplo: menú, logo, galería, tarjeta, etc.
Es muy común colocar el logo en el <nav> y en el
<footer>, generalmente colocamos clases distintas,
pero lo correcto según la metodología BEM sería
darle el estilo una vez y usar la clase del logo
que ya tiene propiedad cuando lo necesitemos para
otra parte del sitio específico de nuestro
proyecto. Esto se aplica a cualquier sitio web que
queremos que sea reutilizable.
Para reutilizar tenemos que insertar la clase del
nombre del bloque que pertenece dos guiones bajos
y después el nombre que le queremos dar. Se usa
guiones bajos porque representan los espacios, por
ejemplo “card card__blue” o “card card--blue”.
Agregamos la clase que ya utilizamos más otra clase
para darle el estilo transparente
En CSS borramos todas las propiedades que se repite
Vemos que en el navegador conseguimos el mismo
resultado, lo que sucede acá es que utilizamos la
cascada para suscribir las propiedades que necesitamos
El tamaño se expresa en la unidad de medida sin hacer
referencia a otro elemento y no se usa mucho en CSS,
solamente si tenemos que hacer una impresión física. La
única medida que se utiliza es pixel
CM (no se usan)
MM (no se usan)
IN (96PX o 2.54 CM) (no se usan)
PX (1/96 IN)
PT (1/72 DE 1 IN) (no se usan)
PC (12 PT) (no se usan)
Se usa donde el tamaño necesita ser el mismo, sin
importar el tipo de dispositivo o el tamaño de la
pantalla.
Ancho y alto de un contenedor donde necesitamos el
mismo tamaño.
Bordes si necesitas una línea solida de 3px, ese
tamaño que tiene que ser el mismo sin importar el
tipo de dispositivo.
También se puede usar para tamaño de letras,
cuando el tamaño necesita ser el mismo en
cualquier dispositivo.
En nuestro HTML tenemos la estructura de un menú
Observen la altura (height) del menú en la
etiqueta <nav> para que tenga el mismo tamaño en
todos los dispositivos y la separación de las
letras en 1px
El tamaño es relativo a otro elemento
(ELEMENTO RAIZ, CONTENEDOR PRINCIPAL, ANCHO Y ALTO DEL
VIEWPORT, ETC)
% = Porcentaje es relativo al elemento padre
em = relativo al tamaño de la letra del elemento
rem = relativo al tamaño de la letra del elemento
raíz
fr = 1fracción del espacio disponible en CSS grid
ex = relativo al alto de “X” (no se usan)
ch = relativo al ancho de “O” (no se usan)
vw = 1% del ancho de la pantalla
vh = 1% del alto de la pantalla
Se basa en el tamaño del contenedor padre
Mantiene la proporción en distintos dispositivos
porque es relativo
Se usa para maquetación (layouts) responsive (ancho,
alto, márgenes)
Insertamos etiqueta <hgroup> con etiquetas <h>
como hijas dentro de <header> para armar la parte
de bienvenida de la página.
Con <header> le brindamos una medida absoluta y al
<hgroup> le proveemos de un porcentaje del 15% de
la etiqueta padre para que se adapte a cualquier
dispositivo
Es relativo al tamaño de la letra actual o del
elemento padre
Se usa para Font-size
Márgenes
Padding
En el HTML tenemos una etiqueta <div> y una etiqueta
<h1>
En este caso la etiqueta <h1> se mide por el tamaño
de la etiqueta padre que es la etiqueta <div>,
colocando en la última un font-size de 20px las
letras y el padding se ajustan a la medida de los em
que pusimos en el <h1>
Es relativo al font-size del elemento raíz (HTML)
En el HTML tenemos una etiqueta <div> y una etiqueta
<h1>
En el CSS la etiqueta <h1> con el font-size 2rem
obtiene el valor de 20px
Tamaño definido relativo al ancho o alto de la
pantalla del navegador
Tenemos una etiqueta <div> que vamos a hacer que
ocupe toda la parte visible de la página
Considerando que widht en el ancho y height es el
alto hacemos que con los valores 100vw y 100vh
ocupen todo la parte visible de la pantalla
