¿Qué son las arquitecturas CSS? ¿Para qué sirven?

¿Qué son y para qué nos sirven las arquitecturas CSS?

Sirven para mantener un orden y una coherencia durante todo el proyecto. Tiene los siguientes objetivos:

• Predecibles: escribir reglas claras.
• Reutilizable: no escribir código redundante.
• Mantenible: que sea fácil de leer y adaptable a los estándares.
• Escalable: que pueda crecer fácilmente sin afectar el rendimiento.

.
Estos objetivos se deben ver reflejadas en buenas practicas que debe conocer todo el equipo involucrado en el proyecto como:

• Establecer reglas
• Explicar la estructura base
• Establecer estándares de codificación
• Evitar largas hojas de estilo
• Documentación

Arquitectura CSS: cómo debería ser tu código CSS

Código predecible
Dentro de una arquitectura predecible las nuevas reglas de estilo que son añadidas reaccionan de forma previsible: no sufren contaminación alguna por parte de otras reglas (tampoco hacia otros elementos) ni existen dependencias incongruentes entre las reglas de los diferentes elementos del plano.
Código reutilizable
La abstracción (aislar un elemento de su contexto o del resto de los elementos que lo acompañan) es un paradigma de programación con una útil aplicación en nuestro entorno. Mantener la abstracción en la arquitectura de CSS nos permitirá diseñar reglas modelo, aptas para infinidad de elementos con características comunes
Código mantenible
Esta característica está referida a la facilidad con la que puede realizarse una modificación y/o mantenimiento de un código. Algunas de las prácticas que garantizarán este aspecto son:

• Ordena, comenta y categoriza tu código de forma lógica y jerárquica
• Crea código legible
• Crea código intuitivo
• Declara clases descriptivas

Código escalable
Salvaguardar la escalabilidad de tu CSS supondrá que éste podrá ser manipulado de una forma sencilla al realizar las tareas necesarias para abordar el crecimiento de la plataforma. En estos casos la curva de aprendizaje que permitirá comprender y adquirir las capacidades necesarias para alterar tu código no debería ser excesivamente grande

Las arquitecturas de CSS nos ayudan a:

• Predecir la estructura de un proyecto
• Poder reutilizar código ya desarrollado anteriormente
• Mantener código en el tiempo
• Escalar el código a medida de que este vayan creciendo
  Para ello debemos de emplear buenas prácticas:
• Usar lineamentos
• Crear y emplear una documentación (para que personas nuevas puedan adherirse al proyecto de una manera satisfactoria)
• Emplear estándares
• Crear componentes

CSS debe ser:

Predecible, intuitivo, legible y descriptivo.

• Reutilizable.

• Mantenible.

• Escalable.

Al trabajar con CSS tener en cuenta como cubrir esos campos.

Las arquitecturas de CSS nos ayudan a ser predecibles y que nuestro código sea más reutilizable, mantenible y escalable.

Los objetivos de una buen arquitectura de CSS son básicamente que sea:
• Predecible: sus reglas hacen lo que se espera.
Añadir o actualizar una regla no tiene
repercusiones inesperadas.
• Reutilizable: las reglas son abstractas y están
desacopladas. Así se podrán crear nuevos
componentes de forma más rápida y
sencilla.
• Mantenible: es la capacidad de realizar cambios
en las CSS sin necesidad de tener
que refactorizar el código existente.
• Escalable: significa que a medida que las CSS
aumentan de tamaño, siguen siendo
fáciles de mantener. También significa
que la arquitectura CSS no requiere
de una alta curva de aprendizaje.

A estos principios hay que añadir es necesario añadir buenas prácticas como:
• Desarrolla tus CSS de forma modular.
• Organiza tu CSS de una forma lógica.
• Los layouts se deben manejar de forma independiente de los componentes.
• Los estilos de los componentes deberían definir solo su aspecto visual.
• Evitar nombres de clases basadas en el contexto.
• Nombra tus clases usando “namespaces”.
• Nombra tus clases con una estructura lógica.
• Mantener la especificidad de selectores al mínimo.
Estos enfoques y principios son fundamentales sobre todo en desarrollos que implican a un gran número de desarrolladores trabajando sobre un mismo sitio web. Una buena arquitectura de CSS tendrá como resultado una mayor eficiencia en el desarrollo y por ende una mejor experiencia como desarrollador.

Si quieren ser más productivos y más mantenible tu código y escalable usen un preprocsador de CSS, yo utilizo Sass y es una maravilla, Platzi tiene un curso de preprocesadores pero está un poco desactualizado pero es muy bueno.

Arquitectura CSS: cómo debería ser tu código CSS

