Al igual que con cualquier método de codificación basado en objetos, el propósito de OOCSS es fomentar la reutilización de código y, en última instancia, crear hojas de estilo más rápidas y eficientes que sean más fáciles de escalar y mantener.

     Los principios de OOCSS

Tal y como se describe en la página Wiki del repo de OOCSS GitHub, OOCSS se basa en dos principios principales.

Separacion de estrucutra y 'skin'

1. Separacion de estructura y 'skin'

2. Separación  de contenedor y contenido

Casi todos los elementos de una página Web con estilo tienen diferentes características visuales (es decir, "pieles") que se repiten en diferentes contextos. Piensa en la marca de un sitio web: los colores, los usos sutiles de los degradados , fuentes, etc.

Por otra parte, también se repiten otras características generalmente invisibles (es decir, "estructura"). Cuando estas características diferentes se abstraen en módulos basados ​​en clases, se vuelven reutilizables y se pueden aplicar a cualquier elemento y tener el mismo resultado básico. Vamos a comparar algunos antes y después de OOCSS para que entiendan lo que estoy hablando.

     Separacion de estrucutra y 'skin'

#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

Antes de OOCSS nosotros teniamos un código como este

     Separacion de estructura y 'skin'

Con un poco de planificación y previsión, podemos abstraer los estilos comunes para que el CSS acabe así:

.button {
  width: 200px;
  height: 50px;
}

.box {
  width: 400px;
  overflow: hidden;
}

.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

      Separacion de estructura y 'skin'

Ahora todos los elementos están usando clases, los estilos comunes se combinan en un "skin"

reutilizable y nada se repite innecesariamente. Solo necesitamos aplicar la clase "skin" a todos

los elementos y el resultado será el mismo que lo que el primer ejemplo produciría, excepto

con menos código y una posibilidad de reutilización

       Separación de contenedor y contenido

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

Estos estilos se aplicarán a los encabezados de tercer nivel que sean hijos del elemento #sidebar. Pero, ¿qué pasa si queremos aplicar exactamente los mismos estilos a títulos de tercer nivel que aparecen en el pie de página, con la excepción de un tamaño de fuente diferente y una sombra de texto modificada? Entonces tendríamos que hacer algo como esto:

#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

El segundo principio descrito en la página wiki de OOCSS GitHub es la separación de contenedores de su contenido.

O podriamos hacer algo peor aun

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

/* other styles here.... */

#footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

Ahora estamos innecesariamente duplicando estilos, y tal vez no se dan cuenta (o simplemente no les importa). Con OOCSS, nos animamos a dar más previsión a lo que es común entre los diferentes elementos, a continuación, separar las características comunes en módulos u objetos, que pueden ser reutilizados en cualquier lugar.
Los estilos que se declaran utilizando el selector descendente en los ejemplos anteriores no son reutilizables porque dependen de un contenedor determinado (en este caso, la barra lateral o el pie de página).
Cuando usamos la construcción de módulos basada en clases de OOCSS, nos aseguramos de que nuestros estilos no dependan de ningún elemento que contenga. Esto significa que pueden reutilizarse en cualquier parte del documento, independientemente del contexto estructural.

        Separación de contenedor y contenido

Un componente de página funcionalmente independiente que puede ser reutilizado.

En HTML, los bloques están representados por el atributo class.

     Bloque

En el desarrollo de un sitio web, es útil para marcar "bloques" de los que se compone.

Esta imagen tiene Head, Main Layout y Footer blocks. Head a su vez Logo, Buscador y Login.

El diseño principal contiene un título de página y un bloque de texto

El nombre del bloque describe su propósito ("¿Qué es?" - menú o botón), no su estado ("¿Qué se ve?", Rojo o grande).

<!-- Correct. The `error` block is semantically meaningful -->

​<div class="error"></div>

                                   <!-- Incorrect. It describes the appearance -->

<div class="red-text"></div>

El bloque no debe influir en su entorno, lo que significa que no debe establecer la geometría externa (relleno o los límites que afectan al tamaño) o el posicionamiento para el bloque.

