首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用BEM重写扩展导航栏(因此所有元素都具有相同的特异性)

BEM(Block Element Modifier)是一种前端开发的命名规范和方法论,用于构建可维护、可扩展的CSS代码。它将页面中的每个组件(block)划分为独立的模块,每个模块包含一个或多个元素(element),并可以通过添加修饰符(modifier)来改变组件的外观和行为。

BEM的命名规范如下:

  • Block(块):代表一个独立的组件,使用单词或短语来描述,使用连字符(-)作为分隔符,例如:.navbar。
  • Element(元素):代表组件的子元素,使用双下划线(__)作为分隔符,例如:.navbar__item。
  • Modifier(修饰符):代表组件的不同状态或变体,使用双连字符(--)作为分隔符,例如:.navbar--dark。

使用BEM重写扩展导航栏意味着将导航栏组件拆分为块和元素,并使用修饰符来扩展其功能或样式。以下是一个示例:

HTML结构:

代码语言:txt
复制
<nav class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item">Home</li>
    <li class="navbar__item navbar__item--active">About</li>
    <li class="navbar__item">Services</li>
  </ul>
</nav>

CSS样式:

代码语言:txt
复制
.navbar {
  /* 导航栏样式 */
}

.navbar__list {
  /* 导航栏列表样式 */
}

.navbar__item {
  /* 导航栏项样式 */
}

.navbar__item--active {
  /* 激活状态的导航栏项样式 */
}

通过使用BEM,我们可以清晰地定义导航栏的各个组成部分,并且可以轻松地扩展和修改样式。例如,我们可以使用.navbar__item--active修饰符来标记当前活动的导航栏项,并为其添加特定的样式。

在腾讯云的产品中,推荐使用云服务器(CVM)来托管网站和应用程序,云数据库MySQL(CDB)来存储数据,云存储(COS)来存储静态资源,云函数(SCF)来处理后端逻辑,云原生容器服务(TKE)来部署和管理容器化应用等。具体产品介绍和链接如下:

  • 云服务器(CVM):提供可扩展的虚拟服务器实例,适用于各种应用场景。产品介绍
  • 云数据库MySQL(CDB):提供高性能、可扩展的关系型数据库服务,支持自动备份和容灾。产品介绍
  • 云存储(COS):提供安全可靠的对象存储服务,适用于存储和分发各种类型的文件和数据。产品介绍
  • 云函数(SCF):无服务器计算服务,可按需运行代码,无需管理服务器。产品介绍
  • 云原生容器服务(TKE):基于Kubernetes的容器管理服务,提供高可用、弹性伸缩的容器化应用部署和管理。产品介绍

通过使用以上腾讯云产品,您可以构建高性能、可靠的云计算解决方案,并实现扩展导航栏的需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS架构之BEM设计模式

大部分公司的命名规则还是只有大小驼峰、使用英文等这些基础的命名规则。经常会自己都忘了自己命名的css是啥,使用设计模式就能很好的解决该问题。...了解这些设计模式无疑会使css代码更具模块化,块样式不依赖于页面上的其他元素,因此也较好的避免了遇到级联问题。多人协作的时候,也能高效避免命名重复问题。...BEM的简介BEM就是:B代表:Block(块),独立实体,独立的意义,每个页面都可以看做是多个Block组成,见下图1-1;E代表:Element(元素),block 的一部分,没有独立意义,是组件下的一个元素... //一个在导航栏的a标签 //一个被选中的在导航栏的a标签 //几个在导航栏的a标签 <a

46820

编写模块化CSS:命名空间

我只向大家展示了如何处理单个块中不同的修饰符和子代(或孙子代)元素。 但是如果有多个区块咱怎么办呐? 事情有点复杂。 我们使用一个网站范围的导航来说明两个块之间的关系。 ? 好啦。 现在有两个区块。...你又如何能确保您的项目中的每个开发人员都以同样的方式来接受呢? 即使您的所有开发人员都拷贝了这个方案(因此也是以同样的方式),您如何知道您是否没有引入副作用(破坏了网站的另一部分)?...那么,看看在这种情况下插入所有“必需”BEM class的情况下会发生什么,你会注意到“HTML开始膨胀”: ? 最后一点:Harry使用对象命名空间(.o-)来表示这样的结构布局。...o-countdown中的元素的实际数量是无关紧要的,因为所有内部元素只能在.o-countdown里存在。 对象独立于上下文 当我说对象是上下文独立的时候,我的意思是他们不知道在哪里会被使用。...如果您的网站很简单,那么这是一个很好的开始,并且不需要为多个对象/组件使用相同的标题样式。 但是举个栗子哈,如果你有一个带链接的导航样式和你的h5样式一致怎么办? 你会这样做吗? ?

