En estos últimos 3 años he trabajado en un proyecto muy grande. He sido el responsable de escribir todo el css y todo el javascript (y por supuesto html). He pasado por auténticas pesadillas a la hora de estructurar, nombrar y organizar mi código, y a medida que el proyecto se iba haciendo más grande me salían los bichos por debajo de la mesa. Esto me ha llevado a un aprendizaje sobre moduralizar el código y a llegar a la conclusión de que css puedes ser tu peor enemigo.

Lo bueno y lo malo de css es lo mismo: puedes hacer lo que quieras con él.

Puedes hacer cosas como esto y te va a funcionar perfectamente:


.body .menu .lista .enlace_lista > a{ color: blue; }


Uno de los elementos más usados en un proyecto son los botones. Uno tiene que analizar cuantos tipos de botones tiene un site y jeraquizarlos. Por ejemplo, tendremos 3 tipoas de botones, los más importantes y usados, los secundarios y los botones tipo texto.

//Definimos el objecto padre que contiene las propiedades comunes
.btn {
  display          : inline-block;
  padding          : 5px 10px;
  text-align       : center;
  text-decoration  : none;
  font-weight      : 100;
  // Dentro de este objeto tenemos los 3 botones que heredan del objecto padre
  // Esto solo es visible desde el objecto padre
  // No puedes llamar a la clase -primary sin antes referenciar al padre btn
  // así: [class="btn -primary" o bien class="btn -secondary" o class="btn -text"]
  &.-primary {
    background : #fff;
    border     : 1px solid grey;
    color      : darkgrey;
  }
  &.-secondary {
    background : #666;
    border     : 1px solid black;
    color      : #fff;
  }
  &.-text {
    vertical-align: middle;
    color         : black;
    &:hover{
      box-shadow: none;
      text-decoration: underline;
    }
  }

  // Definimos los estados comunes
  &:hover {
    box-shadow: inset 0px 0px 10px lighten(grey, 10%);
  }
  &:active {
    box-shadow: inset 0px 0px 20px lighten(grey, 20%);
  }
}

Demo

See the Pen e9ddcb7cee55ef740450be73d97c9a5c by Davilious (@davilious) on CodePen.

Esto solo ha sido una pequeña demostración de lo que es modularizar el código en css. Existen muchas aproximaciones para llevar a cabo un buen modularizado de tu css, por ejemplo bem o smacss entre otros sitemas, usar una, otra o las dos depende de ti y de las necesidades del proyecto, esta que empleo me hace más feliz.

Recursos relacionados



¡Feliz código!