CSS Naming Conventions

Hello Everyone!
Hope you guys doing very well.

I’m Happy Patel. I’m UI Developer and UI/UX designer having a 2 years of industry experience. Writing my first blog, hope you guys enjoy reading and get some fruitful information from it.

So let’s begin with the topic. Though it’s my first blog I thought let’s start from very basic and important thing while building website using Html/CSS. So the topic is “CSS Naming Conventions”.

Some people are using any inconsequential classes name while writing css. It is very important to use meaningful class name for each and every section of the website. For that we have some css naming standards which we can use in our project like BEM Standards which is called Block, Elements, and Modifier.

Let’s take an example to understand BEM Standards –

In the above Image we have two sections which can be consider as a BLOCKS

1. Header
2. Banner section

Under the sections we have multiple ELEMENTS

1. Logo
2. Nav, Nav Items
3. Banner Content

And for the MODIFIERS, we can say it a Kind of flag which can be used to change appearance or behavior of the Block or Elements

Let’s move on how we can define css class name for the BEM.

// For the Block we can use simply Block name like – header, sidebar, content, checkbox etc.
.block {
}

// For the Elements we can use 2 underscores 
.block__element {
}

// For the Modifiers we can use 2 dashes 
.block—modifier {
}
Or
.block__element—modifier {
}

Let’s take a look on how we can implement above example –

<header class="header">
        <div class="header__logo"></div>
        <ul class="header__nav">
            <li class="header__item"></li>
        </ul>
    </header>
    <section class="hero-banner">
        <div class="hero-banner__content">
            <h1 class="content__heading"></h1>
            <h1 class="content__heading heading--small"></h1>
            <p class="content__text"></p>
        </div>
    </section>

So guys I would like to say one thing is that it’s not compulsory to use same structure to design above layout it can be vary as per individual ideas but we can organize things like this in the proper manner so that everyone can understand website layout.

Hope you guys like my blog.

Happy Designing!