gpt4 book ai didi

html - [html]作为初学者的 Web 开发人员在编写标记时如何利用 BEM?

转载 作者:行者123 更新时间:2023-12-04 08:28:58 25 4
gpt4 key购买 nike

我正在为 friend 的作品集创建一个网站,作为我的第一个初学者元素。我遇到了使用 BEM 命名约定的问题,并且对如何正确使用感到完全困惑。大多数教程使用一个非常简单的基本示例,我无法扩展到我实际在做的事情。下面基本上是我的网页,不是很多。我特别需要关于如何命名 HTML 标签的指导和明确性,以及我是否做得对。

 <body class="page">

<header class="header page__header">
<nav class="nav-menu header__nav-menu">
<!--Hamburger Menu Icon-->
<div class="nav-menu__mobile-icon" onclick="changeNavIcon(this)">
<div class="nav-menu__icon-line1"></div>
<div class="nav-menu__icon-line2"></div>
<div class="nav-menu__icon-line3"></div>
</div>
<!--Navigation Menu-->
<ul class="nav-menu__list">
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">HOME</a>
</li>
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">STAND UP</a>
</li>
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">VOICE OVER</a>
</li>
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">ANIMATION</a>
</li>
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">WRITTEN SCRIPT</a>
</li>
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">GET IN TOUCH</a>
</li>
</ul>
</nav>
</header>

<main class="content page__content">

<section class="section-intro content__section">
<h1 class="section__title section-intro__title">Hello I am Person</h1>
<img class="section__img section-intro__title" src="assets/imgs/headshot.jpg " alt=" ">
<p class="section__text section-intro__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
</section>

<section class="section-one content__section">
<h2 class="section__title section-one__title">Stand Up</h2>
<p class="section__text section-one__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
<video class="section__video section-one__video" controls>
<source src=" assets/vids/video.mp4 " type="video/mp4 ">

<p>Your browser doesn't support HTML5 video.</p>
</video>
</section>
</main>

<footer class="footer page__footer">
<h3 class="footer__title">Follow my socials!</h3>
<p class="footer_text">Placeholder content.</p>
</footer>

</body>
我实际上有大约 5 个部分,我感到困惑和沮丧,因为这似乎很容易,但我无法理解这个概念。
我了解块和元素,但不了解修饰符语法。我也不明白为什么需要所有这些额外的类(class)信息。例如,为什么要使用“header page__header”?或者当它从页面到页面不同时给 main 一个类?

最佳答案

首先了解制作网站时命名元素的目的是什么,
如果您正确命名标签,它可以显着提高您的开发速度和调试代码。
如果您与团队成员一起工作,如果小组成员正确命名标签和元素,那么小组的其他成员将很容易理解代码,这也很有帮助。
如果您没有保持对元素的良好命名,那么添加新内容或更改某些元素可能会给您带来麻烦,尤其是在大型元素中。命名应该简单,以便您在查看时可以轻松记住提到的部分。
但是如果你不是在一个非常大的元素中工作,那么就没有必要为每一个都命名,命名通常用于专门改变那个东西。如果您想对所有相似元素进行更改,则不要命名它,如果您只想对所有其他元素中的一个元素进行更改,则仅命名该元素而不命名其他元素。
如果您删除不必要的代码会更好,这将使您的代码看起来更整洁。无需为 body 赋值,因为整个 HTML 页面中只有一个 body。同样删除任何其他不需要的代码。
使用 CSS 的主要特点之一是它减少了时间、精力和维护更整洁的代码。如果你创建一个多页面的网站并创建一个外部CSS会很有帮助,我希望所有连接的页面都有类似的模板,因为一般都是这样的,这样只维护一个CSS文件就可以改变所有类似的页面。
我希望你明白了。

关于html - [html]作为初学者的 Web 开发人员在编写标记时如何利用 BEM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65119686/

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