metodologia css smacss que es?

SMACSS (Scalable and Modular Architecture for CSS) es una metodología que busca proporcionar una estructura organizada y flexible para escribir CSS, haciendo que los proyectos sean escalables y modulares. Fue creada por Jonathan Snook y se basa en la idea de que un código CSS bien organizado facilita el mantenimiento y la colaboración en proyectos a gran escala.

¿Por qué se usa un guion alto en SMACSS?

En SMACSS, se usa el guion bajo (guion alto) en las clases de estilo para separar palabras y mejorar la legibilidad. Este es uno de los principios clave en SMACSS para nombrar las clases.

Razones por las que se utiliza el guion bajo:

Legibilidad: Usar guiones para separar palabras hace que las clases sean fáciles de leer y entender.
Evitar la confusión con la convención de BEM: Aunque SMACSS y BEM tienen similitudes, SMACSS usa un enfoque ligeramente diferente en la nomenclatura. El guion alto se emplea para mantener las clases lo más claras y simples posible sin necesidad de usar dobles guiones como en BEM.

Regla General de SMACSS: Categorías de CSS

Una de las principales características de SMACSS es su enfoque de organizar el código CSS en diferentes categorías, lo que permite separar los estilos en bloques lógicos. Las categorías de SMACSS son:

Base:
- Aquí van los estilos globales o reglas generales que se aplican a todo el proyecto.
- Se incluyen cosas como reset de CSS, tipografías globales, y reglas generales que afectan a todo el documento.
Ejemplo:
```
css
/* Base */
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
```
Layout:
- Estilos relacionados con la estructura general de la página. Esto incluye las reglas para las grandes secciones de la página, como el encabezado, el pie de página, la barra lateral, etc.
Ejemplo:
```
css
/* Layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  background-color: #333;
  color: white;
  padding: 20px;
}
```

Module:

Los módulos son componentes reutilizables que pueden ser independientes y reutilizados en diferentes partes de la página. Son los elementos más pequeños, como botones, formularios, tarjetas, etc.

Ejemplo:

css
/* Module */
.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

.card {
  border: 1px solid #ccc;
  padding: 15px;
  background-color: #f9f9f9;
}

State:
- Los estados se refieren a las clases que modifican el estado visual de un módulo o layout. Esto incluye cosas como cuando un botón está deshabilitado, cuando un menú está activo, cuando un formulario tiene un error, etc.
- Los estados pueden ser representados por clases como .is-hidden, .is-active, .is-disabled, etc.
Ejemplo:
```
css
/* State */
.is-hidden {
  display: none;
}

.is-active {
  background-color: green;
}

.is-disabled {
  background-color: gray;
  cursor: not-allowed;
}
```
Theme:
- Esta categoría incluye los estilos relacionados con el tema visual del sitio, como los colores, las fuentes y los estilos visuales que se aplican de manera global para definir la estética del proyecto.
Ejemplo:
```
css
/* Theme */
.theme-dark {
  background-color: #333;
  color: white;
}

.theme-light {
  background-color: #fff;
  color: black;
}
```

Reglas y Principios de SMACSS

Evitar la especificidad alta:
- SMACSS recomienda evitar los selectores demasiado específicos. En lugar de hacer algo como #header .menu ul li a, se debe usar algo más simple como .menu-item y luego aplicar reglas generales para los estados.
Clases de utilidad:
- A menudo se usan clases de utilidad para aplicar reglas CSS que no dependen del contexto del módulo o del estado. Estas clases son pequeñas y específicas, como .text-center, .m-10 para margen, .p-20 para padding, etc.
Ejemplo:
```
css
/* Utility Classes */
.text-center {
  text-align: center;
}

.m-10 {
  margin: 10px;
}

.p-20 {
  padding: 20px;
}
```
Modularidad:
- Los estilos deben ser modulares. Esto significa que deben ser fácilmente reutilizables en diferentes contextos sin depender de reglas globales.
Previsibilidad:
- SMACSS promueve la escritura de CSS de manera que sea fácil de entender para cualquier desarrollador que trabaje en el proyecto. Esto se logra mediante la creación de clases con nombres intuitivos y el uso de una organización lógica.
Flexibilidad:
- SMACSS es una metodología flexible que no requiere que sigas un conjunto de reglas estrictas. En lugar de eso, se enfoca en proporcionar una estructura y principios que te ayuden a tomar decisiones sobre cómo organizar tu CSS en función del tamaño y la complejidad del proyecto.

Ejemplo Completo con SMACSS

Imaginemos que estamos trabajando en una página web con un header, un formulario de login, y un botón. Aquí hay un ejemplo de cómo organizaríamos nuestro CSS siguiendo SMACSS:

css
/* Base */
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Layout */
.header {
  background-color: #333;
  color: white;
  padding: 20px;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Module */
.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

.input-field {
  padding: 10px;
  border: 1px solid #ccc;
}

/* State */
.is-active {
  background-color: green;
}

.is-disabled {
  background-color: gray;
  cursor: not-allowed;
}

/* Theme */
.theme-dark {
  background-color: #333;
  color: white;
}

.theme-light {
  background-color: #fff;
  color: black;
}

Resumen

SMACSS es una metodología que organiza el CSS en categorías claras y reutilizables, lo que permite que los estilos sean escalables y fáciles de mantener. Usar un guion bajo (o guion medio) para separar las palabras en las clases facilita la legibilidad y mejora la estructura del código. Al seguir las reglas de modularidad, especificidad baja, y organización lógica, SMACSS ayuda a los desarrolladores a crear proyectos CSS bien estructurados y fáciles de gestionar a medida que crecen.

Buscar este blog

maxidato