En el mundo del desarrollo web, organizar eficientemente el CSS de un proyecto puede marcar la diferencia. Hoy te introducimos a SMACS, una metodología que propone una arquitectura modular escalable ideal para CSS. Aprenderás cómo estructurar tus proyectos usando esta técnica y qué ventajas ofrece.
¿Cómo se estructura SMACS?
La metodología SMACS, que significa "Scalable Modular Architecture Cascade in Starships", se enfoca en dividir un proyecto en carpetas temáticas. Es crucial organizarlas adecuadamente para manejar grandes proyectos de CSS sin complicaciones excesivas.
¿Qué incluye la carpeta de base?
En esta sección, se definen los estilos predeterminados que se aplican globalmente en el proyecto. Se evita el uso de clases e IDs, aplicando en su lugar selectores de tipo. Esto se debe a que los IDs y las clases incrementan la especificidad y, por ende, la complejidad de los selectores.
El layout se dedica al diseño estructural de la página, definiendo las secciones principales como el header y el footer. Aquí sí se hace uso de selectores de clase o ID para organizar la disposición de los elementos. Una convención común es utilizar prefijos como 'L-' en las clases relacionadas con el layout.
#footer{/* estilos para el footer */}.L-center{text-align: center;}
¿Qué papel juegan los módulos?
Los módulos se refieren a fragmentos de la página que son únicos, como una tarjeta de presentación. Se utilizan prefijos y componentes secundarios para definir su estilo y características.
.section{/* propiedades generales de la sección */}.section-title{font-size:1.2em;}
¿Cómo se maneja el estado en SMACS?
A través de esta metodología, se pueden definir diferentes estados para los elementos HTML, facilitando el cambio de apariencia o comportamiento según la interacción del usuario. Se utilizan clases específicas para estos casos.
.isSelected{/* estilos para elementos seleccionados */}.isVisible{/* estilos para elementos visibles */}
¿Cómo se integran los temas en SMACS?
Los temas engloban características como colores y fuentes, adaptándose a diferentes modos (por ejemplo, claro y oscuro). Es importante definir estilos de forma efectiva para facilitar el cambio entre estos temas.
SMACS proporciona un enfoque claro para la estructuración y el mantenimiento de CSS. ¡No dudes en aplicarlo en tu próximo proyecto para simplificar y agilizar tu flujo de trabajo!
Imaginemos que estamos trabajando en un sitio web de comercio electrónico y queremos aplicar la metodología SMACSS para organizar nuestras hojas de estilo CSS. Aquí tienes un ejemplo práctico:
Base:
En esta sección, definiremos los estilos básicos para elementos HTML no modificados directamente. Por ejemplo:
/* Estilos base para el texto */body{font-family: Arial, sans-serif;font-size:16px;line-height:1.6;}/* Estilos base para enlaces */a{color:#007bff;text-decoration: none;}/* Estilos base para formularios */input[type="text"],input[type="email"],textarea{width:100%;padding:8px;border:1px solid #ccc;}
Layout:
En esta sección, definiremos la estructura de alto nivel del sitio web. Por ejemplo:
/* Estilos para el encabezado */header{background-color:#333;color:#fff;padding:20px;}/* Estilos para el pie de página */footer{background-color:#333;color:#fff;padding:10px;}/* Estilos para la barra lateral */aside{float: left;width:25%;}
Módulos:
Aquí agruparemos los estilos para componentes reutilizables del sitio web. Por ejemplo:
/* Estilos para el botón */.btn{display: inline-block;padding:10px20px;background-color:#007bff;color:#fff;border: none;cursor: pointer;}/* Estilos para las tarjetas de producto */.product-card{border:1px solid #ccc;border-radius:5px;padding:10px;margin-bottom:20px;}
State:
Manejaremos los estilos para los diferentes estados de los elementos. Por ejemplo:
/* Estilos para el enlace cuando está en hover */a:hover{text-decoration: underline;}/* Estilos para el botón cuando está activo */.btn:active{background-color:#0056b3;}
Temas (Themes):
En esta sección, definiremos diferentes temas o estilos para el sitio web. Por ejemplo:
/* Estilos para el tema claro */body.theme-light{background-color:#fff;color:#333;}/* Estilos para el tema oscuro */body.theme-dark{background-color:#333;color:#fff;}
Con esta estructura organizada según SMACSS, nuestro código CSS será más legible, fácil de mantener y escalable. Podremos reutilizar los módulos y aplicar diferentes temas según sea necesario para adaptarnos a diferentes estilos y preferencias del usuario.
Me quedo con SMACSS para organizar todo el proyecto en general, pero BEM para los nombres de clases.
Atacar diferentes aspectos del proyecto desde dos ámbitos tan fuertes y para mi complementarios como lo son estas dos, es mind-blowing. 😋
No se si se vale un siguiente curso, pero donde podamos ver como se complementan algunas de estas arquitecturas entre si y aportan al proyecto desde distintas perspectivas
eScalable
Modular
Arquitectura
CSS
Arquitectura Modular Escalable en CSS 👀
En el núcleo de SMACSS (Arquitectura en CSS Escalable y Modular) está la categorización. Al clasificar las reglas CSS, comenzamos a ver patrones y podemos definir mejores prácticas en torno a cada uno de estos patrones.
Cada categoría tiene ciertas pautas que se aplican a ella. Esta separación algo sucinta nos permite hacernos preguntas durante el proceso de desarrollo. ¿Cómo vamos a codificar las cosas y por qué las vamos a codificar de esa manera?
Gran parte del propósito de categorizar cosas es codificar patrones, cosas que se repiten dentro de nuestro diseño. La repetición resulta en menos código, mantenimiento más fácil y mayor consistencia en la experiencia del usuario. Estas son todas las victorias. Las excepciones a la regla pueden ser ventajosas, pero deben justificarse.
Las reglas básicas son las predeterminadas. Son casi exclusivamente selectores de un solo elemento, pero podría incluir selectores de atributos, selectores de pseudo-clase, selectores secundarios o selectores hermanos. Esencialmente, un estilo de base dice que dondequiera que este elemento se encuentra en la página, que debe ser similar esto .
Al separar las reglas en las cinco categorías, la convención de nomenclatura es beneficiosa para comprender de inmediato a qué categoría pertenece un estilo en particular y su función dentro del alcance general de la página. En proyectos grandes, es más probable que los estilos se dividan en varios archivos. En estos casos, la convención de nomenclatura también facilita encontrar a que archivo pertenece un estilo.
El objetivo principal de esta metodología es reducir la cantidad de código y simplificar el mantenimiento. Para ello, se dividen los estilos en cinco partes:
Reglas básicas: se establecen los estilos por defectos de los elementos HTML individuales, los típicos selectores CSS de tipo. Por ejemplo, reset, html, body, button, h1, etc.
Reglas del layout: se divide la página en secciones (header, main content, footer, navigation, etc.) y se asignan los estilos relacionados con su estructura.
Reglas de módulos: elementos que pueden ser reusables, modulares e independientes del contexto. Por ejemplo: llamadas a la acción o galerías de imágenes.
Reglas de estados: se define el comportamiento del layout y sus módulos en diferentes estados: hover, active, diferentes resoluciones, etc.).
Reglas de temas: estilos que afectan al layout y módulos. Estas reglas son opcionales, y las puedes utilizar para estilos que puede que quieras reemplazar (normalmente se utiliza en sitios web que cuentan con varios temas, por ejemplo, uno oscuro y uno claro).
