例如，上面提到的输入框 Block，当鼠标悬停时边框高亮，那么这个高亮的效果就应该用 Modifier 来实现。...通常我们会认为浏览器是这样工作的：找到唯一ID元素ul-id —> 把样式应用到li元素上。...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。...，上面在 less 或 sass 中可以改成如下结构： .card{ // 省略.......Component { display: block; } 总结 BEM 最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用或不使用它。
__ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。...2 如何使用 BEM 命名法 2.1 什么时候应该用 BEM 格式 使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。 并不是每个地方都应该使用 BEM 命名方式。...当需要明确关联性的模块关系时，应当使用 BEM 格式。 比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义： .hide { display: none !...当你选择了这种局部作用域的写法时，在较小的组件中，BEM 格式可能显得没那么重要。但对于公共的、全局性的模块样式定义，还是推荐使用 BEM 格式。
color:blue; }}这一类是最常见的这个一类是我们日常所常见的&的高级用法作为内层选择器表示对父选择器的引用父选择器运算符 & 的作用，就是让当前的选择器和父级选择器，按照特定的规则进行连接。....long { color: red;}.meng ~ .meng,.meng ~ .long,.long ~ .meng,.long ~ .long { color: red;}将 & 用在一个使用逗号分隔的选择器列表中...每个块在逻辑上和功能上都是相互独立的。 */.block {}/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 ...*/.block__element {}/* 修饰符用来定义块或元素的外观和行为。...同样的块在应用不同的修饰符之后，会有不同的外观 */.block--modifier {}通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免
一个vue文件在长期迭代中css会越来越冗余，它不像html和js那么好删除，html多了页面会展示，js你只要看下它用的地方就可以了，然而css比如scss、less都是用嵌套语法，通过搜索删除那么有可能它在...html有定义，但是它的上级不对，一样是无效的css，或者css使用了bem的写法，像html上写的是a--b,但是scss写的方式是a{ &--b{} },搜索起来还非常不方便，通过这个工具，你可以快速找到无用的...（我匹配css的方式就是参考了jsdom的querySelector相关源码，也是使用动态模板生成函数实现的） 存在的缺陷 1 所有的伪类选择器都认为是有用的 2 所有的属性选择器 (除了[...attribute] 和 [attribute=value] 可以完美过滤)，其他都是使用js的includes方法来匹配。...3 过滤结果只针对该文件是无用,但有可能该css元素是用来影响子组件的，需要你自己确认，这也是为什么我不像其他工具去加入webpack打包的只是打印出来自己选择是否删除的原因，如果考虑到对子组件的影响
你可以阻止一个组件的选择器针对子组件中的元素，或者如果需要，也可以允许它们到达。 你不再需要BEM风格的类名。 此外，近度在级联中变成了一等公民。...此时，你可以使用普通的后代选择器来实现这一点。但当你在范围内应用内部边界或在页面上重叠多个范围时，新的、以前不可能的选项开始出现。让我们看看它们是怎么做的......你可以在DevTools中检查，看到每个范围是如何根据其最近的接近性来覆盖另一个的： 这里的问题是，选择器的特异性仍然是优先的，所以如果外部范围以比内部更高的特异性针对一个元素，外部范围的样式将会应用。...这样，当两个范围针对同一个元素时，你可以控制哪一个优先。而不是总是让内部范围赢，你可以调整选择器的特异性，使得更高特异性的选择器优先，不管它属于哪个范围。...如果你使用了复杂的BEM类名系统，并努力使所有的选择器特异性保持一致，想想这可以带来的自由。
其实平常我们使用 Vue、React这类框架时，就已经使用到了CSS模块化。...BEM BEM 是一种非常有用、强大且简单的命名约定，可以说是一个CSS命名规范，也可以说是一种思想。它使前端代码更易于阅读和理解、更易于使用、更易于扩展、更健壮和明确，并且更加严格。...通过构建工具的帮助，将 class 的名字或者选择器的名字作用域化（类似命名空间化）。 我们之前使用原生 CSS 时，写两个名字相同的 class，样式肯定会冲突。...CSS 也在不断发展，随着各种新的标准引入，被浏览器大幅度支持后，我觉得将来甚至连 Scss/Less 都不需要，完全可以使用原生 CSS 配合 CSS 处理工具以及相关规范约束搞定开发，搞太多无用的东西反而徒增烦恼...CSS Modules 仍然使用 CSS，只是让 JS 来管理依赖，能够最大化地结合 CSS 生态和 JS 模块化能力，在我来看是最优的解决方案了。
尽管我们有一些使用了多年的客户端，但要记住你永远不会是唯一一个工作于应用程序的人。仅仅因为你的一次性元素和配置对你有意义，并不意味着它们对下一个可能继承应用程序的人有意义。...我们写了一些实用程序文件，这些文件在应用程序之间共享，使用一些常用的实用程序可以减少为每个元素编写特定样式的需求。 一个很好的例子是我们如何使用margin和padding实用程序。...另外，因为我将自己的悬停定义在自己的锚点上，所以红色链接将会变成黑色悬停，而不必定义任何其他样式。...使用BEM的一个很好的例子就是当你有一个真正具体的样式的组件时，如果使用实用程序会太麻烦和复杂的话。...在谈论JavaScript或jQuery插件时，我要说的是，对于任何你使用的具有很好集成选项的真正常见组件来说，情况也是如此。其中的一些例子是照片轮播的JavaScript转盘，或日期选择器。
BEM解决的问题 css的样式应用是全局性的，没有作用域可言。...使用BEM我们可以获得更多的描述和更加清晰的结构，单单通过我们代码中的命名就能知道元素之间的关联。BEM真是强大。...因为命名长，我们是不是可以用子代选择器来代替BEM命名？这样至少在HTML编写时，让HTML标签看起来美观一点。 3. 什么时候用BEM？...如果它是后者（即恰巧在.content的内部，而不总是在）我们就不需要使用BEM。 然而，一切都有可能潜在地用到BEM。...这样的样式文件只会越写越糟糕，可以说，当我们用子代选择器来定位元素时，这个样式文件就已经注定是要被翻来覆去的重构的了，甚至，每个来维护这个文件的人都会将其重构一遍。
Context）是Web页面中的一种CSS渲染模式，它决定了元素如何布局和相互作用。...完善样式：对子元素进行样式调整，如添加背景色、边框等，使之更符合设计要求。 学习和使用CSS Grid布局可以优化网页排版布局，增强网页的美观度和交互性。...提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过��时间的默认值为 0 提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效...提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过渡时间的默认值为 0。...PostCSS与其他CSS预处理器如Sass和Less的不同之处在于，PostCSS不需要创建自己的语言或者语法，而是可以直接使用CSS原生的语法和属性。
css in js时，往往是将样式加入到元素的style属性中，会大量增加元素的内联样式，并且可能会有大量重复，不易阅读最终的页面代码 「css module」 非常有趣和好用的css模块化方案，编写简单...如何应用样式: css module带来了一个新的问题：源代码的类名和最终生成的类名是不一样的，而开发者只知道自己写的源代码中的类名，并不知道最终的类名是什么，那如何应用类名到元素上呢？...为了解决这个问题，css-loader会导出原类名和最终类名的对应关系，该关系是通过一个对象描述的 这样一来，我们就可以在js代码中获取到css模块导出的结果，从而应用类名了 style-loader.../ sass中文文档2（非官方）：https://sass.bootcss.com/ LESS的安装和使用 从原理可知，要使用LESS，必须要安装LESS编译器 LESS编译器是基于node开发的，可以通过...中书写属性集，类似于LESS中的混入，可以利用CSS的新语法定义一个CSS代码片段，然后在需要的时候应用它。
当然在更多的情况下，可能嵌套的层次还会更深，另外，这里单单用了类选择器，而采用类选择器的时候，可能对整个网页的渲染影响更重。...BEM(Block-Element-Modifier) 如何看待 CSS 中 BEM 的命名方式？...BEM解决了模块复用、全局命名冲突等问题，配合预处理CSS使用时，也能得到一定程度的扩展，但是它依然有它的问题： 对于嵌套过深的层次在命名上会给需要语义化体现的元素造成很大的困难 对于多人协作上，需要统一命名规范...: serif-font; font-size: 30px; line-height: 35px; } 应用到元素上可以这样使用： import type from "....总结 至此，所有的CSS Modules用法就已经介绍完毕了，至于后续的还有如何应用于React、Vue以及Angular中，相信掌握了上面的内容之后就可以知道怎么写了，如何与预处理器一起使用相信问题也不大
举个例子： .listing { font-size: 18px; line-height: 1.2; } 选择器 在规则声明中，“选择器” 负责选取 DOM 树中的元素，这些元素将被定义的属性所修饰...类名建议使用破折号代替驼峰法。如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时，每个选择器独占一行。...给没有自注释的代码写上详细说明，比如： 为什么用到了 z-index 兼容性处理或者针对特定浏览器的 hack OOCSS 和 BEM 出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：...想要了解关于这个主题的更多内容，参见 CSS Wizardry 的文章，文章中有关于如何处理优先级的内容。 JavaScript 钩子 避免在 CSS 和 JavaScript 中绑定相同的类。...Book 边框 在定义无边框样式时，使用 0 代替 none。
发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React，只要你使用 Webpack，可以在 Vue/Angular/jQuery 中使用。是我认为目前最好的 CSS 模块化解决方案。...important 和复杂的选择器权重计数表，提高犯错概率和使用成本。...使用双符号 __ 和 -- 是为了和区块内单词间的分隔符区分开来。虽然看起来有点奇怪，但 BEM 被非常多的大型项目和团队采用。我们实践下来也很认可这种命名方法。...幸运的是，CSS Modules 这点做的很好： 如果我对一个元素使用多个 class 呢？ 没问题，样式照样生效。 如何我在一个 style 文件中使用同名 class 呢？...如果我在 style 文件中使用了 id 选择器，伪类，标签选择器等呢？ 没问题，所有这些选择器将不被转换，原封不动的出现在编译后的 css 中。
让我们深入了解CSS是如何发展至今的（或者直接滚动到最后一节，展望未来…）。 CSS选择器——样式的不断演变之路 CSS选择器就像标签游戏中的精确指令。它是一条规则，用于识别需要样式化的HTML元素。...但问题出现在我们尝试在浮动元素下方添加更多元素时。突然间，我们的页脚就像自己闯荡一样，紧贴在DOM结构中更高的内容旁边。哦，这个混乱！ 这是由于浮动元素的一个特殊特性导致的。...还记得居中元素时的困扰吗？不论是垂直居中还是水平居中，组合使用各种属性如margin、position、top、left和transform，足以让人头晕目眩。...根据后代元素来设置样式的一种方法。基本上，你可以根据子元素来应用样式，这意味着它可以作为一种理想的父选择器。然而，你也可以在父元素内部对子元素进行样式设置。...和Safari中得到支持，并在Chrome的标志下使用 子网格是完善网格布局的一部分，可以将网格布局应用于网格项的子元素，从而实现更一致和可维护的布局。
在大型 Web 应用里面，CSS 的组织是一件复杂和凌乱的事情，你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。...其语法支持变量、选择器嵌套、继承（extend）、混合（mixin）和一些逻辑语句，同时还支持跨文件的导入功能，因而使得开发者能够很好的使用编程思想书写样式。...在模块中需要注意的是选择器一律选择 class selector，避免嵌套子选择器，减少权重，方便外部覆盖。 状态 状态 class 一般通过js动态挂载到元素上，可以根据状态覆盖元素上特定属性。...首先一个页面可以按层级依次划分未多个组件，其次就是单独标记这些元素。BEM通过简单的块、元素、修饰符的约束规则确保类名的唯一，同时将类选择器的语义化提升了一个新的高度。...CSS IN JS 这个理念是由 Facebook 工程师 vjeux 在一次分享中提出的，用来解决在 React 中使用 CSS 的问题。
相关的样式：与相关元素相关的样式块应放置在样式表中。 简洁的CSS选择器：CSS选择器不应过长或过于嵌套，也不应使用复杂的后代选择器。 适当的选择器命名：选择器应该具体命名为其应用的元素。...使用模糊的选择器名称会导致冲突、样式覆盖和意外行为。 避免使用ID进行样式设置：使用ID来应用样式可能会在修改该组件的样式时出现问题。...下面的代码块展示了在命名这些元素的类时应用BEM的方法： /* The parent card element */ .card { /* styles for the parent component...使用BEM，我们还可以在CSS中编写样式时表示一个元素是特定类的子元素。...这包括处理悬停、激活、禁用或隐藏元素的样式。 主题（Theme）：这个最后的类别涉及使用样式来为项目应用颜色主题。
BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称 使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长...） 如何使用BEM 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（Element） 用于修饰块或元素，体现出外形行为状态等特征的...，可作为一个修饰器（Modifier） 在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔，以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔...保证各个部分只有一级 B__E_M ，修饰器需要和对应的块或元素一起使用，避免单独使用 <!...，仅以类名作为选择器，不使用ID或标签名来约束选择器，且CSS（或者SCSS编译后的CSS）中的选择器嵌套不超过2层，增加效率和复用性，减少选择器之间的耦合度 比较常见的嵌套情景：需要通过块状态对内部元素进行调整时
现在是时候学习一下如何添加样式了。 本章笔者在读完之后，根据原文的解构做了一些调整，主要包括选择器及其详解、层叠与特异性及继承、以及如何应用样式，最后延伸了一下性能的知识。希望你看完之后能够有收获。...选择器 组合子 格式 描述 分组选择器 , s1, s2, s3 这个是笔者自己加的，为了防止有的初学者不知道如何同时给多个选择器同时应用样式。逗号分隔的多个选择器会分别独立应用。...2.1.2 伪元素 在涉入前端之初，大家一定被问到过伪元素和伪类的区别是什么。在展开之前，我们先来看看这个问题。 伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。...:valid/:invalid当输入有效/无效时应用样式。 :in-range/:out-of-range用于type为number的input输入在范围内和超出范围时应用样式。...使用同一的规范来编写 CSS 会帮助我们简化选择器，降低特殊性。 最后，在大的网站中，每个元素所应用的规则会有很多，其特殊性也比较复杂。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
