Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
11 Hrs
36 Min
35 Seg

SOLID, DRY e Inmutabilidad en CSS

2/19
Resources
Transcript

What do SOLID principles mean in CSS?

The SOLID principles, originally designed for object-oriented programming, can be effectively applied in CSS to improve the organization, maintainability, and extensibility of your code. We will explore how each of the five principles: Single Responsibility, Open-Closed, Liskov Substitution, Interface Segregation, and Dependency Inversion, can be integrated into CSS development.

What is the Single Responsibility Principle in CSS?

The single responsibility principle states that a class should have only one reason to change. In CSS, this translates to avoiding classes that control multiple aspects of an element's style. For example:

.Button { border-radius: 2rem;}
.Button-Secondary { background-color: blue; color: white;}

Each class serves a unique function: while .Button focuses on the overall design, .Button-Secondary extends the styling without mixing responsibilities.

How does the open-closed principle apply in CSS?

The open-closed principle suggests that entities should be open for extension but closed for modification. In CSS, it might involve designing classes that can be extended without directly altering them. The ideal is:

  • Avoid direct modification of existing classes.
  • Create new classes that extend functionality without altering them.

For example, .Button-Secondary can be extended to include new properties in future developments, while respecting the original definition of .Button.

What is Liskov substitution in CSS?

This principle states that subtypes should be able to replace their base types without altering the desired behavior. In CSS, it translates to making sure that specific classes (such as .Button-Secondary) can effectively inherit from more general classes (.Button), without altering pre-existing functionality:

.Button { border-radius: 2rem;}
.Button-Secondary { background-color: blue; color: white;}

How is interface segregation handled in CSS?

Interface Segregation suggests that code should not rely on unused methods. In CSS effect, we should avoid overwriting properties extensively. Avoid having a code base where classes constantly redefine values inherited from other classes. The solution lies in designing code architectures that allow more efficient use of styles without unnecessary overwriting.

What is dependency inversion in CSS all about?

This principle states that high-level modules should not depend on low-level modules. In CSS, this is reflected by using universal classes for common styles. Instead of nesting selectors, use separate classes that encapsulate reusable styles:

.text-md { font-size: 1em;}
.cart .title { /* This ill-defined with high specificity */}

How can I avoid repeating code with DRY in CSS?

Don't repeat, DRY (Don't Repeat Yourself) invokes the practice of defining shared styles in global classes. For example, if multiple elements use display: flex;, justify-content: center;, and align-items: center;, encapsulate them in a class called .centered that can be applied universally:

.centered { display: flex; justify-content: center; align-items: center;}

What is immutability in CSS?

Immutability focuses on avoiding changing the state of an object after its creation. Applied to CSS, it implies not overwriting previously set properties. If a cart class has specific values, it avoids changing them without creating a separate variant to do so.

Share your experience!

Have you applied these principles in your CSS projects? Share your experiences, challenges and any improvements you have managed to implement. Learning from each other's experience strengthens our knowledge and application of efficient coding techniques. Ready for the next lesson? Get ready to dive into methodologies like BEM that take CSS efficiency one step further.

Contributions 20

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

Solid Principles

  1. Single Responsability

    Una clase de tener una sola razon para cambiar

    Frase popularizada por Robert C. Martin en su libro Clean Code se refiera a que cada clase debe hacer una sola cosa y hacerla bien.

    <button class="button button--secondary">
      Soy Un Boton
    </button>
    
    .button {
        border-radius: 2rem;
      }
    
    .button--secondary {
       background-color: grey;
       color: black;
    }
    

    no dejar que entren codigo que pueda limitar y desviar el proposito de la clase
    .

  2. Open-Closed
    La entidades de software deben estar abiertas para extensión pero cerrada para modificación

    .button {
        border-radius: 2rem;
      }
    
    .button--secondary {
       @extend .button--sm;
       background-color: grey;
       color: black;
    }
    

    .

  3. Liskov Subtitution
    Propuesto por Barbara Liskov

    Un objeto puede ser reemplazado por un subojeto sin romper el programas

    • Una clase derivada debe poder ser utilizada en lugar de la clase base sin romper el comportamiento esperado del programa.

      <button class="button--secondary">
        Soy Un Boton
      </button>
      
      .button {
          border-radius: 2rem;
        }
      
      .button--secondary {
         @extend .button;
         background-color: grey;
         color: black;
      }
      

      .

  4. Interface Segregation
    No se debe obligar a ningun codigo a depender de metodos que no utiliza.
    Una interfaz debe ser específica y contener solo los métodos que sean relevantes para las clases que la implementan. No se deben forzar a las clases a implementar métodos que no necesitan, ya que esto podría llevar a una dependencia innecesaria y acoplamiento entre clases.

    .button {
        border-radius: 2rem;
      }
    
    .button--secondary {
       @extend .button;
       background-color: grey;
       color: black;
    	 border-radius: 1.5rem;
    }
    

    .

  5. Depency Inversion
    Modulos de alto nivel no deben depender de modulos de bajo nivel. Ambos deberian depender de abstracciones.
    Este principio facilita la reutilización del código, ya que los módulos pueden ser intercambiados o extendidos más fácilmente a través de las interfaces, sin alterar la lógica general del sistema.

    .card div .title {
       font-size: 2rem;
    }
    

    .text-md {
       font-size: 2rem;
    }
    

