SOLID, DRY e Inmutabilidad en CSS

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.

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

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.

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.

• 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.

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?

• 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;
}

Me ha gustado como se ha explicado 😄

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;
}