[html] Как мне использовать BEM при написании разметки в качестве начинающего веб-разработчика?

#html #css #bem

#HTML #css #bem

Вопрос:

Я создаю веб-сайт для портфолио друга в качестве своего первого проекта для начинающих. Я столкнулся с использованием соглашений об именовании BEM и совершенно не понимаю, как правильно использовать. В большинстве руководств используется очень простой базовый пример, который я не могу масштабировать до того, что я на самом деле делаю. Ниже, по сути, моя веб-страница, не так много всего происходит. Мне особенно нужны указания и ясность в отношении того, как я назвал свои HTML-теги, и правильно ли я это делаю.

  <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>
 

На самом деле у меня около 5 разделов, и я запутываюсь и расстраиваюсь, так как кажется, что это должно быть легко, но я не могу понять концепцию.

Я понимаю блок и элемент, но не синтаксис модификатора. Я также не понимаю, зачем нужна вся эта дополнительная информация о классе. Например, зачем использовать «заголовок страницы __заголовок»? или присвоить main класс, когда он все равно будет отличаться от страницы к странице?

Ответ №1:

Сначала поймите, какова цель присвоения имен элементам при создании веб-сайта, если вы правильно назовете теги, это может значительно увеличить скорость разработки и отладки кода.

Это также полезно, если вы работаете с членами команды, если член группы правильно называет теги и элементы, тогда другие члены группы легко поймут код.

Если вы не поддерживаете правильное присвоение имен элементам, это может вызвать у вас проблемы, если вы добавите новый контент или внесете изменения в некоторые элементы, особенно в большом проекте. Именование должно быть простым, чтобы вы могли легко запомнить упомянутую часть, когда взглянете на нее.

Но если вы работаете не в очень большом проекте, тогда нет необходимости называть все и вся, именование обычно используется для изменения конкретно этой вещи. Если вы хотите внести изменения во все похожие элементы, не называйте их, если вы хотите внести изменения только в один элемент из всех остальных, тогда назовите только его, а не остальные.

Было бы еще лучше, если бы вы удалили ненужные коды, это сделает ваш код более аккуратным. Нет необходимости присваивать класс body, поскольку на всей HTML-странице есть только одно тело. Аналогичным образом удалите все другие нежелательные коды.

Одной из основных особенностей использования CSS является то, что он сокращает время, усилия и поддерживает более аккуратный код. Будет полезно, если вы создадите многостраничный веб-сайт и создадите внешний CSS, и я надеюсь, что все связанные страницы будут иметь похожий шаблон, потому что обычно это так, и таким образом, поддерживая только один файл CSS, вы можете изменять все похожие страницы.

Надеюсь, вы поняли.

Комментарии:

1. Спасибо за помощь в объяснении его важности. Я вижу, как это может быть очень полезно! Вы бы сказали, что моя схема именования верна?

2. @SuddenGun007 Да, ваш стиль именования правильный, и метод BEM является хорошей практикой.

Ответ №2:

Я приведу вам пример того, как использовать его в вашем коде:

 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>
 

Что касается вашего последнего вопроса «Например, зачем использовать «заголовок страницы__header»? или дайте main класс, когда он все равно будет отличаться от страницы к странице?», это зависит от вашего CSS. Если вам не нужны эти классы, вы можете просто удалить его, но если для этих классов есть свойства CSS, то вам понадобятся эти классы.

Комментарии:

1. Спасибо, я не понимаю, откуда я импортирую BEM в верхней строке. Я просто думал, что BEM — это способ именования классов, а не внешнего файла! Вероятно, поэтому это так сбивает с толку.

2. существует библиотека для bem, вы можете посмотреть здесь: npmjs.com/package/bem-cn