将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。...字符串转换为DOM节点本身并不难，本篇文章主要涉及两个主题： 1 字符串转换为HTML DOM节点的基本方法及性能测试 2 动态生成的DOM节点添加到文档中的方法及性能测试 本文的示例：...DOCTYPE html> <meta name="viewport" content="width...下面我们看看<em>将</em>生成的DOM元素动态<em>添加到</em>文档中的方法。 1.2.0 批量添加节点 被动态创建出来的节点大多数情况都是要<em>添加到</em>文档中，显示出来的。下面我们来介绍并对比几种常用的方案。...1.2.1 直接append 直接append方法，就是生成一个节点就<em>添加到</em>文档中，当然这会引起布局变化，被普遍认为是性能最差的方法。
局部状态就是如此：一个功能只适用于类 将函数转换为类 将函数组件 Clock 转换为类 创建一个名称扩展为 React.Component 的ES6 类 创建一个render()空方法 将函数体移动到...render() 中 在 render() 中，使用 this.props 替换 props 删除剩余的空函数声明 Clock 现在被定义为一个类而不只是一个函数 使用类就允许我们使用其它特性...，例如局部状态、生命周期钩子 为一个类添加局部状态 三步将 date 从属性移动到状态中 在render()中使用this.state.date 替代 this.props.date 添加一个类构造函数来初始化状态...this.state 注意如何传递 props 到基础构造函数的 类组件应始终使用props调用基础构造函数 从 ...结果如下 接下来，我们将使Clock设置自己的计时器并每秒更新一次 将生命周期方法添加到类中 在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要 每当Clock组件第一次加载到
BEM（Block-Element-Modifier）是一种 CSS 模块化方法，旨在简化 CSS 编写并提高代码的可读性和可维护性，它将 HTML 元素划分为三个部分: 块（block）、元素（element...块（block）是 BEM 的核心部分，它定义了一个 HTML 元素的基本结构和行为。块可以使用大写字母命名，例如 .Header、.Main、.Footer 等。...维护性: 添加或重新排列 HTML 标记不再需要您重新考虑整个 CSS 流程。这对于正在进行的大型项目尤其有用。 提高网站速度。 减少重复有助于应用程序运行得更快。...增加类的数量: 您可能需要将多个类添加到一个元素以说明所有样式元素。这可能会给不熟悉 OOCSS 的人带来一些困惑，并且会使您的标记变得混乱。...SMACSS 将 CSS 代码分为五个主要类别: 基础（Base）是 HTML 元素定义默认样式，可以包含属性、伪类等选择器，如 reset.css、normailze.css 之类的格式化元素样式 CSS
3.在你的CSS中定义utilities来编写你的CSS 我们将'utilities'定义为一个CSS类，它实际上只是用来做一个特定的事情，而不是封装整个元素。...所以你试图写一个css类的将链接的颜色变成黑色： 这个.link--black将被CSS的特殊性所覆盖，并且无法覆盖.user-form li风格。...所以，在这种情况下，我会100％确定需要一个额外的css类来处理红色链接。这是在实践中会出现的例子： 然后将其添加到HTML中的每个li元素。...5.利用BEM防止嵌套 一个能够真正防止过度嵌套的策略是名为BEM（Block Element Modifier）的命名策略。...但这是使用BEM的最好例子，而我为什么建议使用它。 6.只有使用!important 作为最后的手段 在一个类上重写一个!
3.在CSS中定义实用工具来干你的CSS 我们将’utilities’定义为一个CSS类，实际上它只用来做一件特定的事情，而不是封装整个元素。...所以你试图为黑色的链接编写一个工具类： .link--black{color: black; } 此处.link–black链接将被CSS特殊性所覆盖，并且将无法压倒.my-form li a样式。...下面是实践中可能的处理例子： a {color:blue; &:hover{color:black; }}.link--red {color:red; } 然后将其添加到HTML中的每个li元素。...这个例子看起来像这样： // HTML snippet // BEM CSS.profile { background-color: white; border:1px solid#ccc;}.profile...这真的是BEM最棒的地方，也是为什么我建议使用它的原因。 6.只使用!inportant作为最后的手段 在一个类上放上!
3.在CSS中定义实用工具来干你的CSS 我们将’utilities’定义为一个CSS类，实际上它只用来做一件特定的事情，而不是封装整个元素。...所以你试图为黑色的链接编写一个工具类： .link--black { color: black; } 此处.link–black链接将被CSS特殊性所覆盖，并且将无法压倒.my-form li a样式。...下面是实践中可能的处理例子： a { color: blue; &:hover { color: black; } } .link--red { color: red; } 然后将其添加到HTML中的每个...5.利用BEM防止嵌套 能够真正防止过度嵌套的一个策略是名为BEM（Block Element Modifier）的命名策略。...这真的是BEM最棒的地方，也是为什么我建议使用它的原因。 6.只使用!inportant作为最后的手段 在一个类上放上!
在 BEM 中，块被写为像 class 的名字一样，如下所示： ? BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性，而即使是最基本的元素也可能改变样式。...如果设置了一个 .button 类的按钮，则可以在任何 元素上选择是否使用 .button 类。...这给我们引入了 BEM 的下一部分 —— 修饰符。 修饰符（Modifier） 修饰符是改变某个块的外观的标志。要使用修饰符，可以将 --modifier 添加到块中。...在传统的 BEM 中，当你使用修饰符时，你应该 将块和修饰符添加 到 HTML 中，以便在新的 .button--secondary 中不重写 .button 样式。 ? ?...他们是： 只把子子元素链接到有意义的块 创建新的块来保存元素 链接孙元素到块 虽然 BEM 建议你将 BEM 元素写作 .block__element ，但它不会规定你的 HTML 应如何。
/*写入你需要的css*/ } 这样的css编写效果就是传统的命名空间的方式写css，它很好得解决了编写单纯全局css互相影响的问题，但是另外一方面它也引申出了一些问题： 维护css的时候，只看HTML...我们只需要设置了一个 .button 类的按钮，然后可以在任何按钮上使用该类，就可以生成该组件的传统样式。...使用.button而不是用button的原因是因为类允许无限的可重用性，而即使是最基本的元素也可能改变样式。...于是就引申出了BEM的modifier。 什么是修饰符 修饰符是改变某个块的外观的标志。要使用修饰符，可以将 --modifier 添加到块中。...所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。
如： .sub-block__element {} .sub-block--modifier {} 1.2 BEM 命名法的好处 BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义...于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。..."button-primary">button> button> div> 复制代码 这种写法从 DOM 结构和类命名上可以了解每个元素的意义...2 如何使用 BEM 命名法 2.1 什么时候应该用 BEM 格式 使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。 并不是每个地方都应该使用 BEM 命名方式。...theme-xmas { } .form--simple { } .form__input { } .form__submit { } .form__submit--disabled { } //对应的HTML
使用适当的语义 在 HTML 和 CSS 编程中有语义标注的概念。语义是指单词的含义和他们间的关系。在 HTML 编程中，意味着你需要使用一个合适的标签名字来标记。下面是一个经典的例子。 <!...并且，这些类可以在每一个有文章功能的页面中使用。 你可以像阅读一本书一样读 HTML 和 CSS。它会给你讲一个故事。通过故事你可以了解故事中的每一个角色和他们之间的关系。...若果你想进一步了解语义相关的内容，看看 《怎么富有语义的为类命名》、《CSS 命名不简单》 和 《富有语义和容易识别（的代码命名）》，再看 《关于 HTML 命名和前端架构》。...splash 这个类不但包含了本身的样式和逻辑，同时也包含了它的子节点的。为了解决这个问题，我们可以将这段代码分离为两个新的类。...我们可以将 splash 作为一个一般的全屏类，它可以拥有任何子节点。所有子节点关注的属性，都在 splash content 中，与父节点的属性是完全解耦的。
BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。...那么你将错失最重要的东西。除非使用BEM让代码增加了不必要的维护困难，或者这么做确实让代码更难读了，那么你在使用它之前就要三思而行了。...BEM的命名中包含了模块名，长长的命名会让HTML标签会显得臃肿。...因为命名长，我们是不是可以用子代选择器来代替BEM命名？这样至少在HTML编写时，让HTML标签看起来美观一点。 3. 什么时候用BEM？...关于原子类(短类)与BEM BEM可以不需要用到原子类，但是如果已经引入了类似Bootstrap的框架，也没必要强制避免使用原子类，比如pull-right、ellipsis、clearfix等等类，这些类非常实用
HTML将完全相同（只加了少数的class前缀）。 在这个例子中要特别注意.o和.c前缀： ? .o-和.c-是什么意思呢？...你注意到了我是怎样同时保持BEM的实现还有布局的？ 这种实现对我来说使我更加清楚了。 你瞄一眼就可以看到我的CSS将写些啥。 清晰明了。 ?...当然，如果你喜欢的话，你可以将一个class标记给input，但是如果你不能访问 ? 我觉得另一个对象不应该使用.o-前缀的例子是字体。 他们得到特别待遇（我稍后会解释）。...您应该像排列对象那样将相同的一套规则应用于排版类。 这意味着你不应该在排版类中添加margin或padding。而这些margin或padding应该直接添加到组件。...结语 在本文中，我向您展示了如何使用命名空间填补BEM的遗憾。通过包含命名空间，我终于实现了一个好的架构中寻找的所有四个标准： 类必须尽量少地添加避免HTML膨胀。
例如在日常开发项目，需要组件化时，组件内部的class样式类管理就非常的杂乱。 大部分公司的命名规则还是只有大小驼峰、使用英文等这些基础的命名规则。...CSS架构也能让html与css更好的解耦，能更好的抽取样式中可复用的部分，使你的html代码更具语义，也符合了HTML5中想让日常开发更具有语义化的理念。...BEM的简介BEM就是：B代表：Block（块），独立实体，独立的意义，每个页面都可以看做是多个Block组成,见下图1-1；E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素...，多个元素形成一个组件，见下图1-2；M代表： Modifier （修饰符），block 或 element 上的标记，是描述Block或Element的属性或状态，同一Block或Element可以有多个...html代码更具语义使css代码更具模块化多人协作的时候，也能高效避免命名重复问题更加的规范规模化减轻CSS命名烦恼
向 5 岁小孩解释 BEM 规范 BEM 规范试图将整个用户界面分解成一个个小的可重复使用的组件。...如果使用 BEM 命名规范的话，这些元素的类名都可以通过在两条下划线后加上元素名称来产生。...如果使用 BEM 的话，这些修饰符的类名都可以通过在两条连字符后加上元素名来产生。...这就是 BEM 的基本用法。 个人来说，我在小项目中一般只用连字符分割法来写类名，在用户界面更复杂的项目中使用 BEM 方法。 为何要使用命名规范？...能正确命名 CSS 中的类名可以让你的代码变得更易理解和维护。 如果你选择 BEM 命名规范，在看标记语言（markup）时就更容易看清各个设计组件/区块之间的关系。 感觉不错吧？
语义化 BEM 的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。...通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。...item--active { // 省略... } .card__link{ // 省略... } .card__link:hover{ // 省略... } 从上面的代码可以看出，我们样式类没有一点嵌套关系...比如我们有如下的 html 结构： <input class=.../** @define Foo */ .Foo {} /** @define Bar */ .Bar {} 如果一个类不属于任何的 block，我们又要怎么做，才不会导致 styleint 报错呢？
bem的优势 最近在开发一个组件库，选择了BEM作为css的组织形式，主要考虑了以下三个方面的优势： 逻辑分层，容易理解。...BEM基于block、element、modify的组织形式，基本与组件的组织形式吻合。只要遵循了BEM的命名方式，对于开发和修改组件，哪些元素和状态已经存在，都可以直观的看出来。...反过来，通过html标记的BEM命名，可以直观地理解组件的功能和依赖关系。 强约束，便于团队协作。...只要定义好了大的框架和命名，那么团队其他成员基于BEM的规范进行开发，理解成本降低，而且基本不存在样式冲突的问题。...预编译器支持 目前常用的css预编译器，如sass、less、stylus，基本对BEM的支持都很好，举个例子(语法差异暂时忽略)： .block { &__element { }
组织 CSS 代码：BEM 方法论 我记不清曾经多少次在CSS类中使用包揽一切的名字了。比如：·.button·、·.page-1·、·.page-2·、·.custom-input·。...的时候，你可以用且只能用类来命名。...是的，你的 HTML 文件会超负荷，但是不用担心，与 BEM 带来的好处相比，这只是个小小的缺点。 示例 以下是一个练习。你可以去你最喜欢或最常用的网站，然后想想看哪些是块、元素和修饰符。...将npm-run-all添加到项目依赖项中：npm install npm-run-all --save-dev：有了它我们就可以同时运行多个脚本。...将这些脚本添加到package.json： { ...
反思BEM 在“学习爱BEM”中，我要表明我对BEM语法的新感受。 我很高兴地报告说，经过2年以上，我仍然对我的选择感到满意。 当我们在项目中选择代码风格时，我们使用BEM和ITCSS的组合。...我的经验告诉我，这导致不必要的长类名（BEM已经有错，并且没有必要尝试在CSS中反映HTML的结构。 解决这个问题花了我很长一段时间。 在CSS中反映HTML的底层结构似乎是一个干净的想法。...缩短修饰符长度 在BEM中，修饰符类用两个连接符表示。 例如，我们有一个带有基类c-button的按钮。 定义一个大按钮，它是常规按钮的变体，使用c-button--large修饰。...使用这种做法可以缩短HTML，但我认为这是有问题的。 BEM是如此强大之处在于重构。 当您重构项目时，您通常会在代码库的大部分内进行搜索，还有很多是跨越多文件进行搜索。...举个例子：如果你的类命名为c-button--large，如果你想去除它，你可以在项目中包括javascript,html, css中搜索使用到这个字符串的地方。 使用这种方法，你能寻找到什么？
BEM 将页面的类名分为块（Block）、元素（Element）、修饰符（Modifier）。...命名规则：[-][-后代名][--修饰符]，这样的命名方式，在编写 HTML 和 CSS 的时候有几个好处： 有助于区分组件的根元素，后代元素，以及用来修饰的类； 降级类名重复的几率...，将大大降低复杂度。...除了将样式归类之外，每个类别还有一些适用的准则。 基础规则 基础规则作用于元素选择器，用于定义 HTML 标签的默认样式。基础样式主要用于设置标题大小，默认链接颜色，默认字体样式以及body背景等。...SMACSS 中允许在布局样式中，使用 ID 选择器，有助于在 HTML 中一眼区分出节点在布局中的位置。其他的非 ID 选择器的类，需要添加 l- 前缀，表示这属于布局样式。
地址列表初步呈现效果 3、改变颜色 （1）关于颜色的改变前面在做轮播图的时候我们已经处理过，当时我们的解决方法是用在开发中工具中找到它的class类名，然后我们使用vue的穿透选择器改变这个类名的基本样式...那么，什么是BEM？...其实这个我理解的也不是很透彻，不过大概就是一种设计思想，将css的命名进行了规范，然后就是抽离了css样式文件，一个样式对应一个html块，我这里丢两篇文章，大家可以看看： CSS BEM 书写规范...首先，我们新建一个overiride.css文件，专门用于覆盖组件的样式； 然后，我们F12打开开发者工具，看看这个AddressList.vue的√图标类名； ?...参考学习 有赞Vant组件库的引入 AddressList地址列表 CSS BEM 书写规范 如何看待 CSS 中 BEM 的命名方式？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
