background preloader

BEM (Block Element Modifier)

Facebook Twitter

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

(source : CSS Architecture Block-Element-Modifier (BEM) - SitePoint. The following is an extract from our book, CSS Master, written by Tiffany Brown.

CSS Architecture Block-Element-Modifier (BEM) - SitePoint

Copies are sold in stores worldwide, or you can buy it in ebook form here. BEM, or Block-Element-Modifier, is a methodology, a naming system, and a suite of related tools. Created at Yandex, BEM was designed for rapid development by sizable development teams. In this section, we’ll focus on the concept and the naming system. BEM methodology encourages designers and developers to think of a website as a collection of reusable component blocks that can be mixed and matched to create interfaces. Figure 2.3. Blocks can contain other blocks. Figure 2.4. Syntaxe BEM : convention de nommage CSS. BEM 101. The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff.

BEM 101

An Introduction to the BEM Methodology. Let’s face it, we all want to make our code easier to read.

An Introduction to the BEM Methodology

Doing so helps us work more quickly and efficiently, and when others work with us we can maintain clarity and coherent semantics. These days there seem to be so many standards and terms in the CSS world: OOCSS, SMACSS, BEM and more! These are all approaches for improving CSS structure, and today we are going to cover BEM. BEM stands for Block Element Modifier. It suggests a structured way of naming your classes, based on properties of the element in question. The block is the container or context where the element finds itself. The block element forms the root of the class and will always go first.

‘Why BEM?’ for CSS in a nutshell. A New Front-End Methodology: BEM. This article is the sixth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community.

A New Front-End Methodology: BEM

The first article covered PrefixFree1; the second introduced Foundation2, a responsive framework; the third presented Sisyphus.js3, a library for Gmail-like client-side drafts, the fourth shared with us a free plugin called GuideGuide4 and the fifth presented Erskine Design’s responsive grid generator Gridpak5. Today, we are happy to feature a toolkit devised by Yandex: BEM. BEM stands for “Block”, “Element”, “Modifier”. It is a front-end methodology: a new way of thinking when developing Web interfaces. This article will elaborate on the theory as well as the practice of building websites at Yandex—one of the leading internet companies in Russia.

Due to the length of this article, it was split into three parts: BEM Principles Link. A New Front-End Methodology: BEM (Blocks Reiteration) By Varvara Stepanova BEM stands for “Block”, “Element”, “Modifier”.

A New Front-End Methodology: BEM (Blocks Reiteration)

It is a front-end methodology: a new way of thinking when developing Web interfaces. This article will elaborate on the theory as well as the practice of building websites at Yandex—one of the leading internet companies in Russia. Due to the length of this article, it was split into three parts: Blocks Reiteration The second Menu Block can occur in the Foot Block of a website. Ronan Levesque – CSS et notation BEM. Un des gros points noirs du CSS est la complexité que sa maintenance peut parfois engendrer.

Ronan Levesque – CSS et notation BEM

Cela s’avère surtout vrai pour de gros sites, pour lesquels éditer un simple style peut vite tourner au cauchemar, au risque de casser entièrement votre mise en page. C’est là que des concepts tels que BEM interviennent… Le principe. Bonnes pratiques en CSS : BEM et OOCSS. Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS.

Bonnes pratiques en CSS : BEM et OOCSS

Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus.

Je raconte dans cet article mon propre cheminement dans leurs travaux en espérant qu'il sera utile à l'intégrateur Web autant qu'au développeur JavaScript. Bonnes pratiques en CSS : BEM et OOCSS. Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS.

Bonnes pratiques en CSS : BEM et OOCSS

Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Application de la méthodologie BEM dans le développement HTML/CSS, quelle drôle d’idée ! - ekino. Introduction Vendredi 13 juin, à l’occasion de la Kiwi Party qui s’est déroulée à Strasbourg, Thomas Zilliox nous a présenté la méthodologie BEM et les différentes manières de l’appliquer à nos projets.

Application de la méthodologie BEM dans le développement HTML/CSS, quelle drôle d’idée ! - ekino

Une occasion pour nous d’approfondir cette méthodeet de voir dans quelle mesure elle peut simplifier notre façon de travailler en équipe. Tout d’abord nous reviendrons sur sa définition et ses origines. Nous l’appliquerons ensuite à des cas concrets lors de nos développements CSS. Conseils et bonnes pratiques. Accueil → La plupart du temps, j'utilise simplement des classes délimités par des traits d'union (ex. .foo-bar, pas .foo_bar ou .FooBar), mais dans certaines circonstances, j'utilise la notation BEM (Block, Élément, Modifieur).

Conseils et bonnes pratiques

Petite définition de BEM. BEM — Block Element Modifier.