gpt4 book ai didi

css - 命名 BEM 子 block

转载 作者:技术小花猫 更新时间:2023-10-29 10:20:07 25 4
gpt4 key购买 nike

<分区>

我正在使用 BEM 方法编写 html + css。使用此语法:

  • block :block_name
    • 元素:block_name__element_name
    • 修饰符:block_name__element_name--修饰符

当我在另一个 block 中有一个 block 时,我会感到困惑。例如,在标题中,我希望标题是一个我可以引用的 block ,而导航和 Logo 是 block 。我想在 site_header 中引用那些导航和 Logo block 。但是,我该怎么写呢?像 block_name__sub_block_name 这样的链接 block 看起来很长。

有没有人有写这个例子的典型方法?

<div class="site_header__logo">
<a class="site_header__logo__link">
<img class="site_header__logo__image">
</a>
</div>

<nav class="site_header__main_nav">
<ul>
<li class="site_header__main_nav__item">
<a class="site_header__main_nav__link">Home</a>
</li>
<li class="site_header__main_nav__item">
<a class="site_header__main_nav__link">About Us</a>
</li>
<li class="site_header__main_nav__item">
<a class="site_header__main_nav__link">Contact Us</a>
</li>
</ul>
</nav>

<div class="site_header__phone">
<p class="site_header__phone__number">
555.555.5555
</p>
</div>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com