Share
En este tutorial, aprenderemos cómo usar PostCSS para hacer que el desarrollo del estilo BEM / SUIT CSS sea más fácil y más eficiente..
Estas dos metodologías presentan una convención de nomenclatura para las clases que hace que sea más fácil mantener sus estilos estrechamente orientados a la función, y ayuda a otros desarrolladores a reconocer el propósito de varias clases solo por el nombre que reciben.
BEM fue el precursor de este tipo de metodología de nomenclatura de clases, creada por Yandex. La metodología SUIT es un enfoque basado en BEM, pero con algunos ajustes y adiciones hechas por Nicholas Gallagher. SUIT hace todo lo que BEM hace, pero para muchos usuarios se considera una mejora.
Trabajar con estos métodos definitivamente ayuda a producir CSS mejor y más estructurado. Sin embargo, la parte difícil es que puede volverse tedioso al escribir manualmente los nombres de clase requeridos en esta estructura, y hacer un seguimiento de cómo las clases se interrelacionan puede convertirse en un dolor de cabeza..
El complemento postcss-bem de Malte-Maurice Dreyer soluciona estos problemas mediante una combinación de accesos directos y anidamiento, que aprenderá a usar a medida que avanzamos en este tutorial..
Pero primero, veamos brevemente los métodos BEM y SUIT, para asegurarnos de tener una idea clara de los beneficios de usar el complemento postcss-bem, y de la forma en que se usa..
En bem bloques son trozos de alto nivel de un diseño; Los bloques de construcción del sitio está hecho. Un bloque debe ser una parte de su sitio que sea independiente de otras piezas y, en teoría, podría ubicarse en cualquier lugar de su diseño, incluso anidado dentro de otro bloque..
Por ejemplo, los "bloques" de formularios de búsqueda en su sitio podrían usar la clase .Formulario de búsqueda.
Un elemento En BEM es una subsección dentro de un bloque. Se significan añadiendo dos guiones bajos __ separador y un nombre de elemento al nombre de bloque principal.
Por ejemplo, un formulario de búsqueda puede incluir encabezado, campo de texto y elementos de botón de envío. Sus nombres de clase podrían ser .search-form__heading, .search-form__text-field y .search-form__submit-button respectivamente.
UNA modificador se aplica a un bloque o elemento para indicar un cambio en su presentación o un cambio en su estado. Se significan agregando un separador y un nombre de modificador al bloque o elemento en cuestión.
Los documentos oficiales del sitio BEM establecen que los separadores modificadores deben ser un solo guión bajo _. Sin embargo, la convención "similar a BEM" de las Directrices CSS por Harry Roberts emplea dos guiones -- y es probablemente más utilizado y conocido que la convención oficial de BEM.
Por ejemplo, en un diseño es posible que desee presentar formularios de búsqueda avanzada de forma diferente a los formularios de búsqueda regulares, y por lo tanto crear la clase modificadora .search-form_advanced (BEM oficial) o .formulario de búsqueda - avanzado (Como BEM).
En otro ejemplo, es posible que desee cambiar la apariencia del formulario debido a un cambio en el estado, como si se acaba de enviar contenido no válido y, por lo tanto, crear el modificador .search-form_invalid (BEM oficial) o .formulario de búsqueda - inválido (Como BEM).
SUIT comprende Utilidades y Componentes. Dentro de los componentes puede haber Modificadores, Descendientes y Estados.
SUIT utiliza una combinación de funda pascal (PascalCase), funda camel (camelCase) y guiones. Sus convenciones imponen un límite en el número a veces confuso de guiones y guiones bajos que pueden aparecer en BEM. Por ejemplo, la clase BEM. .search-form__text-field sería .SearchForm-textField en traje.
Utilidades Manejan la estructura y el estilo posicional, y están escritos de tal manera que pueden aplicarse en cualquier parte de un componente. Ellos tienen el prefijo tu- y escrito en funda de camello. Por ejemplo, .u-clearFix.
UNA componente en traje toma el lugar de una bloquear en BEM. Los componentes siempre se escriben en el caso de pascal y son solo una parte del SUIT que usa el caso de pascal, lo que facilita su identificación. Por ejemplo, .Formulario de búsqueda.
Los componentes pueden opcionalmente tener un prefijo con un espacio de nombres y un solo guión nmsp- para asegurar que se eviten los conflictos, por ejemplo. .mina-SearchForm.
UNA descendiente en SUIT reemplaza a elemento en BEM. Utiliza un solo guión. - y está escrito en funda de camello. Por ejemplo .SearchForm-head, .SearchForm-textField y .SearchForm-submitButto.
SUIT utiliza modificadores Al igual que BEM, sin embargo, su papel está más controlado. Un modificador SUIT generalmente solo se aplica directamente a un componente, no a un descendiente. Tampoco debe utilizarse para representar cambios de estado, ya que SUIT tiene una convención de nombres dedicada para los estados.
Los modificadores están escritos en un caso de camello y están precedidos por dos guiones --. Por ejemplo, .SearchForm - avanzado.
Estado las clases se pueden utilizar para reflejar cambios en el estado de un componente. Esto les permite diferenciarse claramente de los modificadores, que reflejan la modificación de la apariencia de la base de un componente independientemente del estado. Si es necesario, un estado también se puede aplicar a un descendiente.
Los estados tienen el prefijo es- y están escritos en funda de camello. También se escriben siempre como clases contiguas. Por ejemplo .SearchForm.is-invalid.
Ahora que tiene lo esencial de BEM y SUIT bajados, es hora de configurar su proyecto.
Necesitará un proyecto vacío usando Gulp o Grunt, según sus preferencias. Si aún no tiene una preferencia por uno u otro, recomiendo usar Gulp, ya que necesitará menos código para lograr los mismos fines, por lo que le resultará un poco más sencillo trabajar con.
Puede leer acerca de cómo configurar proyectos Gulp o Grunt para PostCSS en los tutoriales anteriores
respectivamente.
Sin embargo, si no desea configurar manualmente su proyecto desde cero, puede descargar los archivos de origen adjuntos a este tutorial y extraer el proyecto de inicio provisto de Gulp o Grunt en una carpeta de proyecto vacía. Luego, con un terminal o indicador de comando apuntando a la carpeta, ejecute el comando npm instalar.
A continuación, deberá instalar el complemento postcss-bem. También instalaremos un complemento que puede funcionar bastante bien: postcss-nested.
Ya sea que esté utilizando Gulp o Grunt, ejecute el siguiente comando dentro de la carpeta de su proyecto:
npm instala postcss-bem postcss-anidado --save-dev
Ahora estamos listos para cargar los complementos en su proyecto..
Si está utilizando Gulp, agregue estas variables debajo de las variables que ya están en el archivo:
Accentsconagua
var bem = require ('postcss-bem'); var anidado = requiere ('postcss-anidado');Ahora agregue cada uno de esos nuevos nombres de variables en su procesadores formación:
procesadores var = [bem, anidados];
Haz una prueba rápida de que todo está funcionando ejecutando el comando trago css luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.
Si estás usando Grunt, actualiza el procesadores objeto, que está anidado bajo la opciones objeto, a lo siguiente:
procesadores: [require ('postcss-bem') (), require ('postcss-nested') ()]Haz una prueba rápida de que todo está funcionando ejecutando el comando Grueso Postcss luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.
Está bien, estás listo para ir Aprendamos a generar estructura BEM y SUIT..
Puede haber un poco de inmanejabilidad al desarrollarse en la estructura BEM o SUIT al escribir el código manualmente, ya que repetir continuamente los mismos identificadores en los nombres de las clases puede volverse aburrido, y hacer un seguimiento de qué elementos y descendientes pertenecen a qué bloques y componentes pueden confundirse..
Sin embargo, cuando utiliza postcss-bem, resulta fácil dar un sentido a la estructura de su código de un vistazo, y la repetición de los nombres de clase a máquina se vuelve prácticamente inexistente..
A pesar de su nombre, de manera predeterminada, postcss-bem se emitirá según la sintaxis de SUIT en lugar de BEM. Puede generar la sintaxis BEM, que veremos más adelante, pero el complemento está diseñado principalmente para generar SUIT, por lo que comenzaremos con la sintaxis de SUIT.
Para crear un componente, use la sintaxis @component ComponentName ….
Prueba esto añadiendo un Formulario de búsqueda componente a su archivo "src / style.css":
@component SearchForm padding: 0; margen: 0;
Compílalo y tu código resultante debería ser:
.SearchForm padding: 0; margen: 0;
Para crear un descendiente, use la sintaxis. @ descendiente descendente … anidado dentro del componente padre.
Añadir un descendiente llamado campo de texto dentro de tu Formulario de búsqueda componente como tal:
@component SearchForm padding: 0; margen: 0; / * Nido descendiente bajo el componente * / @descendent textField border: 1px solid #ccc;
Después de compilar, deberías ver:
.SearchForm padding: 0; margen: 0; .SearchForm-textField border: 1px solid #ccc;
Crear un modificador a un componente con la sintaxis. @ nombre del modificador …, Anidado dentro del componente que efectúa. Normalmente, los modificadores deben colocarse en la parte superior de su componente, sobre cualquier descendiente y estado.
Añadir un modificador llamado avanzado para usted Formulario de búsqueda Componente con el siguiente código:
@component SearchForm padding: 0; margen: 0; / * Por lo general, coloca los modificadores sobre los descendientes * / @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc;
Recompila tu código y deberías ver tu nuevo avanzado modificador de componente:
.SearchForm padding: 0; margen: 0; .SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc;
Los estados se crean a través de la sintaxis. @ cuando el nombre … y puede ser anidado dentro de un componente o un descendiente.
Añadir un estado llamado inválido para usted campo de texto descendiente usando este código:
@component SearchForm padding: 0; margen: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; / * Esto crea un estado para el descendiente del campo de texto * / @ cuando no es válido border: 1px solid red;
Ahora cuando compiles tu código verás que contiene tu nuevo inválido estado:
.SearchForm padding: 0; margen: 0; .SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc; .SearchForm-textField.is-invalid border: 1px solid red;
Puede nombrar sus componentes y todos los descendientes, modificadores y estados anidados dentro de ellos, al rodearlos de @ nombre de espacio de nombres de componente …. Puede, si lo desea, envolver toda su hoja de estilos con este espacio de nombres para que todas sus clases tengan el prefijo automáticamente.
Prueba esto envolviendo todo tu código hasta ahora con @ componente-namespace mine …:
@ componente-namespace mine @component SearchForm padding: 0; margen: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; @cuando no válido borde: 1px rojo sólido;
Después de compilar, verá que ahora cada uno de sus componentes tiene el prefijo mía-:
.mine-SearchForm padding: 0; margen: 0; .mine-SearchForm - avanzado padding: 1rem; .mine-SearchForm-textField border: 1px solid #ccc; .mine-SearchForm-textField.is-invalid border: 1px solid red;
Las utilidades se crean con la sintaxis. @utility utilityName …. Recordará que cuando configuró su proyecto, instaló el complemento anidado postcss. Hicimos esto ya que puede ser muy útil para usar al unísono con postcss-bem, como verás en este ejemplo donde creamos un clearFix utilidad:
@utility clearFix &: before, &: after content: ""; pantalla: tabla; &: después de borrar: ambos; / * Si es compatible con IE 6/7 * / * zoom: 1;
Después de agregar el código anterior, compile y verá que se ha creado esta nueva utilidad:
.u-clearFix / * Si es compatible con IE 6/7 * / zoom: 1; .u-clearFix: antes, .u-clearFix: después de contenido: ""; pantalla: tabla; .u-clearFix: after clear: both;
Para activar la salida de sintaxis BEM en postcss-bem, pase la opción estilo: 'bem' en tu Gulpfile o Gruntfile así:
/ * Gulpfile * / var processors = [bem (style: 'bem'), anidado]; / * Gruntfile * / processors: [require ('postcss-bem') (style: 'bem'), require ('postcss-nested') ()]Por defecto, postcss-bem usará el separador oficial para un modificador de un solo guión bajo. _. Si es importante para su proyecto, use el separador más común de dos guiones -- en cambio, puede cambiar la configuración del complemento postcss-bem yendo a la carpeta node_modules / postcss-bem de su proyecto, abriendo index.js, ubicando la línea 15 y cambiando esto
bem: separators: namespace: '-', descendent: '__', modifier: '_'
… a esto:
bem: separators: namespace: '_', descendent: '__', modifier: '-'
Debido a que un "bloque" en BEM se correlaciona con un "componente" en SUIT, use la sintaxis @componente nombre-bloque … para generar un bloque.
Para crear un Formulario de búsqueda bloque agrega este código:
@component search-form padding: 0; margen: 0;
Luego compila y deberías ver:
.formulario de búsqueda relleno: 0; margen: 0;
Como un "elemento" en BEM se correlaciona con un "descendiente" en SUIT, se pueden crear con la sintaxis @ nombre del elemento pendiente … anidado dentro del bloque padre.
Para crear un campo de texto elemento agregar lo siguiente:
@component search-form padding: 0; margen: 0; @descendent text-field border: 1px solid #ccc;
En la compilación, verás que tu nuevo elemento ha sido creado:
.formulario de búsqueda relleno: 0; margen: 0; .search-form__text-field border: 1px solid #ccc;
Aunque BEM permite modificadores tanto para bloques como para elementos, el complemento postcss-bem solo los procesará si se anidan dentro de bloques y no elementos, debido a la convención de modificadores SUIT que se aplican a componentes que no son descendientes. Se pueden crear con la sintaxis. @ nombre del modificador …, anidado dentro de su bloque padre.
Añadir un avanzado modificador a tu Formulario de búsqueda componente como tal:
@component search-form padding: 0; margen: 0; @modifier advanced padding: 1rem; @descendent text-field border: 1px solid #ccc;
Y en la compilación cederá:
.formulario de búsqueda relleno: 0; margen: 0; .search-form_advanced padding: 1rem; .search-form__text-field border: 1px solid #ccc;
Mientras que en modo BEM el @utilidad y @cuando las sintaxis no se compilarán en nada, dado que BEM no usa utilidades o estados.
Sin embargo, aunque no es generalmente parte de BEM, el @ componente-espacio de nombres la sintaxis seguirá funcionando si desea utilizarla en su hoja de estilo BEM. Prefijará tus clases con nombre--:
.mío - formulario de búsqueda relleno: 0; margen: 0; .mine - search-form_advanced padding: 1rem; .mine - search-form__text-field border: 1px solid #ccc;
Ahora que sabe todo acerca de cómo atajar el desarrollo de su BEM y SUIT, y facilitar el proceso general. Vamos a resumir todo lo que hemos cubierto:
@componente, @descendiente, @modificador etc.@ nombre de espacio de nombres de componente … A continuación, veremos otra excelente manera de aprovechar PostCSS, y es armando un conjunto de herramientas de taquigrafía y atajos que podemos utilizar para hacer que nuestra codificación sea más rápida y eficiente..
Te veré allá!
