Arquitectura CSS, SOLID, DRY e Inmutability - Platzi

Recursos

Transcripción

Aportes 17

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Jeffer Steven Nuñez Aragon

Necesitamos hacer que el CSS sea:

Limpio 🧹: Sin código innecesario y bien organizado.
Escalable 📈: Listo para crecer y adaptarse a proyectos más grandes.
Mantenible 🔧: Fácil de mantener y modificar sin problemas.
.

Para lograrlo, podemos aplicar principios de programación orientada a objetos, como:

.

SOLID 🤝: Un conjunto de cinco principios para un código de calidad y fácil de mantener.
DRY 🌵: No repitas código, ¡mejor eficiencia y menos errores!
IMMUTABILITY ⛔️: Promueve la inmutabilidad para datos más seguros.
.

ARQUITECTURA

Cómo se divide el código en archivos y carpetas.

Y cómo trabajamos con nuestros selectores (Nombramientos de clases)

Benjamin Allen Ramirez Horna

Porfin nuevo curso de css con Estefany!

N40 M10

Perfecto, este curso se ve realmente bien, justo quería repasar solid. Por cierto, el curso es accesible desde el navegador, pero un no está agregado a una ruta.

Pablo Gomez

Nooooooo puede ser. ¿Platzi no tiene más profesores aparte de Estefani?

Brandon Lee Aguero Fernandez

Haber yo creo que se BEM, veremos si es cierto o no al finalizar este curso. que deseo hacer un refactor a un proyecto que he aplicado BEM, pero no de la mejor manera jejeje

Code Conqueror7

Esforzandome de enamorarme de CSS

Brandon Argel Verdeja Dominguez

# ¿Qué es una arquitectura CSS? Las arquitecturas CSS aportan razonamiento a la creación de CSS, es una colección de directrices y mejores prácticas para ayudar a los desarrolladores a escribir código predecible, mantenible, escalable y más reutilizable. ## Objetivos de una arquitectura CSS * **Predecibles:** Las reglas actuarán como usted espera que lo hagan. Cuando añades o cambias una regla, no debería tener un efecto no deseado en otras secciones de tu sitio. Esto no es tan importante en sitios pequeños que no cambian mucho, pero sí en sitios grandes. * **Reutilizable:** Reglas abstractas y lo suficientemente desacopladas como para que puedas crear fácilmente nuevos componentes a partir de partes existentes sin recodificar patrones y problemas que ya has resuelto. * **Escalable:** Puede ser manejado por un solo individuo o un gran equipo de ingeniería con facilidad. * **Mantenible:** Cuando se implementan, modifican o reorganizan nuevos componentes y características en su página, no debería ser necesario refactorizar el CSS existente. * **Limpio:** Sin código innecesario y bien organizado. ## Podemos tomar los principios de POO para lograr los puntos anteriores: * **SOLID:** Es un acrónimo que agrupa 5 principios clave para el desarrollo eficiente, replicable, mantenible y escalable de software. * **DRY (Don't repeat yourself):** No repitas código. * **Inmutabilidad:** El estado no puede ser modificado una vez creado.

Pablo Alejandro Figueroa

Las `arquitecturas` CSS

son enfoques y metodologías
para organizar y estructurar el código CSS en proyectos web
de manera más escalable, mantenible y fácil de entender.

Estas arquitecturas proporcionan pautas y reglas para la organización de estilos CSS, lo que ayuda a mejorar la eficiencia del desarrollo y la colaboración en equipos.

Algunas son:
BEM: Block Element Modifier /blɒk ˈɛlɪmənt ˈmɒdɪfaɪə/
SMACSS: Scalable and Modular Architecture for CSS /ˈskeɪləbᵊl ən ˈmɒʤələr ˈɑːkɪtɛkʧə fə siː-ɛs-ɛs/
OOCSS: Object-Oriented CSS /ˈɒbʤɪkt ˈɔːriɛntɪd siː-ɛs-ɛs/
ITCSS: Inverted Triangle CSS /ɪnˈvɜːtɪd ˈtraɪæŋɡᵊl siː-ɛs-ɛs/

Yahir Eduado Bravo Tafur

Amo sus dibujos UwU

Yahir Eduado Bravo Tafur

DIOSSSSS, me encanta ese estilo a mano de notas UWU, muchas gracias por el curso.

Raúl Adolfo Sánchez Rodríguez

Les comparto un tutorial que fue el proyecto final del curso anterior de Estefany (teffcode): ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcnBrb3JiNmcxMGh1a3Yyb2Iyb3RwNzFtZHdreWZuNGVjbmd0cjFmcCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/acZZL8l3DzrWjMfHp3/giphy.gif) ⭐Tutorial: <https://www.youtube.com/watch?v=QAoaVlBgBUo&t=336s> ⭐Demo: <https://raulsr92.github.io/reproductor-musica-proyecto/> ⭐Repo: <https://github.com/raulsr92/reproductor-musica-proyecto>

Hans González

Los cursos de Estefany son fantásticos !

Rafael Soriano Ramírez

Entiendo el tema de hacer refactor, pero ¿por qué no retomarlo cómo el curso de hace como 4 años que tu hiciste el diseño y Oscar Barajas lo pasaba a react?, en la industria se tienen que evitar estos vicios

Angel Bernechea

el problema de CSS es que parece tan facil, y esto es una arma de doble filo… me senti tan identificado con esta frase…

Mateo Roldán Escobar

Arquitectura

Se refiere a la manera en que organizamos las carpetas y estructuramos el código para lograr que sea limpio, mantenible y escalable. Esto mejora la colaboración y la gestión del código en proyectos de mayor envergadura.

Raymondi Alejandro Ramos Vásquez

Uy así que para este curso era 🤯

FRANK ALEXIS TUBERQUIA ROJAS

Excelente, siempre tener complementos para fortalecer conocimiento de los lenguajes par fron-end, y mas con la excelenticima profe stefany