SOLID, DRY e Inmutabilidad en CSS

2/19
Recursos
Transcripci贸n

Aportes 12

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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鈥檛 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鈥檛 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.
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/

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:
    鈥淯na clase debe tener una sola raz贸n para cambiar鈥

  • Open-Closed Principle:
    鈥淟as 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鈥檛 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;
}