Tampoco debe usar selectores de etiqueta o ID CSS cuando utilice BEM.

Esto asegura la independencia necesaria para reutilizar bloques o moverlos de un lugar a otro.

     Características

Los bloques se pueden anidar entre sí.
Puede haber cualquier número de niveles de anidamiento.

Ejemplo

      Directrices para el uso de bloques

<!-- `header` block -->

    <header class="header">

    <!-- Nested `logo` block -->

        <div class="logo"></div>

    <!-- Nested `search-form` block -->

        <form class="search-form"></form>

</header>

Anidamiento

     Elemento

Un elemento es una parte de un bloque que realiza una determinada función. Los elementos dependen del contexto: sólo tienen sentido en el contexto del bloque al que pertenecen.

Example

Un input field y un button son elementos del bloque Search

El nombre del elemento describe su propósito ("¿Qué es esto?" - elemento, texto, etc.), no su estado ("¿Qué tipo, o cómo se ve?", Rojo, grande, etc.).

La estructura del nombre completo de un elemento es nombrebloque__nombreelemento. El nombre del elemento se separa del nombre del bloque con un doble subrayado (__).

     Características

<!-- `search-form` block --> 

     <form class="search-form">

    <!-- `input` element in the `search-form` block -->

        <input class="search-form__input">

    <!-- `button` element in the `search-form` block -->

        <button class="search-form__button">Search</button>           </form>

      Ejemplo

     Directrices para el uso de elementos

Los elementos pueden anidarse uno dentro del otro.

Puede haber cualquier número de niveles de anidamiento.

Un elemento siempre es parte de un bloque, no de otro elemento. Esto significa que los nombres de elementos no pueden definir una jerarquía como block__elem1__elem2.

<!-- Correct. The structure of the full element name follows the pattern: `block-name__element-name` -->

<form class="search-form">

      <div class="search-form__content">

            <input class="search-form__input">

           <button class="search-form__button">Search</button>

      </div>

</form>

<!-- Incorrect. The structure of the full element name doesn't follow the pattern: `block-name__element-name` -->

<form class="search-form">

      <div class="search-form__content">

      <!-- Recommended: `search-form__input` or `search-form__content-input` -->

             <input class="search-form__content__input">

      <!-- Recommended: `search-form__button` or `search-form__content-button` -->

             <button class="search-form__content__button">Search</button>

      </div>

</form>

     Ejemplo

El nombre del bloque define el espacio de nombres, lo que garantiza que los elementos dependen del bloque (block__elem).

Un bloque puede tener una estructura anidada de elementos en el árbol DOM:

<div class="block">

             <div class="block__elem1">

                    <div class="block__elem2">

                            <div class="block__elem3"></div>

                    </div>

            </div>

</div>

      Espacio de nombres

Ejemplo

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Sin embargo, esta estructura de bloques siempre se representa como una lista plana de elementos en la metodología BEM:

Esto le permite cambiar la estructura DOM de un bloque sin hacer cambios en el código para cada elemento separado:

<div class="block">

      <div class="block__elem1">

                <div class="block__elem2"></div>

      </div>

      <div class="block__elem3"></div>

</div>

.La estructura del bloque cambia, pero las reglas para los elementos y sus nombre permancecen igual

     Pertenencia

<!-- Correct. Elements are located inside the `search-form` block -->

      <!-- `search-form` block -->

      < form class= "search-form">

            <!-- `input` element in the `search-form` block -->

            < input class= "search-form__input">

           <!-- `button` element in the `search-form` block -->

           < button class= "search-form__button"> Search </ button>

     </ form>

<!-- Incorrect. Elements are located outside of the context of the `search-form` block -->

      <!-- `search-form` block -->

      < form class= "search-form"> </ form>

      <!-- `input` element in the `search-form` block -->

      < input class= "search-form__input">

      <!-- `button` element in the `search-form` block-->

      < button class= "search-form__button"> Search </ button>

Si una sección de código puede ser reutilizada y no depende de otros componentes de página implementados, debe crear un bloque.