.

Don’t Repeat Yourself

Reducir la repeticion de código

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid grey;
  width: 100%;
  height: 20rem;
}

.card div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .card {
    @extend .center;
    border: 1px solid grey;
    width: 100%;
    height: 20rem;
  }

  .card div {
    @extend .center;
    padding: 2rem;
  }

.

Inmutability

Objeto cuyo estado no puede ser modificado una ver creado.

. card p {
	color: black;
}

.grey {
	color: gray !important
}
<div class="card">
  <p class="grey">Grey y su padre card</p>
</div>

SOLID es un acrónimo acuñado por Robert C. Martin en el cual se representan los cinco principios básicos de la programación orientada a objetos. La intención de seguir estos principios es eliminar malos diseños, evitar la refactorización y construir un código más eficiente y fácil.

Princípios Explicación
SOLID (originalmente un acrónimo para principios de programación orientada a objetos) -
Single Responsibility Principle (SRP) En CSS, esto significa que una clase debe tener una única responsabilidad. Por ejemplo, evita crear una clase que defina el color de fondo, las dimensiones y la tipografía a la vez. Mejor divide las responsabilidades en diferentes clases: .background-color, .dimensions, .typography, etc.
Open-Closed Principle (OCP) El CSS debería estar abierto para la extensión, pero cerrado para la modificación. Esto significa que si necesitas cambiar el estilo, mejor crea una nueva clase que extienda la existente en lugar de modificar la original.
Liskov Substitution Principle (LSP) Este principio no se aplica mucho en CSS. Sin embargo, podemos interpretarlo como que cualquier clase CSS que extendemos o modificamos no debería alterar la funcionalidad del elemento HTML al que se aplica.
Interface Segregation Principle (ISP) Este principio sugiere que las clases de CSS deben ser específicas y no genéricas. No debes crear clases de CSS que contengan estilos que no se utilicen siempre que se usa la clase.
Dependency Inversion Principle (DIP) En CSS, podemos pensar en este principio en términos de dependencias de estilos. Los estilos de nivel más alto no deben depender de estilos de nivel más bajo. Deberías ser capaz de cambiar una clase sin afectar a otras.
DRY (Don’t Repeat Yourself) Este principio sugiere que no debes repetir el mismo código una y otra vez. En CSS, puedes usar preprocesadores como SASS o LESS para ayudarte a evitar la repetición. Utiliza mixins, variables y funciones para hacer tu CSS más DRY.
Inmutabilidad En CSS, un estilo inmutable es aquel que no cambia una vez que se define. Esto significa que una vez que asignas un estilo a una clase, ese estilo no debe ser modificado por otros estilos más adelante en la hoja de estilos. La inmutabilidad puede ayudar a prevenir efectos secundarios no deseados y hacer que tu código sea más predecible.


Principio DRY. En el diseño de las classes se puede evitar el duplicar con la abstracción de las funcionalidades comunes e implementar solo las partes que difieren.

Muy interesante esta temática no había pensado en aplicar estos principios a css, pero siguiendo esta lógica tiene mucho sentido y también se ve reflejado esto en frameworks como Tailwind CSS.

Que si había escuchado sobre los principios SOLID? Pues creo que no 😅. De hecho cuando realizo mis proyectos con CSS repetía código, pero ahora ya me doy una idea como superar ese problemita jeje. Con SASS en muy diferente, uso la herencia, funciones y mixins a mi favor 😎

Ejemplo para DRY