2.7K70
  • 改善CSS的10种最佳做法

    因此,在删除所有内容之前,请确保确认确实没有在任何地方使用它。 2、首选使用CSS方法 考虑为你的项目使用CSS方法。CSS方法用于在CSS文件中创建一致性。它们有助于扩展和维护你的项目。...这是我可以推荐的一些流行的CSS方法。 BEM BEM(块,元素,修饰符)是最流行的CSS方法之一。它是命名约定的集合,可用于轻松制作可重复使用的组件。...相同的元素无论在页面上的什么位置,都应看起来相同。...它将覆盖默认的显示,间距或字体样式。可以通过使用h1,h2或h3来避免这种情况。默认情况下,它们具有你要与其他元素一起实现的样式。你可以立即摆脱四个不必要的规则。... 7、避免使用复杂的选择器 使用复杂的选择器有两个主要问题。首先,提高的特异性不仅会使以后更难重写现有规则,而且会增加浏览器匹配选择器的时间。

    80510

    改善CSS的10种最佳做法

    因此,在删除所有内容之前,请确保确认确实没有在任何地方使用它。 2、首选使用CSS方法 考虑为你的项目使用CSS方法。CSS方法用于在CSS文件中创建一致性。它们有助于扩展和维护你的项目。...这是我可以推荐的一些流行的CSS方法。 BEM BEM(块,元素,修饰符)是最流行的CSS方法之一。它是命名约定的集合,可用于轻松制作可重复使用的组件。...相同的元素无论在页面上的什么位置,都应看起来相同。...它将覆盖默认的显示,间距或字体样式。可以通过使用h1,h2或h3来避免这种情况。默认情况下,它们具有你要与其他元素一起实现的样式。你可以立即摆脱四个不必要的规则。... 7、避免使用复杂的选择器 使用复杂的选择器有两个主要问题。首先,提高的特异性不仅会使以后更难重写现有规则,而且会增加浏览器匹配选择器的时间。

    70320

    两种 CSS 方法论 「详细分析」

    ; 能够让类名更具有语义化; 下面来看看命名规则的各个部分的具体作用: 命名空间(可选) 命名空间是可选的,如果你希望避免自己定义的组件类名与引入的第三方样式类名发生冲突,则可以为自己的类名加上命名空间...例如,头部、尾部这种大的区块就是主要组件,我们称之为布局(Layout)。而导航栏(属于头部),网站说明(属于尾部)这种区块为次要组件,我们称之为模块(Module)。...下面举个具体的案例,来看看掘金的页面布局: 页面上有一个头部,一个导航条,一个内容区域以及一个侧边栏,这些都属于布局的部分。...,这个区分确实比较模糊,所以有一些方案也取消了布局规则,将所有可重用组件都划分为模块。...状态规则 状态是用来描述模块在不同状态下的外观,使用 is- 前缀,这有助于我们在 HTML 中区分元素的状态。

    98310

    作用域 CSS 回来了

    你可以阻止一个组件的选择器针对子组件中的元素,或者如果需要,也可以允许它们到达。 你不再需要BEM风格的类名。 此外,近度在级联中变成了一等公民。...如果两个组件针对同一个元素(具有相同的特异性),内部组件的样式将覆盖外部组件的样式。 它是如何工作的?...这样,你可以嵌套两个范围,每个范围都可以使用相同的通用标题类名,而不会发生冲突。...这样,当两个范围针对同一个元素时,你可以控制哪一个优先。而不是总是让内部范围赢,你可以调整选择器的特异性,使得更高特异性的选择器优先,不管它属于哪个范围。...如果你使用了复杂的BEM类名系统,并努力使所有的选择器特异性保持一致,想想这可以带来的自由。

    10010

    浅谈 Css 规范

    可读性和可维护性: BEM 使用简洁明了的命名约定,使得 CSS 代码易于理解和维护。 增强可扩展性: BEM 的结构使得页面元素易于扩展和修改,不会影响其他部分的样式。...,使用 OOCSS的话,需要创建更多的 “原子类”,并且每个样式对应一个类,这样可以重复使用这些样式,避免写相同的样式。...缺点: 不适合小项目: 小型项目不一定需要可扩展性、可读性和可维护性。 增加类的数量: 您可能需要将多个类添加到一个元素以说明所有样式元素。...模块(Module)又名对象或块,是可重用的模块化部分,例如导航栏、产品列表等。 状态(State)描述的是任一模块或布局在特定状态下的外观,例如隐藏、激活等。...命名规则 SMACSS 推荐使用前缀来区分不同部件: 基础规则是直接作用于元素的,因此不需要前缀,一般使用元素、属性、伪类等选择器。不应该出: class、ID、!important 等。

    11110

    「前端工程四部曲」模块化的前世今生(下)

    回顾一下历史,从我们手写原生CSS,到后面使用Sass/Less等预处理器,再到使用 PostCSS 等后处理器,或者是使用CSS Module以及CSS in JS,都是对标某些问题而产生的比较具有针对性的方案...BEM BEM 是一种非常有用、强大且简单的命名约定,可以说是一个CSS命名规范,也可以说是一种思想。它使前端代码更易于阅读和理解、更易于使用、更易于扩展、更健壮和明确,并且更加严格。...「优点:」 BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器,可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。...BEM 命名规则中,所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性(specificity)都是相同的,也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。...,并且每个样式对应一个类,这样是为了后面可以重复使用这些组件的样式,避免重复写相同的样式。

    73820

    CSS @scope 如何取代 BEM

    使用上述相同的 HTML,甜甜圈作用域可以定义从 sample-page 的起始区域到 second-section 样式区域的样式: /* donut scope */ @scope (.sample-page...要做到这一点,首先在 Chrome 中打开一个标签页,前往 chrome://flags/,然后搜索并启用“实验性网络平台功能”标志: 什么是 BEM BEM 是一种在HTML视图中分组样式的方式,可以轻松地进行导航...考虑到一个大型 HTML 页面有许多具有不同样式的元素。在设置了几个初始样式名称后,随着页面的扩展,要保持样式就会变得很困难。BEM 试图通过围绕实际样式来构建样式名来缓解这一问题。...元素 = 在为 元素设计样式时,该元素被视为 element ,因此会在样式名称中添加额外的 __ ,从而创建 sample-page__title 。...,所以: 块为 sample-page 元素是 first-section 修饰词是 first-line BEM 的扩展性很好,尤其是在使用 SASS 将样式分组并使用 & 操作符创建类似内容时:

    12210

    CSS规范--BEM入门

    ...又一段时间,又开发新页面,每次为元素命名都心惊胆战,求神拜佛,没写一条样式,F5都按多几次,每个组件都测试一遍......而.media__body是一个尚未被改变过的也是属于.media的元素。所有以上这些信息都通过它们的class名称就能明白,由此看来BEM确实非常实用。 使用BEM常见问题 1 丑极了!...,但我们也无需担心文件体积的问题,由于服务端有gzip压缩,BEM命名相同的部分多,压缩下来的体积不会太大。...这个例子中,网站logo完全是恰巧在.header的内部,它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文,因此你要确定只在你需要用到BEM的地方你才使用它。...更有甚者,来维护这块代码的同事,直接在样式文件最后添加覆盖样式,这会造成一个非常严重的问题了:同一个元素样式零散的分布在文件的不同地方,而且定位该元素的选择器也可能各不相同。

    1.2K20

    如何使用CSS命名规范提高您的编码效率

    类名还应具有连贯性,连接兄弟元素或显示父子元素之间的关系。 避免过度嵌套:在为类分配名称时,命名模式应保持浅层,并且选择器不应过度嵌套。这样可以提高可读性并使代码更易于维护。...命名规范的示例包括:kebab-case(使用小写字母和连字符表示),camelCase(首字母小写,多个单词时,后续单词的首字母大写),以及PascalCase(所有组成名称的单词的首字母都大写)。...常见的缩写包括 btn 代表按钮, nav 代表导航栏, cta 代表呼叫行动组件。 上下文命名:在为类分配名称之前,请考虑元素的使用环境以及其提供的功能和特性。...important 行为修饰符对应用到的元素强制执行严格的行为,并覆盖任何更改。过度使用可能会导致冲突,使得更新现有样式变得困难,因为具有 !important 修饰符的属性占主导地位。...使用BEM,我们还可以在CSS中编写样式时表示一个元素是特定类的子元素。

    40830

    Web前端进阶之路: 提升代码质量篇

    BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Element)和修饰符(Modifier)。 CSS 的样式应用是全局性的,没有作用域可言。...BEM 通过元素的命名遵循遵循 block-name__element-name–-modifier-name 来保证命名的唯一性。因此,BEM 能够帮助你在前端开发中实现可复用的组件和代码共享。...下面是常见类名: 布局: header(头部), footer(尾部), main(主栏),side(侧栏), wrap(盒容器), item(条目)。...这边指的代码测试,是指用代码来测试代码。 要求团队每次代码提交前,所有测试用例必须通过。测试用例覆盖的代码的bug不会太多。 设计和编写测试用例很耗时间。因此,只对必要的代码做代码测试。...代码评审的好处: 在项目的早期发现缺陷,将损失降至最低。 评审的过程也是重新梳理思路的过程,双方都加深了对系统的理解。 促进团队沟通、促进知识共享、共同提高。

    1.7K20

    如何写出一套可维护的CSS库?

    可以想到,由于上面的样式规则使用了继承选择符,因此对于html的结构实际是有一定依赖的。如果html发生重构,就有可能不再具有这些样式。...对应的,下面的样式规则只有一个选择符,因此不依赖于特定html结构,只要为元素添加class,就可以获得对应样式。...当然,继承选择符是有用的,它可以减少因相同命名引发的样式冲突(常发生于多人协作开发)。但是,我们不应过度使用,在不造成样式冲突的允许范围之内,尽可能使用短的、不限定html结构的选择符。...块的内部元素,都被认为是块的子元素。一个块中元素的类名必须用父级块的名称作为前缀,因此不能写成:block__elem1__elem2。...刚刚接触可能是会觉得有点奇怪,但所有东西都有一个适应过程。如果仅仅为了好看,规避其优点,我认为得不偿失。个人建议可以尝试使用 BEM 规范来书写代码。

    71630

    【译】W3C WAI-ARIA最佳实践 -- 布局

    grid 模式的使用大致可分为两类:展示表格信息(数据表格)和集合其他部件(布局栅格)。尽管数据网格和布局栅格使用相同的ARIA角色、状态和属性,它们内容和目的中的不同是考虑键盘交互设计的重要因素。...与用于呈现数据的网格不同,用于布局的 grid 不一定具有用于标记行或列的标题单元格,并且可能只包含单个行或单个列。即使有多个行和列,它也可能呈现一个独立、逻辑上相同的元素集合。...WAI-ARIA 角色,状态和属性 网格容器具有角色 grid。 每个行容器都具有 row 角色,并且是 grid 元素或 rowgroup 角色元素的后代,或被其拥有。...NOTE 如果具有 grid 角色的元素是HTML table 元素,那么不必为行和单元格使用ARIA角色,因为HTML元素暗含了ARIA语义。例如,HTMLTR 具有隐含的ARIA角色 row。...否则,工具栏元素具有由 aria-label提供的标签。 如果工具栏控件是垂直排列的,工具栏元素应该设置 aria-orientation 为 vertical。其默认值为 horizontal。

    6.2K50

    【编码规范】Airbnb CSS u002F Sass 编码风格指南

    类名建议使用破折号代替驼峰法。如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时,每个选择器独占一行。....listing-card__title 是一个元素(element),它属于 .listing-card 的一部分,因此块是由元素组成的。...CSS 和 @include 声明按照以下逻辑排序(参见下文) 属性声明的排序 属性声明 首先列出除去 @include 和嵌套选择器之外的所有属性声明。...扩展指令 应避免使用 @extend 指令,因为它并不直观,而且具有潜在风险,特别是用在嵌套选择器的时候。即便是在顶层占位符选择器使用扩展,如果选择器的顺序最终会改变,也可能会导致问题。...其实,使用 @ extend 所获得的大部分优化效果,gzip 压缩已经帮助你做到了,因此你只需要通过 mixin 让样式表更符合 DRY 原则就足够了。

    2.4K20

    CSS命名法BEM与scoped、module

    CSS挺容易造成样式污染的,每个模块或者页面之间,总有一些命名容易相同,解决也简单,用权重或者重写,只是这种场景有时候还是挺头疼。...平时我们不会关注这个,这其实是CSS的属性选择器,打包的时候给每个标签都添加一个唯一的data-v-hash。...,BEM由块(Block)、元素(Element)、修饰符(Modifier)组成,块__元素--修饰符: B:block,对应模块名,如dialog E:element 对应模块中的节点,如button...M:modifier 对应节点的状态,disabled 最终class名 dialog__button--disabled 使用BEM的element:el-cascader-node__label、...在我看来,scoped > module > BEM,引用工具来约束和人为约束肯定是选择使用工具去约束,module和scoped对比,也只是工具对类名的不同处理。

    68020

    iOS 图标图像 (官方翻译版)

    因为在相同量的物理空间中有更多像素,所以每点有更多像素。因此,高分辨率显示器需要具有更多像素的图像。 ? 为您的应用程序的所有设备提供高分辨率图像,适用于您的应用程序支持的所有设备。...屏幕截图对于应用图标来说太复杂了,通常不会帮助您传达应用的目的。图标中的界面元素具有误导性和混淆性。 不要使用苹果硬件产品的副本。苹果产品受版权保护,无法在您的图标或图像中复制。...无论您仅使用自定义图标还是混合使用自定义和系统图标,应用程序中的所有图标在细节级别,光学重量,行程重量,位置和透视度方面都应相同。 ? 确保图标清晰可辨。一般来说,固体图标往往比概述的图标更清晰。...导航栏和工具栏图标 标签栏图标 主屏幕快速操作图标 这是一个好主意,尽可能使用这些内置的图标,因为他们是熟悉的人。 按照预期使用系统图标。每个系统提供的图像具有特定的,众所周知的意义。...您还可以使用固定的空格元素来提供导航和工具栏图标之间的填充。 ? 显示包含在当前上下文中有用的共享扩展,操作扩展和任务(如“复制”,“收藏夹”或“查找”)的模态视图。行动 ?

    3.6K40

    【React】:CSS 模块化

    模块化 CSS 使用的主要场景是棘手的大规模 CSS。 写代码并不难,难的是在不让你的代码随着时间的推移成为拖累你的“技术债”。 1.1....这不是一个页面而是一个组件的集合。你会发现页面里包含的是 logo,搜索栏,导航,照片列表,辅助导航,标签框,视频播放器等。这些是可以网站的任何位置都可以独立使用的内容。...BEM的核心概念是 —— 块(Block)由子元素(Element)构成,并且可以修改(Modified)。...BEM 命名约定: .block-name__element--modifier 名称以小写字母书写 名称中的单词用连字符(-)分隔 元素由双下划线(__)分隔 修饰符由双连字符(--)分隔 一个 BEM...CSS 提供灵活、可扩展的样式定义。

    1.3K20

    编写模块化CSS——BEM

    在传统的 BEM 中,当你使用修饰符时,你应该 将块和修饰符添加 到 HTML 中,以便在新的 .button--secondary 中不重写 .button 样式。 ? ?...但是有两种方法可以编写简洁的 CSS,而不需要额外的 class! 方法 1:使用 mixin 第一种方式,如果使用 Sass 或任何其他预处理器,则 使用mixin来封装 需要重用的 所有代码。...(BEM 元素具有 .block__element 语法)。 在这一点上,你仍然可能不喜欢 BEM 丑陋的 --modifier 语法。我知道为什么,但我爱上这个语法是因为我很讨厌命名。...因此如果我使用 -modifier (如某些方法建议的),我将无法一眼看出 -section 是否是修饰符。所以这是一个馊主意。...很具有讽刺意味,但是这个丑陋的语法让我的代码更简洁,更易于维护。所以强烈推荐你尝试它:) 我们来看看 BEM 的第三个重要部分 —— 元素。 元素(Elements) 元素是块的子节点。

    2.1K70

    进阶 | CSS进阶:提高你前端水平的 4 个技巧

    阅读更多关于 CSS 组件驱动的文章,详见《CSS 建构:可扩展和模块化处理》、《使用 Sass 编写模块化的 CSS》和《模块化你的前端代码——编写高可维护和条理清晰的代码》。...BEM 代表块(block)、元素(element)和修饰符(modifier)。Yandex,在俄罗斯的相当于谷歌的搜索引擎,为了解决他们 CSS 代码库中的缩放问题而提出了它(它指BEM)。...元素(Elements)是块的子模块。修饰符(modifiers)代表不同的状态。...当我们提交 CSS 文件时,这意味着每个独立的组件(例如轮播效果和导航栏)都应该有自己的 CSS 文件。...更多有关组织文件结构和 CSS 架构的文章,详见《Sass 审美 1:架构和组织样式文件》和《可扩展和可维护的 CSS 架构》。

    45710
    领券