- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在为 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 个部分,我感到困惑和沮丧,因为这似乎很容易,但我无法理解这个概念。
最佳答案
首先了解制作网站时命名元素的目的是什么,
如果您正确命名标签,它可以显着提高您的开发速度和调试代码。
如果您与团队成员一起工作,如果小组成员正确命名标签和元素,那么小组的其他成员将很容易理解代码,这也很有帮助。
如果您没有保持对元素的良好命名,那么添加新内容或更改某些元素可能会给您带来麻烦,尤其是在大型元素中。命名应该简单,以便您在查看时可以轻松记住提到的部分。
但是如果你不是在一个非常大的元素中工作,那么就没有必要为每一个都命名,命名通常用于专门改变那个东西。如果您想对所有相似元素进行更改,则不要命名它,如果您只想对所有其他元素中的一个元素进行更改,则仅命名该元素而不命名其他元素。
如果您删除不必要的代码会更好,这将使您的代码看起来更整洁。无需为 body 赋值,因为整个 HTML 页面中只有一个 body。同样删除任何其他不需要的代码。
使用 CSS 的主要特点之一是它减少了时间、精力和维护更整洁的代码。如果你创建一个多页面的网站并创建一个外部CSS会很有帮助,我希望所有连接的页面都有类似的模板,因为一般都是这样的,这样只维护一个CSS文件就可以改变所有类似的页面。
我希望你明白了。
关于html - [html]作为初学者的 Web 开发人员在编写标记时如何利用 BEM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65119686/
我只想从客户端向服务器发送数组 adc_array=[w, x, y, z]。下面是客户端代码,而我的服务器是在只接受 json 的 python 中。编译代码时我没有收到任何错误,但收到 2 条警告
我是 lua 和 Node js 的新手,我正在尝试将我正在开发的移动应用程序连接到服务器。问题是它连接到服务器,但我尝试传递的数据丢失或无法到达服务器。对我正在做的事情有什么问题有什么想法吗? th
我在这个页面上工作 http://www.haskell.org/haskellwiki/99_questions/Solutions/4 我理解每个函数的含义,看到一个函数可以像这样以多种方式定义,
我目前正在尝试将数据写入 excel 以生成报告。我可以将数据写入 csv 文件,但它不会按照我想要的顺序出现在 excel 中。我需要数据在每列的最佳和最差适应性下打印,而不是全部打印在平均值下。这
所以,我正在做一个项目,现在我有一个问题,所以我想得到你的帮助:) 首先,我已经知道如何编写和读取 .txt 文件,但我想要的不仅仅是 x.hasNext()。 我想知道如何像 .ini 那样编写、读
我正在尝试编写一个函数,该函数将返回作为输入给出的任何数字的阶乘。现在,我的代码绝对是一团糟。请帮忙。 function factorialize(num) { for (var i=num, i
这个问题已经有答案了: Check variable equality against a list of values (16 个回答) 已关闭 4 年前。 有没有一种简洁或更好的方法来编写这个条件
我对 VR 完全陌生,正在 AFrame 中为一个类(class)项目开发 VR 太空射击游戏,并且想知道 AFrame 中是否有 TDD 的任何文档/标准。有人能指出我正确的方向吗? 最佳答案 几乎
我正在尝试创建一个 for 循环,它将重现以下功能代码块,但以一种更具吸引力的方式。这是与 Soundcould 小部件 API 实现一起使用的 here on stackoverflow $(doc
我有一个非常令人困惑的问题。我正在尝试更改属性文件中的属性,但它只是没有更改... 这是代码: package config; import java.io.FileNotFoundException
我对 VR 完全陌生,正在 AFrame 中为一个类(class)项目开发 VR 太空射击游戏,并且想知道 AFrame 中是否有 TDD 的任何文档/标准。有人能指出我正确的方向吗? 最佳答案 几乎
我正在开发一个用户模式(Ring3)代码级调试器。它还应支持.NET可执行文件的本机(x86)调试。基本上,我需要执行以下操作: 1).NET在隐身模式下加载某些模块,而没有LOAD_DLL_DEBU
我有一个列表,我知道有些项目是不必要打印的,我正在尝试通过 if 语句来做到这一点...但是它变得非常复杂,所以有没有什么方法可以在 if 语句中包含多个索引而无需打印重写整个声明。 看起来像这样的东
我很好奇以不同方式编写 if 语句是否会影响程序的速度和效率。所以,例如写一个这样的: bool isActive = true; bool isResponding = false; if (isA
我在搜索网站的源代码时找到了一种以另一种方式(我认为)编写 if 语句的方法。 代替: if(a)b; 或: a?b:''; 我读了: !a||b; 第三种方式和前两种方式一样吗?如果是,为什么我们要
我的数据采用以下格式(HashMap的列表) {TeamName=India, Name=Sachin, Score=170} {TeamName=India, Name=Sehwag, Score=
我目前正在完成 More JOIN operations sqlzoo 的教程,遇到了下面的代码作为#12 的答案: SELECT yr,COUNT(title) FROM movie JOIN ca
我正试图找到一种更好的方法来编写这段代码: def down_up(array, player) 7.downto(3).each do |row| 8.times do |col
出于某种原因,我的缓冲区中充满了乱码,我不确定为什么。我什至用十六进制编辑器检查了我的文件,以验证我的字符是否以 2 字节的 unicode 格式保存。我不确定出了什么问题。 [打开文件] fseek
阅读编码恐怖片时,我刚刚又遇到了 FizzBuzz。 原帖在这里:Coding Horror: Why Can't Programmers.. Program? 对于那些不知道的人:FizzBu
我是一名优秀的程序员,十分优秀!