/* Antes de aplicar DRY */
.red-text {
  color: red;
}
.blue-text {
  color: blue;
}
.large-text {
  font-size: 2em;
}
.small-text {
  font-size: 0.8em;
}

/* Después de aplicar DRY */
.color-red {
  color: red;
}
.color-blue {
  color: blue;
}
.font-large {
  font-size: 2em;
}
.font-small {
  font-size: 0.8em;
}

Principios Definición
S Tener una única responsabilidad
O Abiertas a extender sus funcionalidades, Cerradas a modificar
L Las clases derivadas deben Sustituir a las clases base sin alterar el comportamiento esperado
I Las interfaces deben ser pequeñas y específicas.
D Los módulos de alto nivel no deben depender de los de bajo nivel, deben depender de abstracciones.


https://anahisalgado.com/principios-solid/

  • SOLID, DRY e Inmutabilidad en CSS

    SOLID PRINCIPLE:

  • Single responsibility principle:
    “Una clase debe tener una sola razón para cambiar”

  • Open-Closed Principle:
    “Las entidades de software deben estar abiertas para extension, pero cerradas para modificación”

  • Liskov Substitution:
    Un objeto puede ser reemplazado por un subobjeto sin romper el programa

  • Interface segregation:
    No se debe obligar a ningún código a depender de métodos que no utiliza.

  • Dependency Inversion:
    Módulos de alto Nivel no deben depender de módulos de bajo nivel. Ambos deberían depender de abstracciones.

  • Dry: Don’t repeat yourself: Reducir la repeticón de la información.

Qué importante es aprender esto, para que nuestro código sea realmente legible y óptimo. Mi error más común es repetir código 🤦🏻‍♀️
¡Hola! La verdad es que sí escuché sobre el DRY en un curso de Sistemas de Diseño (del profe Rulotico), sin embargo viendo ahora este curso de Arquitectura CSS creo que no lo había aplicado, jajajajaja. He repetido mucho código a lo largo de mi vida, ha sido valioso porque la repetición me ayudó a aprender cómo usar para elemento o componente, pero ahora sí puedo entender de verdad cómo hacer para no repetirlo. Sinceramente a veces es frustrante ver la cantidad de líneas de codigo y saber que muchas son exactamente iguales, gracias Estefany por darnos en esta clase todas aquellas cosas que debemos considerar para hacer nuestro código más limpio 💗
En CSS siempre he usado BEM. Va a estar bueno aprender mas cosas..
Muy inteneresante en como aplicar estos principio en CSS
  • O - Principio de Abierto/Cerrado (Open/Closed Principle)

    Las clases deben estar abiertas para extensiones pero cerradas para modificaciones. Esto significa que se deben poder agregar nuevas funcionalidades a través de extensiones sin tener que modificar el código existente.

    Ejemplo:

    Tenemos una clase base .card que define los estilos comunes para todas las tarjetas. Luego, tenemos clases específicas para cada tipo de tarjeta: .circle-card, .square-card y .triangle-card. Cada una de estas clases define los estilos específicos para cada tipo de tarjeta, como colores de fondo, bordes y tamaños de fuente.

    Si queremos cambiar los estilos de las tarjetas existentes, podemos hacerlo agregando nuevas clases con estilos específicos sin necesidad de modificar las clases de tarjetas originales. Esto mantiene el código CSS cerrado para modificaciones y abierto para extensiones.

* Estilos base para todas las tarjetas */
.card {
  padding: 10px;
  border: 1px solid #ccc;
}

/* Estilos específicos para cada tipo de tarjeta */
.circle-card {
  /* Estilos específicos para tarjetas circulares */
  background-color: #f2a541;
  border-radius: 50%;
  font-size: 16px;
}

.square-card {
  /* Estilos específicos para tarjetas cuadradas */
  background-color: #2e86ab;
  border-radius: 5px;
  font-size: 18px;
}

.triangle-card {
  /* Estilos específicos para tarjetas triangulares */
  background-color: #e84545;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  font-size: 14px;
}
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>
me di cuenta que he cometido muchos errores XD

La verdad que esta clase me hizo dar cuenta que tengo malas practicas, la que mas hacia era la de sobrescribir las clases con immportant

Quiero ser un buen programador de CSS, que me aconsejan?

Me ha gustado como se ha explicado 😄

A decir verdad, no me quedo clara la O ¿Como está esto violando la regla? Lo que entiendo es que está extendiendo, no modificando ya que .button y .button--secondary son clases distintas.