• Código predecible:
  Dentro de una arquitectura predecible las nuevas reglas de estilo que son añadidas reaccionan de forma previsible: no sufren contaminación alguna por parte de otras reglas (tampoco hacia otros elementos) ni existen dependencias incongruentes entre las reglas de los diferentes elementos del plano. En definitiva, no hay sorpresas.
• Código reutilizable:
  La abstracción (aislar un elemento de su contexto o del resto de los elementos que lo acompañan) es un paradigma de programación con una útil aplicación en nuestro entorno. Mantener la abstracción en la arquitectura de CSS nos permitirá diseñar reglas modelo, aptas para infinidad de elementos con características comunes.
• Código mantenible:
  Esta característica está referida a la facilidad con la que puede realizarse una modificación y/o mantenimiento de un código.
• Código escalable:
  Salvaguardar la escalabilidad de tu CSS supondrá que éste podrá ser manipulado de una forma sencilla al realizar las tareas necesarias para abordar el crecimiento de la plataforma. En estos casos la curva de aprendizaje que permitirá comprender y adquirir las capacidades necesarias para alterar tu código no debería ser excesivamente grande. Un proyecto que disponga de una planificación de su arquitectura a corto/medio plazo puede ayudarnos en buena medida a entender este aspecto, ya que conocer de antemano qué necesidades tendremos que cubrir en base al crecimiento que sabemos que tendrá la plataforma nos orientará a seguir estas indicaciones por pura intuición.

Me hizo pensar en el código de mi card un poco mal organizado XD

Me encanta este curso, es simplemente fantástico, las personas que también lo vean son muy afortunadas de tener una profesora que explica de una manera increíble

Todos los comentarios explican para que sirven las arquitecturas de CSS. Yo te vengo a decir que es (Por si también te gusta saber el que y no solo para qué)

Esta es mi conclusión tomada desde este párrafo más lo visto en la clase:

La arquitectura de software define la estructura y comportamiento de los elementos relevantes, balanceando las necesidades de sus interesados, aplica decisiones de forma racional, definiendo estilos de arquitectura aplicables a múltiples aplicaciones con necesidades similares.

Otro más

La arquitectura es el arte y la técnica de proyectar, diseñar y construir.

Entonces, las arquitecturas CSS son “reglas” o “métodos” para estandarizar tu código de una manera que beneficie el diseño y construcción del código mismo.

Con que fin seguimos estas “reglas”?

• Predecibles: escribir reglas claras.
• Reutilizable: no escribir código redundante.
• Mantenible: que sea fácil de leer y adaptable a los estándares.
• Escalable: que pueda crecer fácilmente sin afectar el rendimiento.

Un video corto, pero deja en claro la importancia de las buenas prácticas en el desarrollo 😎

BEM

Una forma de reutilizar código es con la definición de variables en css.
Esto se puede hacer definiendo las variables, dentro de root, en la hoja de estilos.
Por ejemplo en este caso tengo 2 variables con colores, los cuales serian dos tipos de verdes.

:root {
    --color-green: #1d752b;
    --color-green-opacity: #004d14bf;
}

y luego llamamos estas variables en las clases que lo necesiten:

.bg-green{
    background: var(--color-green);
}

Si el dia de mañana debo cambiar ese color, no me toca ir a cada parte, sino que solo lo cambio en la variable del root y lo aplica en todas las partes donde se llame dicha variable.

Mis apuntes en Notion

Clase 20 - ¿Qué son las arquitecturas CSS? ¿Para qué sirven?

¿Qué son las arquitecturas CSS?

• Son una serie de reglas y patrones que usamos a la hora de escribir código CSS para que este sea fácil de leer, mantener y escalar.

¿Cuáles son los objetivos de las arquitecturas de CSS?

• Ser predecible: El código debe ser lo más simple posible.
• Reutilizable: El código debe ser lo menos redundante posible, esto con el fin de no tener problemas de especificidad.
• Mantenible: El código debe permitir cambios fácilmente sin que se dañen cosas.
• Escalable: El código debe ser capaz de crecer fácilmente.

¿Cuáles son las buenas prácticas de las arquitecturas CSS?

• Lineamientos y estándares: Acá se definen normas en el grupo de trabajo sobre cómo estará escrito el código
• Documentación: Se establece una breve explicación del código y de lineamientos, esto con el fin de que las personas nuevas en el proyecto se familiaricen rápido con esté.
• Componentes: Se establece de manera componentizada cada uno de lo los elementos de la página web, es decir manejar todo por partes y luego juntarlo.

No muchos documentan sus procesos y eso es lo malo 😅😪

OBJETIVOS

• Predecible: lectura facil del codigo (comentarios, indentificadores de variables eficientes, indentacion, etc)
• Reutilizable: evitar en lo posible repetir codigo (funciones, componentes, clases, etc)
• Mantenible: facilidad de realizar cambios menores sin romper el codigo gracias a la combinacion de las anteriores
• Escalable: posibilidad de agregar nuevas funcionalidades o caracteristicas sin la necesidad de realizar grandes cambios a la base del proyecto

