BEM – devfrontend.info

Ressources en ligne sur BEM, Block Element Modifier

Une liste de ressources qui m’ont aidé à comprendre la méthodologie BEM:

Example perso avec un store locator

Regarder notamment le principe d’imbrication de plusieurs BLOCKs et la présence de la classe helper .is-store--china (comment elle est utilisée dans le code LESS ensuite).

Code HTML

<div
    id="storeLocator"
    class="store-locator is-store--china">
        <div class="store-locator__map">
            <div id="mapControl" class="map-control">
                <input
                    type="text"
                    id="autocompleteField"
                    class="map-control--autocomplete__field"
                    placeholder="Enter a place">
                <button
                    id="geolocationButton"
                    class="map-control--geolocation__button">
                    <span>Me localiser</span>
                </button>
            </div>
            <div id="map" class="map">
                <?php // MUST remain empty; here comes the map ?>
            </div>
        </div>
        <div class="store-locator__result">
            <div class="result-filter"></div>
            <div class="result-list">
                <p>Result...</p>
            </div>
        </div>
    </div>
</div>

<div

id="storeLocator"

class="store-locator is-store--china">

<input

type="text"

id="autocompleteField"

class="map-control--autocomplete__field"

placeholder="Enter a place">

<button

id="geolocationButton"

class="map-control--geolocation__button">

<span>Me localiser</span>

</button>

</div>

<?php // MUST remain empty; here comes the map ?>

</div>

<p>Result...</p>

</div>

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

…mais, ATTENTION: ce n’est pas comme ça que vous devez organiser votre code. Voir la section suivante.

.store-locator {} /* store-locator est un nouveau BLOCK */
.store-locator__map {} /* la map est un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

    .map-control {} /* map-control est un nouveau BLOCK, enfant du BLOCK store-locator */
        .map-control--autocomplete {} /* est un MODIFIER (autocomplete est un type/genre) de map-control comme la femme est un type/genre de personne */
            .map-control--autocomplete__field {} /* field est ELEMENT (une partie) de autocomplete */
        .map-control--geolocation {} /* est un MODIFIER (geolocation est un autre type/genre) de map-control */
            .map-control--geolocation__button {} /* button est un ELEMENT (une partie) de geolocation */

    .map {} /* map est un nouveau BLOCK, enfant du BLOCK store-locator */

.store-locator__result {} /* les result sont un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

    .result-filter {} /* result-filter est un nouveau BLOCK, enfant du BLOCK store-locator */

    .result-list {} /* result-list est un nouveau BLOCK, enfant du BLOCK store-locator (c'est une liste de boutiques ou de retailers mais, par principe d'abstraction, on ne le précise pas */

.store-locator {} /* store-locator est un nouveau BLOCK */

.store-locator__map {} /* la map est un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

.map-control {} /* map-control est un nouveau BLOCK, enfant du BLOCK store-locator */

.map-control--autocomplete {} /* est un MODIFIER (autocomplete est un type/genre) de map-control comme la femme est un type/genre de personne */

.map-control--autocomplete__field {} /* field est ELEMENT (une partie) de autocomplete */

.map-control--geolocation {} /* est un MODIFIER (geolocation est un autre type/genre) de map-control */

.map-control--geolocation__button {} /* button est un ELEMENT (une partie) de geolocation */

.map {} /* map est un nouveau BLOCK, enfant du BLOCK store-locator */

.store-locator__result {} /* les result sont un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

.result-filter {} /* result-filter est un nouveau BLOCK, enfant du BLOCK store-locator */

.result-list {} /* result-list est un nouveau BLOCK, enfant du BLOCK store-locator (c'est une liste de boutiques ou de retailers mais, par principe d'abstraction, on ne le précise pas */

Organisation du code LESS en composants/BLOCKs

Valable pour SASS/SCSS également.

L’organisation du code en parties représentant chacune un block/composant permet le respect du principe d’inception: pas plus de 3 niveaux d’imbrication (à l’exception de la déclaration de :pseudo-classes).

.store-locator {
    display: block;

    &__map {
        height: 100%;
    }

    &__result {}
}

.service-center {}

.boutique-selector {}

