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: 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;
}
- 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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?