BUENAS PRACTICAS

• Comunicación en equipo
• Elaborar documentación del proyecto, lineamientos y estándares como referencia para miembros existentes como nuevos

imaginate que compras un lego y no vienen separados en bolsas tampoco tiene manual, obviamente todos sabemos que los manuales son inutiles haha, pero cuando no entiendes para que es una pieza es mejor tenerlo que no, algo que me molestaria tambien es que las piezas no se sigan en orden de color o tamano, por eso que es importante tener buenas practicas y tenerlas siempre presente aun antes de escribir el codigo

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

Yo siempre uso BEM, y trato de tener varios archivos divididos por secciones, al final termino con muchos archivos con código muy chiquito; es muy fácil de debuguear, pero es requiere más documentación para no perderse con los file systems

Beneficios de las Arquitecturas CSS:

• Mejora la legibilidad: El código se organiza de forma lógica y comprensible, facilitando su lectura y comprensión por parte de otros desarrolladores.
• Facilita la mantenibilidad: Se vuelve más sencillo encontrar, modificar y corregir errores en el código.
• Promueve la escalabilidad: Permite que el código se adapte y crezca fácilmente a medida que el proyecto se expande.
• Aumenta la reusabilidad: Se pueden crear componentes y estilos reutilizables en diferentes partes del proyecto.

Arquitecturas CSS: Definición y Propósito

Las arquitecturas CSS son un conjunto de métodos y buenas prácticas para organizar y estructurar el código CSS de un proyecto web. Su objetivo principal es mejorar la legibilidad, mantenibilidad, escalabilidad y reusabilidad del código, facilitando el trabajo en equipo y la evolución del proyecto a largo plazo.

Las arquitecturas CSS consisten en manejar el código CSS con una serie de reglas y patrones para facilitar su lectura, mantenibilidad y escabilidad.

Los objetivos de las arquitecturas de CSS son:

• Ser predecible: el código debe ser lo menos complejo posible.
• Reutilizable: el código debe ser lo menos redundante, para evitar problemas con la especificidad.
• Mantenible: el código debe ser lo más fácil de manejar para añadir o quitar estilos.
• Escalable: el código debe ser capaz de crecer.

Yo utilizo Jekyll. Te organiza el código de una forma espectacular

Mis apuntes en Notion💚

Tuve varios errores en el exámen pero NO ME RINDOO"

Eta bueno el curso

😃

Los objetivos de las arquitecturas de CSS son: 
.
Ser predecible: Que en el cogido se apliquen las mismas metodologías, enfoques y reglas que le permitan escribir código que resulte consistente, coherente y familiar a lo largo del desarrollo tanto para desarrolladores que han estado desde el inicio y aquellos que se han unido posteriormente. 
.
Reutilizable: Evitar código redundante, es decir, código que ha sido desarrollado con el mismo propósito más de una vez y en su lugar tener código reutilizable, es decir que puede aprovecharse en varios componentes o para varias oportunidades de uso. Esto también evita que nos encontremos conflictos entre los estilos por la específidad. 
.
Mantenible: el código debe ser fácilmente adaptable modificación para añadir, reemplazar o quitar estilos sin que se vea afectado su rendimiento o funcionamiento. 
.
Escalable: el código debe ser capaz de recibir nuevas características o estilos que lo lleven a desarrollarse en versiones más complejas sin comprometer su funcionamiento.

• En CSS, una arquitectura se refiere a un enfoque o conjunto de reglas y convenciones para estructurar y organizar el código CSS de un proyecto web. Las arquitecturas CSS ayudan a mantener un código más limpio, modular, escalable y fácil de mantener a medida que el proyecto crece en tamaño y complejidad.

Estas son algunas arquitecturas CSS populares:

1.-Arquitectura CSS en cascada (Cascade CSS):

• La arquitectura CSS en cascada se basa en la naturaleza cascada de CSS, donde las reglas se aplican de arriba a abajo en el código.

• Este enfoque implica colocar los estilos relacionados en el mismo archivo CSS y seguir un orden lógico de la estructura del documento HTML.

• La ventaja de esta arquitectura es que es simple y fácil de entender, pero puede volverse difícil de mantener a medida que el proyecto crece en tamaño.

2.-Arquitectura BEM (Block-Element-Modifier):

• BEM es una arquitectura CSS que se centra en la modularidad y la reutilización de estilos.

• Divide los componentes en bloques (blocks), elementos (elements) y modificadores (modifiers).

• Cada bloque es un componente independiente y se le asigna una clase única.

• Los elementos son partes del bloque y se seleccionan utilizando la sintaxis .block__element.

