理想的状态下，我们开发一套组件的过程中，我们应该可以随意的为其中元素进行命名，而不必担心它是否与组件以外的样式发生冲突。...BEM最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用（不使用）它。随着接触的多了，有了经验积累，你慢慢就会知道怎么用，这些问题也不再是问题。 4 你是不是用错BEM了？...关于BEM修饰器 BEM修饰器代表着元素的状态，但有时候元素的状态需要js来控制，此时遵循规范没有任何好处，比如激活状态，BEM推荐的写法是： .block__element { display...在项目中，使用原子类之前应该考虑一下，这个场景是否变动大而且不可复用，如果是的话，我们可以放心的使用原子类。...*/ } 这还仅仅只有两个组件而已，实际项目中，十几个或几十个组件，难道我们要每个组件都检查一下来“新组件名是否和以往组件的子元素命名冲突了”么？
可读性和可维护性: BEM 使用简洁明了的命名约定，使得 CSS 代码易于理解和维护。 增强可扩展性: BEM 的结构使得页面元素易于扩展和修改，不会影响其他部分的样式。...避免样式冲突: BEM 的命名约定避免了样式冲突，每个块和元素都有独立的命名空间，不会受到外部样式的影响。 缺点: 命名冗长: BEM 的命名规范较为严格，可能导致类名过长，增加了代码量和阅读难度。...两个基本原则: 独立的结构和样式（即不要将定位、尺寸等布局样式与字体、颜色等表现样式写在一个选择器中）。...命名规则 SMACSS 推荐使用前缀来区分不同部件: 基础规则是直接作用于元素的，因此不需要前缀，一般使用元素、属性、伪类等选择器。不应该出: class、ID、!important 等。...命名约定：ITCSS需要遵循一定的命名约定和规范，有时可能需要花费额外的时间和精力来命名和组织样式代码。 可能导致过度设计：过度遵循ITCSS的规范可能导致样式表过度设计，增加不必要的复杂性。
__ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...1.1 BEM 命名模式 BEM 命名约定的模式是： .block {} .block__element {} .block--modifier {} 每一个块(block)名应该有一个命名空间（...block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。 block--modifier 代表 .block 的不同状态或不同版本。...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。...BEM 格式 在当前流行的 Vue.js / React / Angular 等前端框架中，都有 CSS 组件级作用域的编译实现，其基本原理均为利用 CSS 属性选择器特性，为不同的组件生成不同的属性选择器
目录 术语 规则声明 选择器 属性CSS 格式 注释 OOCSS 和 BEM - ID 选择器 JavaScript 钩子 - 边框Sass 语法 排序 变量 Mixins 扩展指令...如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时，每个选择器独占一行。...给没有自注释的代码写上详细说明，比如： 为什么用到了 z-index 兼容性处理或者针对特定浏览器的 hack OOCSS 和 BEM 出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：...”，是一种用于 HTML 和 CSS 类名的命名约定。...BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。
BEM BEM 是一种非常有用、强大且简单的命名约定，可以说是一个CSS命名规范，也可以说是一种思想。它使前端代码更易于阅读和理解、更易于使用、更易于扩展、更健壮和明确，并且更加严格。...这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。...而 BEM 就不一样了，虽然看上去很丑，但我们能清晰地看到有个叫 .site-search 的块，它内部是 .site-search__field 和 site-search__button 两个元素。...，它们实现的功能除了一些最基本的如 CSS 局部作用域之外还有一些独有功能，就比如下面这些： 全局选择器 基于状态的样式 客户端与服务器端渲染 缓存 内置自动前缀 媒体查询 选择器嵌套 内置动画支持 其他插件和软件包...「优点：」 优点有很多，比如 CSS in JS 本质上是 JavaScript 代码，因此我们可以将复杂的逻辑应用于样式规则，例如循环、条件、变量、基于状态的样式等等， 这样的话如果我们需要创建有动态功能的复杂
以下是一些保持 CSS 整洁的技巧： 代码风格规范 制定并遵守统一的代码风格规范，例如使用一致的命名约定、缩进和括号样式。这有助于保持代码的一致性，并使其更易于阅读和维护。...这些方法论提供了一种有结构的方式来编写和组织 CSS。虽然它们可能会生成比你单独为每个选择器制定规则时多出一些冗余代码，但从长远来看，它们能让你的代码更加有序。...在 BEM 中，一个“块”指的是独立的组件，比如按钮、菜单或徽标。一个“元素”则是属于某个块的子组件，例如列表项或标题。修饰符用于标识块或元素的不同状态或变体，从而改变它们的样式或行为。...例如，以下是来自关于 BEM 命名约定页面的 HTML 示例类： /* BEM 示例 */ .button { background-color: blue; color: white; }...）：通过将样式分为基本、布局、模块、状态和主题等类别来组织 CSS。
$代表jQuery对象，同时也是一个函数对象 $()和jQuery()是jQuery的核心函数，执行这两个元素返回的是一个DOM元素 $()是一个函数，等同于jQuery()，可在括号内传参数，传参后可获取元素...$(“.one”)表示获取class=“one”的元素，返回一个jQuery对象 $(”.one”).onclick表示class=”one”的点击事件 $.post() $.get() $.ajax...() 都是jQuery对象的方法 jQuery中，多个选择器是依次执行的，不是同时执行的 ，是在上一个选择器执行完的基础上，才开始执行下一个。...例如：$(“li:gt(0):lt(2)”) // 选择第二个和第三个li,gt(0)表示下标大于0的，lt(2)表示下标小于2的。...下标大于0为黑色区域，此时，下标为1的蓝色区域下标变为0，下标为3的粉色区域下标变为1，执行过滤选择下标为2后，即为红色框内，也就是最初的下标为1和2的元素，即第二个和第三个li元素(假设所有的颜色框均为
BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称 使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长...） 如何使用BEM 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（Element） 用于修饰块或元素，体现出外形行为状态等特征的...，可作为一个修饰器（Modifier） 在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔，以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔...，不使用ID或标签名来约束选择器，且CSS（或者SCSS编译后的CSS）中的选择器嵌套不超过2层，增加效率和复用性，减少选择器之间的耦合度 比较常见的嵌套情景：需要通过块状态对内部元素进行调整时 .search-form...，某些时候有必要） */ .search-form_theme1 .search-form__input {} /* 错误：使用了标签 */ button.search-form__button {
现在用 Bootstrap 的弹窗组件，举一个更加具体的例子： 鼠标放上去和没放上去的状态是有区别的。...另外，现在网上已经有非常多的文章在介绍 BEM 了，耐心找，肯定能找到优秀的教程的。今天的文章会分享比较少人介绍的两种 CSS 方法论：SUIT CSS 和 SMACSS。...命名规则：[-][-后代名][--修饰符]，这样的命名方式，在编写 HTML 和 CSS 的时候有几个好处： 有助于区分组件的根元素，后代元素，以及用来修饰的类； 降级类名重复的几率...SMACSS 中允许在布局样式中，使用 ID 选择器，有助于在 HTML 中一眼区分出节点在布局中的位置。其他的非 ID 选择器的类，需要添加 l- 前缀，表示这属于布局样式。...状态规则 状态是用来描述模块在不同状态下的外观，使用 is- 前缀，这有助于我们在 HTML 中区分元素的状态。
开发者通常会忽视一个基本的部分，那就是实施CSS命名规范，有些人会在调试和管理庞大的代码库时才意识到糟糕的CSS代码有多可怕。...无论你是否意识到，在编码测试或技术面试中，你的命名习惯都会传达关于你开发实践的信息。它们可以用来评估你的行为和效率。因此，在本文中，我们将展示CSS命名的最佳实践，以提高代码质量。...相关的样式：与相关元素相关的样式块应放置在样式表中。 简洁的CSS选择器：CSS选择器不应过长或过于嵌套，也不应使用复杂的后代选择器。 适当的选择器命名：选择器应该具体命名为其应用的元素。...BEM（块、元素、修饰符）：BEM是一种流行的CSS命名约定，由俄罗斯科技公司Yandex开发，旨在提供一种模块化的CSS样式方法，提供代码可重用性，并使大规模CSS的维护成为可能。...标准化命名和前缀：采用统一的命名约定（例如，BEM的块名称或原子CSS类）应该在整个项目中标准化，并保持一致性。
面对这种项目，首先得总体有个思路：将大模块拆分成小模块，一个一个的突破，找到其中之间每个组件的联系，这样写增加新的业务就上手容易一点了。 其实Vue项目，主要搞清楚这几点，上手相对容易一点。 1....key 配合 v-for，以便维护内部组件及其子树的状态。...-- 使用 BEM 约定 --> .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color...第二种方式 components/ |- MyComponent.vue 基础组件命名 ❝「应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如...❝在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
key 配合 v-for，以便维护内部组件及其子树的状态。...官方提供了3中解决方案 scoped Style 中加入 scoped 使用CSS Modules 来设定CSS 作用域` 基于 class 的类似 BEM的策略 // 1, scoped ...-- 使用 BEM 约定 --> .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color...第二种方式 components/ |- MyComponent.vue 基础组件命名 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base...在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。...这里刚开始使用 bem 的时候容易犯一个问题，就是把 ul 和 li 的样式写成 card__content__list 和 card__content__list__item 因为这样更能体现层级的关系...这有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...: ignore */ .no-flexbox .Component { display: block; } 总结 BEM 最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用或不使用它...已收录，有一线大厂面试完整考点、资料以及我的系列文章。
有兴趣可以看看： 百度前端编码规范 CSS命名其实挺随意的，使用驼峰、-、_都可以，并不影响使用，常用的应该是-和下划线_连接。...平时我们不会关注这个，这其实是CSS的属性选择器，打包的时候给每个标签都添加一个唯一的data-v-hash。...M:modifier 对应节点的状态，disabled 最终class名 dialog__button--disabled 使用BEM的element：el-cascader-node__label、...BEM：隔离和污染做的很好，但是名字太长长，命名困难，多人协作的情况下通过人为约定约束实现BEM太过困难。...在我看来，scoped > module > BEM，引用工具来约束和人为约束肯定是选择使用工具去约束，module和scoped对比，也只是工具对类名的不同处理。
为组件样式设置作用域 对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。 这条规则只和单文件组件有关。你不一定要使用 scoped 特性。...设置作用域也可以通过 CSS Modules，那是一个基于 class 的类似 BEM 的策略，当然你也可以使用其它的库或约定。...-- 使用 BEM 约定 --> .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color...基础组件名 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。...*/ 复制代码 四、谨慎使用 (有潜在危险的模式) 1.
为了解决冲突就需要进行模块化区分，没有了命名冲突，更好的让组件间沙箱化，而CSS Module就是css模块化的实现方式之一 CSS Module 在打包的时候会将类名转换成带有hash值的新类名，...，它的实现原理是通过PostCSS来实现，通过给想对应的dom新增一个属性，同时给css选择器新增一个对应的属性，来对应这个唯一的dom，如下所示 ?...啊乐同学：你说CSS Module是 css 模块化的一种实现方式，还有其他CSS模块化实现方式吗？ 有的，比如BEM 命名规范，还有下节会介绍的 CSS in JS 这里简单介绍下BEM ?...答：可以的，styled-components team 专门为Vue开发了一个 vue-styled-components，和React的styled-components用法非常相似，有兴趣可以玩玩...拓展： styled-components 官网 3.CSS 原子类 其实这个概念已经很老了，本质上也是一种编写 CSS 的思想，简而言之就是通过用原子类构造选择器，比如我们定义一个base.css
BEM 命名法可以使得选择器更规范，更清晰，更具语义。...这样我们就可以根据亲元素来划定选择器的命名空间并传达该选择器的职能，例如根据这个选择器是一个子元素（__）还是其亲元素的不同状态（--）。 由此，.page-wrapper 是一个独立的选择器。...BEM 命名法虽然不太好看，而且相当冗长，但是它使得我们可以通过名称快速获知元素的功能和元素之间的关系。与此同时，BEM 语法中的重复部分非常有利于 gzip 的压缩算法。...无论你是否使用 BEM 命名法，你都应当确保 class 命名得当，力保一字不多、一字不少；将元素命名抽象化以提高复用性（例如 .ui-list，.media）。...牢记：class 无所谓是否语义化；应当关注它们是否合理。不要强调 class 名要符合语义，而要注重使用合理且不会过时的名称。 过度修饰的选择器 由前文所述，过度修饰的选择器并不理想。
过多的嵌套会增加代码的复杂性和选择器的特异性，降低代码的可读性和维护性。 使用父元素选择器：尽量使用父元素选择器 & 来限定样式的作用范围，避免使用全局选择器或依赖于特定的 HTML 结构。...这样可以使样式更具通用性，减少代码改动时的影响范围。 提取共用的样式：当有多个选择器需要应用相同的样式时，可以将这些样式提取为一个共用的 class 或 mixin，然后在需要的地方引用。...这样可以减少代码冗余，提高代码的可维护性。 使用 BEM 命名规范：BEM（Block Element Modifier）是一种常用的 CSS 命名规范，可以有效地管理复杂的嵌套选择器。...BEM 规范将样式分为 block、element 和 modifier 三个层级，使代码结构更清晰，易于理解和维护。...综上所述，通过限制嵌套层级、使用父元素选择器、提取共用样式、使用 BEM 命名规范和利用 SCSS 的特性，可以在 SCSS 中实现复杂的嵌套选择器并确保代码的可维护性。
，下划线分割单词 # 组件 官方文档推荐及使用遵循规则: PascalCase (单词首字母大写命名)是最通用的声明约定 kebab-case (短横线分隔命名) 是最通用的使用约定 组件名应该始终是多个单词的...scoped 中出现 官方文档说明:在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的 分类的命名方法(使用单个字母加上"-"为前缀) 布局（grid）（.g-）...模块（module）（.m-） 元件（unit）（.u-） 功能（function）（.f-） 皮肤（skin）（.s-） 状态（.z-） 统一语义理解和命名 布局（.g-） 语义 命名 简写 文档...父级选择器的伪类选择器 (:first-letter, :hover, :active etc) 伪类元素 (:before and :after) 父级选择器的声明样式 (.selected, .active...-- 使用 BEM 约定 --> // good .c-Button { border: none; border-radius: 2px; } .c-Button--close
Class选择器 作用与特点 Class选择器通过元素的class属性来选择元素，具有更高的灵活性和重用性。一个class可以在多个元素上使用，也可以在一个元素上使用多个class。...随意命名class可能导致代码难以阅读和维护。 避免：遵循BEM（Block Element Modifier）或其他命名约定，确保class名称具有描述性和语义性。...问题：过度使用，导致选择器权重问题。过多的嵌套和复合class选择器可能导致优先级混乱。 避免：尽量保持选择器简洁，合理使用组合选择器和伪类，避免不必要的权重增加。...在实际应用中，合理选择使用哪种选择器，遵循良好的命名规范，可以有效避免样式冲突和维护难题，提升开发效率。...随着CSS的发展，诸如属性选择器、伪类选择器等高级选择器也日益重要，它们进一步丰富了CSS的表达能力，值得深入学习和应用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
