CSS Cascade Style Sheet

Mendoza Sánchez Carlos Augusto

A01225953

CSS

Introducción

CSS es el acrónimo de Cascading Style Sheets. CSS es una extensión de HTML que  permite personalizar el estilo de la página web. Con CSS se puede controlar el color del texto, estilo de las fuentes, espaciado entre párrafos, tamaño de las columnas, el fondo que utilizan las imágenes o que colores se utilizan, esquemas de trazado y resoluciones de pantalla para diferentes dispositivos así como una variedad de otros efectos (Lección 1: ¿Qué es CSS?, s.f.). En este documento abordaremos temas como Flexbox, SMACSS, BEM y Normalize.css vs Reset.css.

Contenido

CSS Flexbox es, esencialmente, un modo de diseño. Hay varios existentes modos de diseño en CSS, y han estado allí por un largo tiempo. Un ejemplo de un modo de diseño es el bloque (display: block). Diseños de bloque son una gran manera para dar estilo a documentos completos, muchos elementos son tratados por el navegador a nivel de bloque, de forma predeterminada; estos incluyen elementos comunes, tales como párrafos y divs.

Flexbox tiene como objetivo proporcionar una manera más eficiente para diseñar, adaptar y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido y / o dinámico. La idea principal detrás del diseño de Flexbox es dar al recipiente la capacidad de alterar la anchura o altura de los elementos para utilizar de forma eficiente el espacio disponible, especialmente para adaptarse a diferentes dispositivos y tamaños de pantalla (Usando las cajas flexibles CSS, 2015).

SMACSS es un CSS framework hecho por Jonathan Snook. En el sitio web SMACSS, él dice que es más como un "style guide" que un CSS framework rígido (Snook, s.f.). Se centra en cinco categorías para sus reglas:

Base se utiliza para los valores predeterminados como html, body, a, a: hover.

Layout divide una página en secciones con elementos como header, footer, y article. A menudo los desarrolladores muestran elementos de diseño anteponiendo la clase con l-.

Module es reutilizable, es un elemento modular en el diseño. SMACSS ve como módulos a la mayoría de sus elementos y por lo tanto no requiere ponerles prefijos.

State se utiliza para las posibles variaciones de cada elemento por ejemplo active, inactive, expanded, hidden. Estos tienen el prefijo is-, por ejemplo is-active, is-inactive, is-expanded, is-hidden.

Theme es similar al estado, pero define como los módulos y diseños se verán. Es más aplicable para los sitios grandes con elementos compartidos que se ven distintos en diferentes secciones de la página. Se pueden añadir variaciones del tema en una página o base por sección.

SMACSS afirma que todo depende de la preferencia del desarrollador y no es tan prescriptivo como BEM. SMACSS simplemente proporciona directrices básicas. Con la posibilidad de usar tus propias convenciones de nombres para cada una de las categorías y organizarlas en la forma que prefieras (Mejorá tu CSS con OOCSS, BEM y SMACSS, s.f.).

...