[html]How do I utilize BEM when writing markup as a beginner web developer?

user_14539344 0
Viewed 71

I am creating a website for a friend's portfolio as my first beginner project. I came across using BEM naming conventions and am completely confused on how to properly utilize. Most tutorials use a very easy basic example that I can't scale to what I am actually doing. Below is essentially my webpage, not a lot going on. I specifically need guidance and clarity on how I named my HTML tags, and if I am even doing it right.

 <body class="page">
    
        <header class="header page__header">
            <nav class="nav-menu header__nav-menu">
                <!--Hamburger Menu Icon-->
                <div class="nav-menu__mobile-icon" onclick="changeNavIcon(this)">
                    <div class="nav-menu__icon-line1"></div>
                    <div class="nav-menu__icon-line2"></div>
                    <div class="nav-menu__icon-line3"></div>
                </div>
                <!--Navigation Menu-->
                <ul class="nav-menu__list">
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">HOME</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">STAND UP</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">VOICE OVER</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">ANIMATION</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">WRITTEN SCRIPT</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">GET IN TOUCH</a>
                    </li>
                </ul>
            </nav>
        </header>
    
        <main class="content page__content">
    
            <section class="section-intro content__section">
                <h1 class="section__title section-intro__title">Hello I am Person</h1>
                <img class="section__img section-intro__title" src="assets/imgs/headshot.jpg " alt=" ">
                <p class="section__text section-intro__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
                    molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
            </section>
    
            <section class="section-one content__section">
                <h2 class="section__title section-one__title">Stand Up</h2>
                <p class="section__text section-one__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
                    molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
                <video class="section__video section-one__video" controls>
                    <source src=" assets/vids/video.mp4 " type="video/mp4 ">
    
                    <p>Your browser doesn't support HTML5 video.</p>
                </video>
            </section>
    </main>

    <footer class="footer page__footer">
        <h3 class="footer__title">Follow my socials!</h3>
        <p class="footer_text">Placeholder content.</p>
    </footer>

</body>

I actually have about 5 sections in my and I am getting confused and frustrated since this seems like its suppose to be easy, but I can't grasp the concept.

I understand the block and element, but not the modifier syntax. I also do not understand why all this extra class information is needed. For example, why use "header page__header"? or give main a class when it is going to be different from page to page anyway?

bem css html
2 Answers

I'll give you an example of how to use it in your code:

import bem from "bem-cn";

const page = bem("page");
const navMenu = bem("nav-menu");

<body class={page}>
        <header class={page('header').mix('header')}>
            <nav class="nav-menu header__nav-menu">
                <!--Hamburger Menu Icon-->
                <div class={navMenu({'mobile-icon': true})} onclick="changeNavIcon(this)">
                    <div class={navMenu({'icon-line1': true})}></div>
                    <div class={navMenu({'icon-line2': true})}></div>
                    <div class={navMenu({'icon-line3': true})}></div>
                </div>
                <!--Navigation Menu-->
                <ul class={navMenu('list')}>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>HOME</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>STAND UP</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>VOICE OVER</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>ANIMATION</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>WRITTEN SCRIPT</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>GET IN TOUCH</a>
                    </li>
                </ul>
            </nav>
        </header>
    
        <main class={page('content').mix(content)}>
    
            <section class="section-intro content__section">
                <h1 class="section__title section-intro__title">Hello I am Person</h1>
                <img class="section__img section-intro__title" src="assets/imgs/headshot.jpg " alt=" ">
                <p class="section__text section-intro__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
                    molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
            </section>
    
            <section class="section-one content__section">
                <h2 class="section__title section-one__title">Stand Up</h2>
                <p class="section__text section-one__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
                    molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
                <video class="section__video section-one__video" controls>
                    <source src=" assets/vids/video.mp4 " type="video/mp4 ">
    
                    <p>Your browser doesn't support HTML5 video.</p>
                </video>
            </section>
    </main>

    <footer class={page('footer').mix('footer')}>
        <h3 class="footer__title">Follow my socials!</h3>
        <p class="footer_text">Placeholder content.</p>
    </footer>

</body>

Regarding your latest question "For example, why use "header page__header"? or give main a class when it is going to be different from page to page anyway?", it depends on your CSS. If you don't need these classes, you can just remove it, but if there is CSS properties for these classes, then you will need that classes.

user_61307530

First Understand what is the purpose of naming elements while making website, If you name tags properly it can significantly increase your development speed and debugging code.

This is also helpful if you are working with team members if a member of the group is naming tags and elements correctly then other members of the group will easily understand the code.

If you are not maintaining good naming of the elements then it can trouble you if you add new content or make changes to some elements, especially in a big project. Naming should be simple so that you can easily remember the mentioned part when you take a look at it.

But if you are not working in a very large project then there is no need to name each and everything, naming is generally used to alter specifically that thing. If you want to make changes to all similar elements then don't name it, if you want to make changes to only one elements among all the other then name that only and not the others.

It would be even better if you remove unnecessary of codes this will make your code look neater. There is no need to give class to body as there is only one body in the whole HTML page. Similarly remove any other unwanted codes.

One of the main feature of using CSS is that it reduces time,effort and maintains a neater code. It will be helpful if you create a multi-page website and creates a external CSS, and I hope all the connected pages will have similar template because generally it is like this, and in this way by maintaining only one CSS file you can alter all the similar pages.

I hope you got it.

user_147394440
Related