What advantages do a CSS naming convention provide?

Naming things correctly in CSS will make your code easier to read and maintain. If you choose to use the BEM naming convention, it will become easier to see the relationship between your design components/blocks just by looking at the markup.

What are the benefits of using the BEM convention in HTML and CSS?


  • Modularity. Block styles are never dependent on other elements on a page, so you will never experience problems from cascading. …
  • Reusability. Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain. …
  • Structure.

Why should we have a naming convention and what are its advantages?

Naming conventions make sure users know how to name digital assets so that filenames or titles are consistent and contain all the right information. They help you store and organise your files. Without them, your asset library can become chaotic and make it much harder to find images when you need them.


What is naming convention in CSS?

Naming rules

Names are written in lowercase Latin letters. Words are separated by a hyphen ( – ). The block name defines the namespace for its elements and modifiers. The element name is separated from the block name by a double underscore ( __ ).

What are the benefits of BEM?

BEM provides a modular structure to your CSS project. Because of its unique naming scheme, we won’t run into conflicts with other CSS names. BEM also provides a relationship between CSS and HTML. Ambiguous names are hard to maintain in the future.

Should I use BEM naming convention?

BEM (which stands for Block-Element-Modifier) is a naming convention standard for CSS class names. It has fairly wide adoption and is immensely useful in writing CSS that is easier to read, understand, and scale.


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.

What is the purpose of a naming convention?

Why use naming conventions? Naming records consistently, logically and in a predictable way will distinguish similar records from one another at a glance, and by doing so will facilitate the storage and retrieval of records, which will enable users to browse file names more effectively and efficiently.

Why is it important to develop a standard naming convention?

Why naming conventions are important:

To keep things running smoothly, it’s important that everyone can find the right items quickly and easily. … But formalizing a standard naming convention for your team’s content means that everyone has a common language to use when referring to projects and campaigns.

THIS IS INTERESTING:  How do I style a navigation menu in WordPress?

How do you create a good naming convention?

File naming

  1. Files should be named consistently.
  2. File names should be short but descriptive (<25 characters) (Briney, 2015)
  3. Avoid special characters or spaces in a file name.
  4. Use capitals and underscores instead of periods or spaces or slashes.
  5. Use date format ISO 8601: YYYYMMDD.
  6. Include a version number (Creamer et al.

How should I name my CSS classes?

How to name css classes

  1. Before to think about class name, choose a good name for HTML elements. …
  2. Put the class name at the lowest possible level. …
  3. Use content to find a name. …
  4. Don’t use content, if the picture speaks louder. …
  5. Try -like suffix for better reuse. …
  6. Don’t use camelCase. …
  7. Try BEM. …
  8. Try more uglier.

What is a CSS modifier?

Modifiers represent different states or styles of classes. They can be used both for blocks or elements.

What is the meaning of naming convention?

A naming convention is a convention (generally agreed scheme) for naming things. Conventions differ in their intents, which may include to: Allow useful information to be deduced from the names based on regularities.

Does bootstrap use BEM?

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. … Spotify, Twitter, and Lyft are some of the popular companies that use Bootstrap, whereas BEM is used by PointsHound, Sainsburys, and Viva Decora.

Is BEM still used?

this methodology has spread wildly among frontend developers around the world; in most cases among developers from CIS countries. BEM is used now in large Russian-language projects (Yandex, Habr) and in several frameworks (react-md).

THIS IS INTERESTING:  Your question: Can SCSS be closed?

Whats is BEM?

The British Empire Medal (BEM) (formally British Empire Medal for Meritorious Service) is a British and Commonwealth award for meritorious civil or military service worthy of recognition by the Crown.

Website creation and design