No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

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

20/23
Recursos

Aportes 24

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

¿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

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

CSS debe ser:

Predecible, intuitivo, legible y descriptivo.

  • Reutilizable.

  • Mantenible.

  • Escalable.

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

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.

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

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

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

BEM

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.

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.

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

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:

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

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.