BEM Methodology in short

BEM Methodology in short

Shubham Hirap Shubham Hirap

Shubham Hirap

Frontend Developer | Deloitte USI | React.JS | JavaScript

发布日期: 2021年7月30日
+ 关注

Introduction

I am working as a React frontend developer so yesterday I got introduced to a new concept BEM Methodology. It makes developers life easy who has to maintain styles for websites with CSS. I was struggling with naming conventions every time working with CSS. As the project grows, without proper structure, maintaining structure is really hard. BEM's naming convention/methods help to maintain CSS.

This methodology is created developed by the team at Yandex, helping developers to understand the relationship between HTML and CSS is the main purpose behind this.

What is BEM?

In the introduction part, you read BEM too many times. I know you are thinking, what is the BEM?

BEM is a short form for Block, Element, and Modifiers. now we will see what is the block, what is the element, and what modifiers are with an example.

consider I want to develop a Header component. The block, in this case, is Header and the element is the brand logo, nav links/ nav-menu, buttons, in shorts some small components like button, link, and logo image are the elements in this situation. In the BEM naming convention block and elements are connected with two underscores. Now we will go for modifiers, suppose there are different types of buttons like a default button, a small button, a large button, and a disabled button we call this modifier. we connect modifiers with elements with two dashes.

an example,

领英推荐

.navbar__button--small{
  ......
 }


In the above example, the navbar is a block that is connected to the button element and small is the modifier is connected to the element with two dashes. I think this BEM thing is clear now.

Why one should use BEM?

Because of this naming convention system, everyone from a development team can easily work with the CSS and easily recognize which one is a block, element, and modifier just by looking at the code so we are not running into any conflicts. Basically, BEM provides a proper structure to the project so one can easily maintain the structure.

Hopefully, you like this article. feedback from your side is appreciated



要查看或添加评论，请登录

Shubham Hirap的更多文章

  • Bundler in React.js
    2024年6月17日

    Bundler in React.js

    Today I was trying to read and watch some videos about the bundler specifically about the "parcel" and suddenly I one…

  • React Hook: useCallback()
    2023年2月22日

    React Hook: useCallback()

    useCallback() is a React Hook that lets you cache a function definition between re-renders. const cachedFn =…

  • React Hook: useMemo()
    2023年2月13日

    React Hook: useMemo()

    useMemo() Hook "useMemo" is a React Hook that lets you cache the result of a calculation between re-renders…

  • Reducer Method and Some useful examples
    2022年6月7日

    Reducer Method and Some useful examples

    A Reducer() method works on each array element. The final result of running the reducer across all elements of the…

  • Atomic Design Pattern
    2021年8月25日

    Atomic Design Pattern

    Introduction As a React JS Developer, I work on UI components on daily basis. Component reusability is the main…

    1 条评论
  • Javascript Arrow function
    2020年11月6日

    Javascript Arrow function

    An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be…

    2 条评论

社区洞察

其他会员也浏览了