R
R
runprogr2019-09-05 11:25:54
css
runprogr, 2019-09-05 11:25:54

What is the correct division of files in BEM?

The BEM methodology requires a new file to be created for each block.
Let's say we have a structure like this

<div class='wrapper'>
    <header>
        <div class='block-1'>
            <div class='block-1__elem-1'>
            </div>
        </div>
    </header>
    <section class='section-1'>
        <div class='block-2'>
            <div class='block-2__elem-1'>
            </div>
       </div>
       <div class='block-3'>
           <div class='block-3__elem-1'>
           </div>
       </div>
    </section>
    <section class='section-2'>
        <div class='block-4'>
            <div class='block-4__elem-1'>
            </div>
       </div>
    </section>
    <footer>
    </footer>
</div>

1) In which file do we write styles for .wrapper ? Since this is not a block, as I understand it, there is no need to create a file and styles should simply be written at the beginning of main.scss ?
2) In which file should I write styles for header, footer, section-1, section-2 ? They are not BEM blocks, as far as I understand, does this mean that they need to be described in main.scss or do you still need to create a separate file for styles for each section?
3) Suppose we need to make section-1 display: flex , and set the order or flex-grow property to block-2 and block-3 blocks located in this flex container. If we need to change this property for one block, we will have to change it accordingly for all the others located in section-1. You will have to go into the file of each block and change the properties, which is not very convenient, especially if there are a lot of blocks. Is it correct to write such properties in each block, or should they be placed in main.scss for convenience, or somewhere else?
4) Is it possible to prescribe at the beginning of main.scss, for example, font size for body, or is it necessary to separately declare font-size in each block? Even if we use variables, as far as I understand, this does not save us from huge code duplication in the final css file if each property is declared for each block.
5) Is it a good practice to put all media queries related to a block in a file with the layout of this block, or should there be a separate file for all media queries?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
T
Tomato Potato, 2019-09-05
@runprogr

in which file do we style the .wrapper ? Since this is not a block, as I understand it, there is no need to create a file and styles should simply be written at the beginning of main.scss ?

Why not a block? It may well be a block without semantic functionality. Wrapping. Also through it, through its elements nested blocks are positioned.
If you mean tags, then this is frowned upon by BEM. BEM operates only on classes. tags are styled through them. This was done to atomize the project and easily transfer blocks from project to project.
Blocks should not affect each other, this is the fundamental idea of ​​BEM. If the blocks are connected or affect each other, this is no longer BEM, but something similar to it. Also, inside the block, the use of cascade and inheritance should be avoided, this can introduce additional confusion and increase the cohesion of the block.
You will have to go into the file of each block and change the properties, which is not very convenient, especially if there are a lot of blocks
This is quite convenient and this is BEM. You do not climb through a huge file with styles, but go to a small specific file where everything is in front of your eyes.
it doesn't save us from huge code duplication
Mixes save you from code duplication . Read about them here
5) Is it a good practice to put all media queries related to a block in a file with the layout of this block, or should there be a separate file for all media queries?
media queries that change the geometry of the block must be in the parent block in its elements. The block itself cannot change its geometry, the style file of the parent block element is responsible for this. Accordingly, if we change the size of the block through a media query, then this is done through the element of the parent block.
<head class="head"> 
<div class="block head__block"> </div>
</head>

Accordingly, a .block class block with a mixed .head__block class is an element of the .head block and you can change its geometry and positioning through the .head__block class using media queries, for example. Naturally, the head__block element with media queries will be stored in the head block and lie in its subfolder with elements.
Another case is when media queries change, for example, the style of a block, say its color. Then the media query must be inside the block, and specifically in its modifier, for example, in this case, the block block can have the block_red modifier in which the media query with properties will color the element red on a small screen. This media query file will already be in the native block block in the subfolder with modifiers.
If you disagree somewhere or I made a mistake, write in the comments and discuss.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question