CSS
Patrones de diseño CSS

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Buscar..


Introducción

Estos ejemplos son para documentar patrones de diseño específicos de CSS como BEM , OOCSS y SMACSS .

Estos ejemplos NO son para documentar marcos CSS como Bootstrap o Foundation .

Observaciones

Estos ejemplos son para documentar metodologías / patrones de diseño específicos de CSS.

Estas metodologías incluyen pero no son exclusivas de las siguientes:

Estos ejemplos NO son para documentar marcos CSS como Bootstrap o Foundation . Si bien puede incluir ejemplos de cómo aplicar uno o más patrones de metodología / diseño de CSS con un marco de trabajo de CSS, estos ejemplos se centran en las metodologías / patrones de diseño con ese marco en particular y en el uso del propio marco.

BEM

BEM significa Blocks, Elements and Modifiers . Es una metodología inicialmente concebida por la compañía de tecnología rusa Yandex , pero que también ganó bastante tracción entre los desarrolladores web estadounidenses y de Europa occidental.

Como lo mismo implica, la metodología BEM se basa en la creación de componentes de su código HTML y CSS en tres tipos de componentes:

  • Bloques: entidades independientes que son significativas por sí mismas

    Los ejemplos son header , container , menu , checkbox y textbox

  • Elementos: parte de los bloques que no tienen un significado independiente y están ligados semánticamente a sus bloques.

    Los ejemplos son: menu item , menu item list item , checkbox caption y header title

  • Modificadores: indicadores en un bloque o elemento, utilizados para cambiar la apariencia o el comportamiento

    Los ejemplos están disabled , highlighted , checked , fixed , size big y color yellow

El objetivo de BEM es mantener la optimización de la legibilidad, la capacidad de mantenimiento y la flexibilidad de su código CSS. La forma de lograrlo, es aplicar las siguientes reglas.

  • Los estilos de bloque nunca dependen de otros elementos en una página
  • Los bloques deben tener un nombre corto y simple y evitar _ o - caracteres
  • Cuando estilice elementos, use selectores de formato blockname__elementname
  • Cuando blockname--modifiername estilo, use selectores de formato nombre de blockname--modifiername y nombre de blockname__elementname--modifiername
  • Los elementos o bloques que tienen modificadores deben heredar todo del bloque o elemento que está modificando, excepto las propiedades que el modificador debe modificar.

Ejemplo de código

Si aplica BEM a los elementos de su formulario, los selectores de CSS deberían tener este aspecto: 

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

El HTML correspondiente debe verse algo como esto: 

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow