Hoy me he topado con un proyecto gracias a un tweet de Paul Irish que nos va a ayudar a hacer un código CSS más mantenible y más sencillo siguiendo una lógica modular y usando nomenclatura BEM. Se parece un poco a lo que yo venía haciendo pero este sin duda es mejor porque encapsula en tan solo 5 escenarios posibles todo el código.

csstyle

Components (Componentes)

Los componentes son los objetos que van a ser reusables a lo largo de todo el proyecto. Uno de los consejos es crear un archivo separado por cada componente, así lo encontraremos y editaremos más facilmente.

<a class="button"> Botón básico </a>
@include component(button){
  background: #333;
  color: #FFF;
  padding: 10px;
  text-decoration: none;
}

Options (Opciones)

Son los modificadores de BEM, los métodos del objecto, los adjetivos de los componentes. Sirven para hacer más flexibles los componentes.

<a class="button"> Botón enviar </a>
@include component(button){
  background: #333;
  color: #FFF;
  padding: 10px;
  text-decoration: none;
  // Modificador
  @include option(submit){
    background: aqua;
    color: #333;
  }
}

Parts (Partes)

Son los elementos en BEM, las partes en las que se pueden clasificar los componentes. Las partes son muy flexibles ya que pueden añadirse a otros componentes pero una parte no puede convivir fuera de un componente.

<a class="button"> 
  <span class="button__icon --megusta"></span>
  Botón me gusta
</a>
@include component(button){
  background: #333;
  color: #FFF;
  padding: 10px;
  text-decoration: none;
  // Modificador
  @include option(submit){
    background: aqua;
    color: #333;
  }
  // Elemento
  @include part(icono){
    display: inline-block;
    width: 20px;
    height: 20px;
    // Modificador del elemento
    @include option(megusta){
      &:before{
        content: '♥';
      }
    }
  }
}

Tweaks (Helpers)

Los tweaks son estilos genericos que pueden ser aplicados a cualquier elemento creado ya sea componente, parte u otro elemento. Los tweaks se aplican usando el prefijo + seguido del nombre. Los tweaks sobreescriben el estilo del elemento.

<a class="button +rounded +shadow">
  Botón me gusta
</a>
// Helpers globales
@include tweak(rounded) {
  border-radius: 10px;
}
@include tweak(shadow) {
  box-shadow: inset 0px 0px 10px #000;
}

Locations (Ubicación)

Esto sirve para definir estilos dependiendo de la ubicación del elemento, a veces todos los elementos son iguales excepto en la home que tienen un estilo diferente, con esto sobreescribiremos los estilos generales y aplicaremos el local. Los locations se forman con el prefijo @ seguido del nombre de la sección (ubicación).

<span class="@home">
  <a class="button +rounded +shadow">
    Botón de la home
  </a>
</span>
@include location(home){
  @include component(button){
    border: 5px solid black;
    background: grey;
  }
}

Requisitos

1) Importar los mixins.
2) Añadir un identificador al body id="csstyle" creo que esto es sobretodo para los tweaks y los locations.
3) Trabajar con la versión estable de sass (3.4).

Conclusión

Estoy emocionado de haber encontrado este grupo de mixins, me parece una forma muy clara, sencilla y modular de hacer tu css, sobretodo para proyectos grandes. Las desventajas son que tienes que añadir un identificador al body y que esos operadores que usa para los tweaks y locations (+ y @) dan error de sintaxis en haml (cuando usamos la forma sencilla en haml de asignar clases .clase1.clase2 en su lugar podemos usar %div{class: “@home +yep”}).

Demo

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

Recursos relacionados

csstyle.io, página web del proyecto

csstyle github



¡Feliz código!