Hello guys! I have problem with naming classes on my project…
I would like to make copy of this website, but I stuck on structure files and naming classes
I would like to use BEM naming.
How to structure HTML and SASS files??
Also I have problem with navigation, I would like to add some black transparent background when it’s active, but how to do It smooth?
My code:
Block is the big chunk of your page that you’ll see when it’s done. The big section at the top was called banner, masthead, or header.(eg <div id="banner">). It used to have lot’s of stuff too. Now we have a tag header. So long as you use it for the big piece before the main content it’ll probably wind up being the block called header.
So then there is the header logo and the header menu. You could call it nav or main menu if you want it needn’t be the same as the new HTML5 tags.
Back then we’d write:
<div class="header">
<div class="header__logo>
<img>
</div>
<!-- currently your menu is closed so I know state is a modifier -->
<div class="header__menu--closed">
<!-- put in a menu structure and if you need to get to the links -->
<a class="header__menu-link>
Today we’d write:
<header class="header">
<div class="header__logo>
<img>
</div>
<!-- currently your menu is closed so I know state is a modifier -->
<nav class="header__menu--closed">
<ul>
<li class="header__menu-item>
<a class="header__menu-link> <!-- header__menu-item-link if you like -->
</li>
</ul>
</nav>
Just remember that your css is going to be filled with classes no tag selectors like p if I remember correctly.
I didn’t have anyone to discuss this stuff with back then, so I was usually confused what could be a modifier besides state. But I liked the kind of geographical sense that it has so I switched to this it’s very similar in intent but much more explanation for me.
Good luck!