• Los modificadores son variaciones de un bloque o elemento y se seleccionan utilizando la sintaxis .block–modifier o .block__element–modifier.

• Esta arquitectura ayuda a crear estilos más reutilizables y a mantener una estructura clara y consistente.

3.-Arquitectura ITCSS (Inverted Triangle CSS):

• ITCSS organiza los estilos en una jerarquía en forma de triángulo invertido.

• Se divide en diferentes capas que van desde estilos globales hasta estilos específicos de componentes.

• Las capas incluyen configuración, herramientas, genéricos, elementos, objetos, componentes y trumps.

• Esta arquitectura promueve la especificidad creciente y ayuda a evitar el acoplamiento entre estilos.

• Estas arquitecturas CSS, y otras, proporcionan pautas y estructuras para organizar y gestionar el código CSS en proyectos más grandes y complejos. Al seguir una arquitectura CSS, se mejora la legibilidad, el mantenimiento y la escalabilidad del código, lo que facilita el trabajo en equipo y la evolución del proyecto con el tiempo.

buenas practicas de las arquitecturas de css para un proyecto son: - Lineamientos y estandares: establecer reglas - Documentacion: entender el proyecto - Componentes

las arquitecturas css sirven para que el codigo sea: - Ser predecible - Reutulizable - Mantenible - Escalable

En un proyecto real de html y css vamos a encontrar miles de lineas de codigo que nos pueden abrumar, por eso existen las arquitecturas de css

Arquitecturas CSS:
Las arquitecturas CSS consisten en manejar el código CSS con una serie de reglas y patrones para facilitar su lectura, mantenibilidad y escabilidad.

Objetivos de las arquitecturas de CSS:

• Ser predecible
• Reutulizable
• Mantenible
• Escalable

Buenas prácticas de las arquitecturas de CSS:

• Lineamientos y estandares
• Documentacion
• Componentes

Esto me hizo pensar en el curso de Programacion Basica, en el cual se hicieron un monton de lineas de codigo y eso es solo el principio de lo que me espera haya afuera…

Que bueno, aprendiendo nos acostumbramos a estos pequeños archivos con poco código y al iniciar en el campo laboral puede ser abrumador la cantidad de archivos y lineas de código que se manejan día a día!!!

¿Qué son las arquitecturas CSS?

• Las arquitecturas de css sirven para hacer más predecible y legible el código, más reutilizable para no redundar, más mantenible por ejemplo al hacer un cambio y modificar el código sin afectar el funcionamiento y finalmente para ser más escalable, al añadir nuevas características.

• Las buenas prácticas como los lineamientos facilitan el trabajo en equipo, con una buena documentación y estándares aplicados para una coordinación eficiente entre las personas del equipo

En realidad tardé un mes en tomar este curso y ahora una semana de empezarlo ya me estoy acercando al final, reaprendí los básicos una quinta vez ya creo. Estoy emocionado que tan capaz seré cuando reaprenda una vez más al enseñar esto.

0:22 en proyectos de la vida real nos vamos a encontrar con una gran cantidad de lineas de codigo 😡😆

Mejor utilizar preprocesadores como SASS, son una maravilla para tenerlo por documentos

Las arquitecturas nos permiten hacer nuestro código más predecible, reusable, escalable y legible.

Metodologias para organizar los estilos css

• Las arquitecturas CSS permiten tener un código más predecible, legible, reutilizable, mantenible y escalable.
• Buenas prácticas:
  • Tener lineamientos y entandares con los otros desarrolladores para establecer como se va a estructurar y escribir el código CSS.
  • Documentación sobre como esta construido el proyecto y que lineamientos sigue.

Es importante tener un css específico que tenga medidas, colores o clases que puedan reutilizar de forma universal y ese será su css padre.

GENIAL!!!

Las arquitecturas CSS sirven para mejorar la experiencia del desarrollo.
objetivos:

• Ser predecible: tenerlo un código con comportamiento previsible, entendible.
• Reutilizable : no escribir código redundante.
• Mantenible: poder hacer refactorización de manera sencilla.
• Escalable: poder crecer el código y seguir siendo fácil de mantener.

Buenas prácticas:

• Coordinar lineamientos: Para escribir el mismo código.
• Tener documentación: tanto para las personas del equipo como nuevos.
• Usar estándares: para mejora el desarrollo
• Componentes:

Arquitectura CSS:
Ser predecible
Reutilizable
Mantenible
Escalable

Buenas prácticas:
Lineamientos
Documentación
Estándares
Componentes

Muy importante las arquitecturas !

os objetivos de una buen arquitectura de CSS son básicamente que sea: Predecible: sus reglas hacen lo que se espera. Añadir o actualizar una regla no tiene repercusiones inesperadas. … Mantenible: es la capacidad de realizar cambios en las CSS sin necesidad de tener que refactorizar el código existente.