Si la sección de código no puede utilizarse por separado sin la entidad principal (el bloque), normalmente se crea un elemento.

      Bloque o elemento?

     Modificadores

Define la apariencia, estado o comportamiento de un bloque o elemento.

Caracteristicas:

El nombre del modificador describe su apariencia ("¿Qué tamaño?" O "¿Qué tema?" Y así sucesivamente - size_s o theme_islands), su estado (¿Cómo es diferente de los demás? Comportamiento ("¿Cómo se comporta?" O "¿Cómo responde al usuario?" - como directions_left-top).

El nombre del modificador se separa del nombre del bloque o del elemento por un solo guión bajo (_).

     Modificadores

     Tipo de modificadores

Boolean

Se utiliza cuando sólo la presencia o ausencia del modificador es importante, y su valor es irrelevante. Por ejemplo, deshabilitado. Si está presente un modificador booleano, se supone que su valor es verdadero.

La estructura del nombre completo del modificador sigue el patrón:
Nombre-bloque-nombre-modificador
Nombre-bloque-nombre-nombre-nombre-modificador

<!-- The `search-form` block has the `focused` Boolean modifier --> <form class="search-form search-form_focused">

     <input class="search-form__input">

<!-- The `button` element has the `disabled` Boolean modifier -->                 

     <button class="search-form__button search-form__button_disabled">Search</button> </form>

Se utiliza cuando el valor del modificador es importante. Por ejemplo, "un menú con el tema de diseño de islas": menu_theme_islands.

La estructura del nombre completo del modificador sigue el patrón:

Block-name_modifier-name_modifier-value
Nombre-bloque-nombre-nombre-modificador-nombre-valor-modificador

     Tipo de modificadores

Clave-valor

<!-- The `search-form` block has the `theme` modifier with the value `islands` -->

      <form class="search-form search-form_theme_islands">

            <input class="search-form__input">

           <!-- The `button` element has the `size` modifier with the value `m` -->

          <button class="search-form__button search-form__button_size_m">Search</button>

      </form>

<!-- You can't use two identical modifiers with different values simultaneously -->

<form class="search-form search-form_theme_islands search-form_theme_lite">

<input class="search-form__input">

<button class="search-form__button search-form__button_size_s search-form__button_size_m"> Search </button>

</form>

     Ejemplo

BEM solventa los problemas de especifidad, y la diferenciación de componentes y atributos, reduciendo al selector más intuitivo y simple: la clase.

El sistema tradicional no funciona para proyectos a gran escala. Siempre vas a tener algún problema de especifidad.

BEM, como he dicho, solventa los problemas a la hora de organizar los componentes. Si lo mezclas con la magia de los preprocesadores es posible una organización muy sólida del proyecto, y la creación de componentes muy personalizables e independientes.

       Opinión personal / conclusión

     Que es StyleLint

1. Un poderoso y moderno linter CSS 

2. hace cumplir las convenciones

3. evita errores en las hojas de estilo.

     Linter

     Características

• Captura de errores: colores hexadecimales no válidos, colores indistinguibles o sobreescritura de propiedades por sus shorthand.
• Aplica las mejores prácticas:  manteniendo la especificidad baja o rechazando los prefijos del proveedor en su código fuente.
• Controla qué idiomas se pueden utilizar: whitelist de unidades, propiedades y funciones específicas, o no permitir determinados tipos de selectores.
• Aplica las convenciones de estilo de código:   verificando el espaciado, la sangria, saltos de linea...etc

Más de ciento cincuenta reglas: Incluyendo:

       Example output

     Preventing Errores

#container .foo {
  top: 10px;
}

…

.foo {
  top: 0;
}

      no-descending-specificity

 /* Expected selector .foo to come before #container .foo */

.foo {
  opacity: 1;
}

  /* Unsupported in IE 8 */

      no-unsupported-browser-features

.foo {
  display: inline;
  width: 100px;
}

      declaration-block-no-ignored-properties

  /* Unexpected width with display: inline */

      no-shorthand-property-overrides