N
N
Name_232021-12-07 16:10:04
BEM
Name_23, 2021-12-07 16:10:04

Is this code consistent with the BEM methodology?

Is this markup consistent with the BEM methodology or does it need to be changed?
works-item in works__item
works-boxin works__item-box
works-imginworks__item-img

<section id="works" class="works">
    <div class="row">
        <div class="works-item">
            <a href="img/work-1.jpg" class="works-box" alt="Project Name ">
                <img src="img/work-1.jpg" alt="" class="works-img">
            </a>
        </div>
        <div class="works-item">
            <a href="img/work-2.jpg" class="works-box" alt="Project Name ">
                <img src="img/work-2.jpg" alt="" class="works-img">
            </a>
        </div>
        <div class="works-item">
            <a href="img/work-3.jpg" class="works-box" alt="Project Name ">
                <img src="img/work-3.jpg" alt="" class="works-img">
            </a>
        </div>
        <div class="works-item">
            <a href="img/work-4.jpg" class="works-box" alt="Project Name ">
                <img src="img/work-4.jpg" alt="" class="works-img">
            </a>
        </div>
        <div class="works-item">
            <a href="img/work-5.jpg" class="works-box" alt="Project Name ">
                <img src="img/work-5.jpg" alt="" class="works-img">
            </a>
        </div>
        <div class="works-item">
            <a href="img/work-6.jpg" class="works-box" alt="Project Name ">
                <img src="img/work-6.jpg" alt="" class="works-img">
            </a>
        </div>
        <div class="works-item">
            <a href="img/work-7.jpg" class="works-box" alt="Project Name ">
                <img src="img/work-7.jpg" alt="" class="works-img">
            </a>
        </div>
        <div class="works-item">
            <a href="img/work-8.jpg" class="works-box" alt="Project Name ">
                <img src="img/work-8.jpg" alt="" class="works-img">
            </a>
        </div>
    </div>
</section>
<!-- works -->

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Andrey Martynkevich, 2021-12-07
@Name_23

Well, in order to understand, you need to create a block or an element, let's find out what a block and an element are (* link to the source *). A block is a page component that can be reused. An element is an integral part of a block that cannot be used in isolation from it. In your case, you use the works-item block, of course, you can create new blocks (works-box and works-img) Nobody will forbid you, but why? If the styles for the link and image are unique within the works-item block, then it's better to use an element. If styles have been used or will be used somewhere before, it is better to create a block for reuse in the future.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question