首页
学习
活动
专区
工具
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

45620

编写模块化CSS:命名空间

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

2.7K70
  • 改善CSS10种最佳做法

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

    80110

    改善CSS10种最佳做法

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

    70020

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

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

    97010

    作用域 CSS 回来了

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

    9210

    浅谈 Css 规范

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

    9310

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

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

    72220

    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 将样式分组并使用 & 操作符创建类似内容时:

    11410

    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中编写样式时表示一个元素是特定类元素

    38330

    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 规范来书写代码。

    71230

    【译】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.1K50

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

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

    2.4K20

    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与scoped、module

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

    66720

    编写模块化CSS——BEM

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

    2.1K70

    Vue笔记(6)

    $children是一个数组类型,它包含所有的子组件对象 我们通过一个遍历,取出所有子组件message状态 因为老师说children用得比较少,所以这里只介绍refs,只有在需要得到所有子组件时候会用到...插槽slot 组件插槽 组件插槽也是为了让我们封装组件更加具有扩展性 让使用者可以决定组件内部一些内容到底展示什么 例子 移动开发中,几乎每个页面都有导航 导航我们必然封装成一个插件...,比如nav-bar组件 一旦有了这个组件,我们就可以在多个页面中复用了 现在创建一个组件 假如我们想要在每个相同组件下面添加不同内容 此时用slot就可以让我们组件具有很强扩展性 比如说下图导航...,在写时候并不会把组件里面的内容给写死,而是预留插槽,根据不同情况将不同元素填充到插槽中 使用时,直接将标签放到组件标签中就可以了,会自动放入插槽中 slot里面还可以设置默认值...具名插槽 假设我们要做一个导航 由于里面的内容可能不同,所以放都是插槽,分为左中右 那我们想要在特定插槽里添加内容该怎么做呢,如果直接写入内容,会把3个插槽内容替换掉 所以我们可以给

    61810
    领券