No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

SMACSS

14/19
Recursos

Aportes 5

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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:

  1. 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;
}
  1. 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%;
}
  1. Módulos:
    Aquí agruparemos los estilos para componentes reutilizables del sitio web. Por ejemplo:
/* Estilos para el botón */
.btn {
  display: inline-block;
  padding: 10px 20px;
  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;
}
  1. 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;
}
  1. 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.

Arquitectura SMACSS

S:SCALABLEM:MODULARA:ARQUITECTUREC:CASCADINGS:STYLES:SHEET

Categorias

Base

  • Estilos predeterminados
  • Selecectores de elementos o pseudo-clases
    • No Clases
    • No ID‚Äôs
  • Tama√Īos, Colores

Layout (Dise√Īo o estructura de p√°gina)

  • Estilos para las secciones principales
    • Header, Footer (Se usan con id o clase)

Module (Módulos)

  • Fragmentos √ļnicos que puede contener:
    • Prefijo
    • Elemento
    • Secundario

State (Estado)

  • Representa situaciones din√°micas
    • .is-selected

Theme (Tema)

  • Colores Primarios (dark mode)
  • Formas, bordes, sombras y demas.
  • Se repiten en todo el sitio

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

Creo que esta arquitectura esta hecha para SASS

eScalable
Modular
Arquitectura
CSS
 
Arquitectura Modular Escalable en CSS ūüĎÄ