This document discusses the benefits of using a Block Element Modifier (BEM) methodology for organizing CSS and HTML code into independent and reusable blocks. It provides examples of how to structure files and code for blocks, elements, modifiers, and different pages and browsers to maintain a clear separation of concerns. Developing in this way aims to make code more modular, independent, readable and maintainable.
2. BEM
What you can borrow from
Yandex frontend dev
Frontend developer
Varvara Stepanova
3.
4.
5. Over 80 services
• search
– web pages
– images, video
– goods, news, blog posts, people
• web mail
• web maps
– traffic jams, wiki maps, taxi
• hosting and sharing
– files, photos, video
5
50. Menu block
HTML
<ul class="menu">
<li><a href="/new">New titles</a></li>
<li><a href="/soon">Coming soon</a></li>
<li><a href="/best">Bestsellers</a></li>
...
</ul>
50
51. Menu block
blocks/menu.css
.menu li
{
list-style: none;
display: inline-block;
padding: 0 0.5em;
}
51
52. Menu and Dropdown blocks
blocks/menu.css pages/index.html
.menu li <li>
{ <a href="#">Bestsellers</a>
list-style: none; <div class="dropdown">
display: inline-block;
padding: 0 0.5em; <ul>
} <li>Item One</li>
<li>Item Two</li>
<li>The best item</li>
<li>Item Three</li>
52
53. Block is independent, if
• a block has its "name"
– no "id" but "classname" selectors
• avoid cascade
• no "tag" selectors
53
54. The style system matches rules by starting with the key
selector, then moving to the left (looking for any ancestors
in the rule’s selector).
David Hyatt, MDN
mzl.la/UuwZql
54