.map-control {
    max-width: 50%;

    &--autocomplete {

        &__field {}
    }

    &--geolocation {

        &__button {

            &:hover {}
        }
    }
}

.map {
    height: 100%;
}

.store-locator {

display: block;

&__map {

height: 100%;

}

&__result {}

}

.service-center {}

.boutique-selector {}

.map-control {

max-width: 50%;

&--autocomplete {

&__field {}

}

&--geolocation {

&__button {

&:hover {}

}

.map {

height: 100%;

}

Autre exemple, avec du HTML cette fois:

Le h3 class="store__name" s’affichera:

en rouge si la classe store--is-boutique est présente sur l’élément parent
en gris si la classe store--is-retailer est présente sur l’élément parent

Les autres styles appliqués au h3 class="store__name" seront affectés aux deux.

<a class="store store--is-retailer" href="#">
    <h3 class="store__name">Bartorelli 1882 Spa</h3>

1 2	<a class="store store--is-retailer" href="#"> <h3 class="store__name">Bartorelli 1882 Spa</h3>

.store {

    &--is-boutique & {
        &__name {
            color: #c40d2e;
        }
    }

    &--is-retailer & {
        &__name {
            color: #555555;
        }
    }

    &__name {
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
    }

.store {

&--is-boutique & {

&__name {

color: #c40d2e;

}

&--is-retailer & {

&__name {

color: #555555;

}

&__name {

font-weight: 700;

font-size: 16px;

text-transform: uppercase;

}

Exploitation d’une classe helper `.is-store--china`

L’organisation du code en parties représentant chacune un block/composant est reprise. La classe helper s’intercale au besoin.

Pour <div class="store-locator">, toutes les bordures seront pink.

Pour <div class="store-locator is-store--china">, toutes les bordures seront red.

.store-locator {
    border: 12px solid pink;
    &.is-store--china {
        border: 12px solid red;
    }
    &__map {
        border: 12px solid pink;
        .is-store--china & {
            border: 12px solid red;
        }
    }
}

.map-control {
    border: 12px solid pink;
    &--autocomplete {
        &__field {
            border: 6px solid pink !important;
        }
    }
    .is-store--china & {
        border: 12px solid red;
        &--autocomplete {
            &__field {
                border: 6px solid red !important;
            }
        }
    }
}

.store-locator {

border: 12px solid pink;

&.is-store--china {

border: 12px solid red;

}

&__map {

border: 12px solid pink;

.is-store--china & {

border: 12px solid red;

}

.map-control {

border: 12px solid pink;

&--autocomplete {

&__field {

border: 6px solid pink !important;

}

.is-store--china & {

border: 12px solid red;

&--autocomplete {

&__field {

border: 6px solid red !important;

}

Ressources en ligne:

Sass Techniques from the Trenches (version PDF), SUIT, BEM CSS conventions and the power of ampersand. There are loads of articles out there about how to do CSS architectural things like BEM, and articles about the features of Sass, but I think this article does the best job I’ve seen yet of linking between the two and showing how the features of Sass help you right good clean CSS code.

Source: Sass Snippets: The Almighty Ampersand

Almost Profound — Sass Snippets_ The Almighty Ampersand (PDF)

SCSS

.unicorn {
  background-color: blue;
  &:hover {
    outline: 2px solid yellow;
  }
  &.pink {
    background-color: pink;
    &wat {
      color: red;
    }
    &:hover {
      outine: 2px solid green;
    }
  }
}

.unicorn {

background-color: blue;

&:hover {

outline: 2px solid yellow;

}

&.pink {

background-color: pink;

&wat {

color: red;

}

&:hover {

outine: 2px solid green;

}

CSS output:

.unicorn {
  background-color: blue;
}
.unicorn:hover {
  outline: 2px solid yellow;
}
.unicorn.pink {
  background-color: pink;
}
.unicorn.pinkwat {
  color: red;
}
.unicorn.pink:hover {
  outine: 2px solid green;
}

.unicorn {

background-color: blue;

}

.unicorn:hover {

outline: 2px solid yellow;

}

.unicorn.pink {

background-color: pink;

}

.unicorn.pinkwat {

color: red;

}

.unicorn.pink:hover {

outine: 2px solid green;

}

The trailing Ampersand

SCSS

.unicorn {
  .set-one & {
    display: none;
  }
}

.button--large {
  .sidebar & {
    font-size: 80%;
  }
}

.unicorn {

.set-one & {

display: none;

}

.button--large {

.sidebar & {

font-size: 80%;

}

CSS output

.set-one .unicorn {
  display: none;
}

.sidebar .button--large {
  font-size: 80%;
}

.set-one .unicorn {

display: none;

}

.sidebar .button--large {

font-size: 80%;

}

SCSS

@mixin highlight() {
  color: coral;
  .sub-nav &, 
  .active &, 
  .sidebar &  {
    background-color: gold; 
  }
}
li a { @include highlight; }

@mixin highlight() {

color: coral;

.sub-nav &,

.active &,

.sidebar & {

background-color: gold;

}

li a { @include highlight; }

CSS output

li a {
  color: coral;
}
.sub-nav li a, .active li a, .sidebar li a {
  background-color: gold;
}

li a {

color: coral;

}

.sub-nav li a, .active li a, .sidebar li a {

background-color: gold;

}

A Much Simpler @at-Root

SCSS

// Previous Markup (Sass 3.3rc1)
.speech-bubble{
  color: purple;
   @at-root #{&}__header{
    color: orange;
  }
   @at-root #{&}__text{
    color: black;
     @at-root #{&}--link{
      color: green;
    }
  }
}

// New Markup (Sass 3.3rc3)
.speech-bubble{
  color: purple;
   &__header{
    color: orange;
  }
   &__text{
    color: black;
     &--link{
      color: green;
    }
  }
}

// Previous Markup (Sass 3.3rc1)

.speech-bubble{

color: purple;

@at-root #{&}__header{

color: orange;

}

@at-root #{&}__text{

color: black;

@at-root #{&}--link{

color: green;

}

// New Markup (Sass 3.3rc3)

.speech-bubble{

color: purple;

&__header{

color: orange;

}

&__text{

color: black;

&--link{

color: green;

}

CSS output

.speech-bubble{
  color: purple; 
}
.speech-bubble__header{
    color: orange; 
}
.speech-bubble__text{
    color: black; 
}
.speech-bubble__text--link{
      color: green; 
}

.speech-bubble{

color: purple;

}

.speech-bubble__header{

color: orange;

}

.speech-bubble__text{

color: black;

}

.speech-bubble__text--link{

color: green;

}

The double Ampersand

SCSS

.column--half {
  color: dimgrey;
  & + & {
    margin-left: 30px;
  }
}

.column--half {

color: dimgrey;

& + & {

margin-left: 30px;

}

CSS output

.column--half {
  color: dimgrey;
}
.column--half + .column--half {
  margin-left: 30px;
}

.column--half {

color: dimgrey;

}

.column--half + .column--half {

margin-left: 30px;

}

Articles récents

Catégories

Archives

Méta

Étiquette : BEM

[SASS][LESS] BEM, Block Element Modifier, astuces et bonnes pratiques

Ressources en ligne sur BEM, Block Element Modifier

Example perso avec un store locator

Code HTML

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

Organisation du code LESS en composants/BLOCKs

Autre exemple, avec du HTML cette fois:

Exploitation d’une classe helper `.is-store--china`

[SASS][BEM] @at-root et ampersand

SCSS

CSS output:

The trailing Ampersand

SCSS

CSS output

SCSS

CSS output

A Much Simpler @at-Root

SCSS

CSS output

The double Ampersand

SCSS

CSS output

Ressources en ligne sur BEM, Block Element Modifier

Example perso avec un store locator

Code HTML

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

Organisation du code LESS en composants/BLOCKs

Autre exemple, avec du HTML cette fois:

Exploitation d’une classe helper .is-store--china

SCSS

CSS output:

The trailing Ampersand

SCSS

CSS output

SCSS

CSS output

A Much Simpler @at-Root

SCSS

CSS output

The double Ampersand

SCSS

CSS output

Exploitation d’une classe helper `.is-store--china`