Bem Naming Rules
The main purpose of the naming convention is to make sense of the names so that they are as informative as possible for the developer. BEM stands for block, element and modifier. This is a naming convention that divides the user interface into small, reusable components that prepare us for changes in the design of our websites. The BEM approach ensures that everyone involved in developing a website works with a single code base and speaks the same language. The correct name prepares you for changes in the design of the website. Important: Element elements do not exist in the BEM methodology. Naming rules do not allow you to create element elements, but you can nest elements within each other in the DOM tree. The BEM methodology provides an idea for creating naming rules and implements this idea in its canonical CSS selector naming convention. However, there are also a number of alternative systems in the world of web development based on BEM principles. Some developers don`t pay as much attention to naming.
They say there is not enough time to think about what to call each class. This may be true, but in the long run, poor quality code takes much longer. Thank you David! I`m just good at canonical BEM naming: Why is naming important? Well, elements named without a naming structure or convention result in unmaintained CSS. Of course, no one will turn your arm if you break the rules of the BEM. You can always write a CSS selector like this: It`s just a different naming approach for the same type of problem. It`s pretty similar, but you`re just more specific in terms of dependencies and keep the specificity flatter. The default name for BEM adopts the following structure Okay, we now understand that the “E” in BEM is an element. Naming elements is as simple as naming blocks. Not to hack Samuel here, but his feelings are shared by a lot of people, so this is a good example. They see the BEM, and they simply reject it. If you don`t want to like BEM, that`s fine, but I think it would be hard to argue that it`s a bad idea to have a set of rules that help understand and keep CSS maintainable. In addition, the scope of the BEM methodology is not limited to the HTML and CSS technologies described in this document.
If you like BEM concepts but not syntax, there are other options, such as SUIT: github.com/suitcss/suit/blob/master/doc/naming-conventions.md We have this name pretty much in our pocket. But what about blocks or elements that differ only slightly? What if we had to change the whole navigation? How would we name the item if we sometimes needed white or transparent navigation on our website? These questions could also be for examples such as a red or blue button. These are all modifications of the block. Modifiers extend the style of blocks and elements. This extension can be quickly recognized by the way modifiers are named. This naming scheme restricts the use of mixtures because it makes it impossible to determine which block or element a modifier belongs to. Well, there are several naming conventions you might want to consider, but I hope this article will give you enough motivation to try BEM. Since youtube-header is the block, the naming convention of its elements can be written as follows: There are alternative solutions based on the BEM naming convention. The BEM designation may not be as clean and simple, but it does guarantee foolproof encapsulation. BEM stands for block, element and modifier. This is a CSS naming convention for writing cleaner, more readable CSS classes. The main idea of the naming convention is to make the names of CSS selectors as informative and clear as possible.
This will help simplify code development and debugging, and will also solve some of the problems that web developers face. CSS is a vague specification. Unique design goals included compactness, device independence, and shared authority between publisher and user (which turned out to be of little importance in the long run). Nothing in BEM contradicts these principles in any way. BEM simply adds “cooperative componentization” to the css: the rules are logically grouped together, and each group adheres to a common set of strict constraints on the construction of the selector. How do you decide what a block is? True, the entire page is not a single block, but how do you decide how to unmount it? How do you name the elements whose sole purpose is to set up CSS hacks/features? Imagine that you have a heroic element that contains only a title and a slogan for the eye as presumed children. You`d like your classes to be .hero, .hero__headline, and .hero__tagline, but you needed a few intermediate elements to achieve a design goal (e.g., packaging, a pre-flexbox container for vertical centering – use your imagination). These elements need styles, so you have to write .hero__wrapper__container__headline? Sometimes I do, but I also see it as a reductio ad absurdam for the whole convention.
Other times, I grope and say, “The wrapper element is not so much a child element of the parent as part of the block implementation, so I call it a .hero wrapper and I reduce the length of the child selectors of one.” But this dilutes the naming convention.