Después de años trabajando con CSS estas son algunas de las conclusiones a las que he llegado que las plasmo en una guía.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md

README.md

CSS-Styleguide (en proceso)

Después de años trabajando con CSS estas son algunas de las conclusiones a las que he llegado que las plasmo en una guía.

Cosas a tener en cuenta

  • Piensa de forma modular
  • No mezclar funcionalidad con estilos (uso de prefijos js-)

Orden de las propiedades

  • Estoy viendo mucho más sencillo de usar el orden alfabético de las propiedades. Es más práctico a la hora de encontrar una propiedad. Los prefijos no serán tomados en cuenta y si usas mixins ponerlos al principio o al final con una separación.
/* No recomendado */
.selector {
  background: #FFF;
  padding: 5px;
  position: relative;
  border-top: 1px solid red;
  margin: 0 auto;
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.9);
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.9);
  box-shadow: 5px 5px 5px rgba(0,0,0,.9);
}

/* Recomendado */
.selector {
  @include border-radius(5px);
  @include adjust-font-size-to(14px);
  
  background: #FFF;
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.9);
     -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.9);
          box-shadow: 5px 5px 5px rgba(0,0,0,.9);
  border-top: 1px solid red;
  margin: 0 auto;
  padding: 5px;
  position: relative;
}

Comentarios

Los comentarios los divido en dos grupos, uno es el general que anuncia algo importante como un módulo o un objecto, y la segunda la uso para comentarios más específicos.

//*-----------------------------------------------
//* Comentario general 
//*-----------------------------------------------
// Comentario más espécífico

Estructura de ficheros

La estructura de ficheros es de vital importancia, sobretodo para proyectos grandes. Yo suelo separar los directorios y dentro de cada directorio irá un manifiesto que será un listado de todos los css relacionados.

|_base [estilos base y estilos que voy a utilizar en practicamente todos los elementos]
  |__ _manifest.scss
  |__ _boilerplate.scss
  |__ _buttons.scss
  |__ _forms.scss
  |__ _heading.scss
  |__ _icons.scss
  |__ _lists.scss
  |__ _margins.scss
  |__ _paddings.scss
  |__ _positions.scss
  |__ _print.scss  
  |__ _rowscolumns.scss
  |__ _radio-checkbox.scss
  |__ _theme.scss
  |__ _utilities.scss

|_layout [estilos pertencientes al layout y estructura base]
  |__ _manifest.scss
  |__ _aside.scs
  |__ _colright.scs
  |__ _main.scss
  |__ _footer.scss
  |__ _header.scss

|_objects [elementos pequeños e independientes que normalmente tienen que ver con usabilidad]
  |__ _manifest.scss
  |__ _errors.scss
  |__ _flash.scss
  |__ _pagination.scss
  |__ _avatars.scss

|_modules [elementos más o menos grandes independientes que normalmente tienen que ver con estructura]
  |__ _manifest.scss
  |__ _box-info.scss
  |__ _modals.scss
  |__ _resource.scss
  |__ _messages.scss

|_plugins [elementos externos]
  |__ _fancybox.scss
  |__ _jquery.query.scss
  |__ _nProgress.scss

|_media [elementos de adaptavilidad]
  |__ _manifest.scss
  |__ _mediaqueries.scss

|_mixins [fuciones y a veces placeholders]
  |__ _manifest.scss
  |__ _animations.scss
  |__ _fonts.scss
  |__ _format.scss

|_generic [otros más genéricos como de estado o las clases asignadas a animaciones]
  |__ _manifest.scss
  |__ _animation.scss
  |__ _status.scss


|_ config.scss
|_ application.css.scss

Nombra variables para colores que puedas recordar

Para mí el nombre de variables para colores tiene que ser sencillo de recordar, por eso prima la semántica.

  //*-----------------------------------------------
  //* Colors
  //*-----------------------------------------------
  
  $black: #000;
  $white: #ffffff;
  $orange: #e26310;
  $red: #c44834;
  $green: #afb93e;
  $yellow: #e9ba4d;
  $brown: #333;
  
  // Blues
  $blue: #075984;
  $dark-blue: #00364C;
  $light-blue: lighten($blue, 20%)
  
  $aqua: #63bbe2;
  
  $cian: #cdeaf8;
  $light-cian: #cbeaf6;
  
  //Grey
  $grey: #7a7a7a;
  $dark-grey: #555555;
  $light-grey: #dddddd;

Convención para nombre de clases

  • Uso de BEM para nombrar clases
  • Nunca hacer referencia a una clase js- en la hoja de estilo, esto es exclusivamente para funcionalidad JS
  • Usar el prefijo is- para clases de tipo estado is-hover is-active
  • También se puede usar el prefijo status- para definir estado
  .status-warning{
    color: $orange;
  }
  .status-success{
    color: $green;
  }
  .status-info{
    color: $blue;
  }
  .status-error{
    color: $red;
  }

No más de tres niveles de especificidad

Para eso hay que pensar en módulos y objectos. Los objectos los podemos usar a lo largo de todo el proyecto y estilos agrupados por temas.

  //No recomendado
  .list {
    margin: 0;
    padding: 10px;
    .list-item {
      text-align: left;
      .list-item__lnk{
        display: block;
        padding: 5px;
        > .list-item__lnk-icon{
          display: block;
          height: 20px;
          width: 20px;
        }
      }
    }
  }
  //*-----------------------------------------------
  //* Objecto lista
  //*-----------------------------------------------
  .list{
    @extend %clear-list;
    >li a{
      [class^="ico"]{
        font-size: 1.1em;
      }
    }
  }

  // Lista horizontal
  .horizontal-list{
    @extend .list;
    @include horizontal-list;
  }

  // Lista vertical
  .vertical-list{
    @extend .list;
    @include vertical-list;
  }
  //*-----------------------------------------------
  //* Estilo soft para lista
  //*-----------------------------------------------

  .thm--list-soft{
    > li{
      color: $grey;
      padding-right: 10px;
    }
    > li a {
      color: $grey;
      &:hover{
        color: $aqua;
      }
    }
    
    &.-min{font-size: .9em}
  
    // Si hay algún elemento al mismo nivel con la clase -inherit
    // heredará los mismos estilos
  
    + .-inherit{
      color: $grey;
      text-decoration: none;
      &:hover{
        color: $aqua;
      }
    }
  }
  %ul.horizontal-list.thm--list-soft
    %li
      %a{href:"#"}
        Primer enlace
    %li
      %a{href:"#"}
        Segundo enlace
    %li
      %a{href: "#"}
        Tercer elemento
  /elemento fuera de la lista pero relacionado
  %a.-inherit{href:"#"}
    Más

No IDs para dar estilos

Mientras que las clases son reusables los ids tienen que ser únicos. Se pueden usar ids para nombrar algún elemento y luego referenciarlo en javascript o en los tests.

Usa '@extend' y '@include' al principio de cada propiedad

Me resulta más limpio y cómodo.

 .nav-top{
   @include clean-margins;
   @extend %center;

   background: #F00;
   color: $orange;
   position: relative;
 }

Indentado

Acostumbrado a coffescript indento con espacios (2 espacios) en lugar de tabulaciones.

[selector]{
  border: 1px solid red;
  padding: 5px;    
}