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

你是怎么处理BEM孙子的?

BEM(Block Element Modifier)是一种前端开发的命名方法论,用于构建可维护且可扩展的样式代码。它的核心思想是将页面中的组件(block)、组件的子元素(element)和组件的不同状态或变体(modifier)分别命名,并通过特定的命名约定来表示它们之间的关系。

在处理BEM命名时,可以采取以下步骤:

  1. 理解BEM结构:首先要了解BEM的基本概念和命名规范,包括block、element和modifier的定义和命名方式。
  2. 根据设计稿划分组件:根据设计稿中的不同模块和元素,将其划分为独立的组件(block),并在组件内部标识出各个子元素(element)。
  3. 使用合适的命名约定:根据BEM的命名约定,为每个组件、子元素和状态/变体添加相应的命名,以反映它们之间的关系。
  4. 避免冗余和嵌套:避免在命名中使用冗余的词语,并尽量避免使用嵌套的BEM结构,以保持命名的简洁性和可读性。
  5. 保持一致性:在整个项目中保持一致的命名风格,以便于团队成员之间的交流和协作。

BEM的优势在于:

  1. 可维护性:BEM通过明确的命名规范和结构,使得样式代码更易于理解和维护。开发人员可以迅速找到所需的组件和样式,并且修改一个组件的样式不会影响到其他组件。
  2. 可扩展性:BEM的模块化结构使得添加新的组件或元素变得简单。通过按需引入和定制样式,可以快速构建出复杂的界面,并保持良好的组织结构。
  3. 可复用性:由于BEM将样式代码分割成独立的组件,这些组件可以在不同的项目中被重用。这提高了开发效率,并且可以维护一致的用户体验。
  4. 可读性:BEM的命名约定使得代码更易于理解和阅读。开发人员可以快速推断出一个元素的作用和关系,从而更快地理解整个页面的结构。

BEM的应用场景包括但不限于:

  1. 大型Web应用:BEM适用于构建大型的、复杂的Web应用程序,其中需要对各个模块进行有效的组织和管理。
  2. 团队协作开发:BEM提供了一种标准化的命名约定,可以促进团队成员之间的协作和交流。不同开发者可以更容易地理解和修改彼此的代码。

对于BEM的处理,腾讯云提供了一系列与前端开发相关的产品和服务:

  1. 腾讯云静态网站托管(SCF、COS):腾讯云提供了静态网站托管服务,可以帮助开发者快速部署和托管静态网站,适合于展示型网站和单页面应用。
  2. 腾讯云云服务器(CVM):腾讯云提供弹性云服务器,可满足不同规模和需求的业务。开发人员可以在云服务器上部署前端应用,并进行灵活的资源配置和管理。
  3. 腾讯云内容分发网络(CDN):腾讯云CDN加速服务可以提供全球加速,加速页面静态资源的分发,提升用户访问网站的速度和体验。

请注意,本回答仅代表个人观点,具体产品选择需根据实际需求进行评估。

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

相关·内容

关于BEM反思

怎么处理孙子元素 第一个孙子概念,它不是“标准BEM一部分(如果有这样的话): .component /* Component */ .component...逻辑会说会用这个孙子方法。 我经验告诉我,这导致不必要长类名(BEM已经有错,并且没有必要尝试在CSS中反映HTML结构。 解决这个问题花了我很长一段时间。...在我看来更好只给你孙子元素们一个双重下划线符号加上用不同名字。 如果发现结构太深,可能需要定义一个新组件。 缩短修饰符长度 在BEM中,修饰符类用两个连接符表示。...但是最终会发现自己麻烦会更大。 为什么BEM如此伟大?,就在于它提供了一个清晰命名空间来说明自身作用。无论手动还是编程(即通过linters)。...结论 我认为:我们不需要用很多不必要条件来使BEM更复杂,这样会使情况变得更糟糕 每个人都有自己编码风格,这根据工作不同而变化,很多BEM / ITCSS规范没有意义。

62320

知道程序怎么处理时区问题么?

前端处理 业务对前端要求是:不管使用移动端还是PC端,都应该正确显示当时时间,包括有夏令时制时间。...处理夏令时总结 通过上面的分析可以知道,Linux服务器和MySQL服务器都可以自动处理DST切换,前提需要设置Linux时区和MySQL时区为地区,例如都设置为CET。 ?...在实际业务系统,受闰秒影响有Linux服务器,Java代码以及MySQL数据库,我们来看看它们分别是怎么解决LeapSecond问题。...,同时每个时区夏令时DST起始时间也不一样,我们要解决要根据客户所在地区显示正确时间(包括DST),跟前面的DST处理一样也涉及到三端处理:前端服务(frontend-service),后端服务...我敖丙,知道越多,不知道越多,感谢各位人才:点赞、收藏和评论,我们下期见!

4.1K20
  • 怎么思考

    自从我加入鹅厂,其实我思维方式受到极大挑战,因为每天我面对比我要优秀同事,我有时候需要接受同事一些挑战,鹅厂文化就是,需要接受不同人挑战才能够成长,有人提出问题来挑战,不是为了刁难...这不是一个互联网团队该有的现象,如果永远本着自己只是一个打工心态做事情,永远成长不了得去接触那些比你优秀的人,学习他们怎么思考问题怎么处理问题。...或许有,或许没有,不管谁,每天都搞得很疲惫这样生活不可持续性,迟早都会出现职业倦怠感。所以这时候问题来了,我们该怎么做才能够让自己摆脱这样生活?...换做其他稍微资深点工程师,如果这样跟他们提问题,他们不会理睬,反倒会被他们鄙视,因为回答问题根本浪费时间。...--《淮南子·说林训》 笔者也希望能够多分享一些自己知识和想法,但别人想法始终是别人,还不如传授一些给人学习知识方法,因为只有这样才能真正解决问题。 那么最后问题来了,怎么思考呢?

    46030

    面试官:怎么处理vue项目中错误

    一、错误类型 任何一个框架,对于错误处理都是一种必备能力 在Vue 中,则是定义了一套对应错误处理规则给到使用者,且在源代码级别,对部分必要过程做了一定错误处理。...这个处理函数被调用时,可获取错误信息和 Vue 实例 不过值得注意,在不同Vue 版本中,该全局 API 作用范围会有所不同: 从 2.2.0 起,这个钩子也会捕获组件生命周期钩子里错误。...同样,当这个钩子 undefined 时,被捕获错误会通过 console.error 输出而避免应用崩 从 2.4.0 起,这个钩子也会捕获 Vue 自定义事件处理函数内部错误了 从 2.6.0...另外,如果任何被覆盖钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise 链错误也会被处理 生命周期钩子 errorCaptured 2.5.0 新增一个生命钩子函数..._handled _handlePromise 实例内部变量之一,默认false,代表onFulfilled,onRejected是否被处理 if (res &&

    1.2K20

    MySQL并发事务怎么处理

    如果不排队等待,又怎么保证读事务数据最新状态(一致性)?各隔离级别如何处理并发事务?到这里应该就看明白了。...结合事务隔离级别,看一下MySQL怎么处理:不处理第一个情形不就是“读未提交”“脏读”,一致性保证不了一点。使用锁第二个情形就是“串行化”,完全通过锁来处理并发事务。...对于MySQL这样数据库,性能高低会直接影响用户去留,所以,仅仅是“串行化”并发处理远远不够。...所以只能在并发读/写这里进行优化,所谓避免读写冲突。接下来就来看一下MVCC如何在写事务处理同时,保证读事务不需要排队等待就能获取到数据最新状态。...案例说明接下来,通过一张图具体看一下Read View怎么判断。图中有4个并发事务,并且在同一时刻开启了事务。

    45940

    “猜喜欢”怎么猜中心思

    有鉴于此,虽然这些公司极少公开谈论他们推荐系统如何运作,我们经验使我们能够深入了解亚马逊和其他在线零售商幕后情景。(在本文中,我们分析在观察和推理基础上得出,不包含任何内部消息)。...下面就是我们所看到。 推荐算法怎么“猜喜欢”有没有想过自己在亚马逊眼中是什么样子?答案一个很大、很大表格里一串很长数字。...亚马逊和 Netflix 都曾公开表示过他们使用物-物关联算法变种,但对细节都绝口不提。 用户关联算法和物-物关联算法都有的一个问题,用户评分不一致性。...为了弄清降维算法怎么工作,我们来看看你爱吃东西,以及如何把它跟其他一百万人爱吃东西做比较。可以把这些信息用一个巨型矩阵表示出来,每一条竖线代表一样食物,每个人爱吃什么东西就自然形成了一行。...然而,使用这个矩阵推荐算法并不关心给哪种食物评了多少颗星。它想要了解一般而言喜好,这样它可以将这个信息应用到更丰富多样食物上。

    83430

    千万数据,怎么查询

    一.前言 面试官: 来说说,一千万数据,怎么查询? B哥:直接分页查询,使用limit分页。 面试官:有实操过吗?...今天就来带大家实操一下,这次基于MySQL 5.7.26做测试 二.准备数据 没有一千万数据怎么办? 创建呗 代码创建一千万?那是不可能,太慢了,可能真的要跑一天。...,第三条比第一条稍微好点 子查询使用索引速度更快 缺点:只适用于id递增情况 id非递增情况可以使用以下写法,但这种缺点分页查询只能放在子查询里面 注意:某些 mysql 版本不支持在 in 子句中使用...LIMIT 限制了条数,没有采用偏移量 优化数据量大问题 返回结果数据量也会直接影响速度 SELECT * FROM `user_operation_log` LIMIT 1, 1000000SELECT...,查询效率也可以得到明显提升 第一条和第三条查询速度差不多,这时候肯定会吐槽,那我还写那么多字段干啥呢,直接 * 不就完事了 注意本人 MySQL 服务器和客户端在同一台机器上,所以查询数据相差不多

    66720

    隐私数据怎么泄漏

    今天我们就说说,我们个人隐私数据,怎么被各大公司采集。 其实个人隐私数据,在我看来,不外乎三大类:个人身份信息,社交网络信息和个人交互信息。 首先说说个人身份信息。...网站安全这种东西,作为用户完全控制不了。比如说很多高校数据库,安全性和卫生纸一样,都不知道被脚本小子黑了多少次了。 我上大学那会儿有个诈骗团伙,诈骗电话按学号顺序打的,说这有办法吗?...简单来说,就是把用户每次点击、滑动、浏览数据发送到服务器,这个过程用户无感知(或者说是不知情)。...互联网上每次点击都是给自己贴标签, APP 用更多,标签也就贴多,说不定在大公司服务器比你男/女朋友还要了解。 上面简要说了一下互联网公司如何“采集”用户信息。...从 iPhone 发布到现在已经有 10 年时间,移动互联网大幅度改变了我们生活,只是这份便捷,又很大程度牺牲了我们隐私。下一个 10 年会怎么发展?

    85240

    Discourse 未活动用户怎么处理

    如果用户满足下面的条件的话,系统将会在到期后对用户进行清理和删除 从未在 Discourse 站点上发布任何内容 如果在 Discourse 站点上发布了内容,但是内容被删除了或者其他什么原因...,那么用户不会被清理程序删除。...满足 clean up inactive users after days 参数设置值 trust level 为 0 用户 Discourse 对用户进行删除的话,会完全删除用户邮件地址,如果需要再次使用网站的话...如果你想让注册用户保留更长时间的话,可以修改 clean up inactive users after days 参数值。 默认值为 730,就是 2 年。...通常来说 2 年也算是一个比较合理值,但更多时候我们可能并不希望清理这些用户。 所以就直接改成 7300 这个值吧,就是 20 年。

    11010

    知道机器怎么学习吗?

    在一次家庭饭局上,我父亲提到:现在科技真发达,连人工智能都出来了,可以识别的人脸,可以算计消费能力,甚至下棋时候,还能下赢人类中顶级高手!...对此他老人家有个疑问:这些人工智能怎么这么聪明,难道自己就会了? 我顿时愣了一下,啊,如果机器学习会思考,那么如何思考呢?...但是并不是机器学习都这么靠自己就学会了,其中涉及一些步骤——数据预处理、建立模型、验证模型以及优化模型。其实和我们人类学习流程大致相同,只不过在某些方法上显得更为精进。...数据预处理为让数据变得可以被接收,可以被解读学习;而模型呢,则像是人形成主观经验,当然,主观经验并不一定准确,所以需要验证模型;而优化模型则是使自己更加精进。...同理,对神经网络模型上每一个神经元中权重以及偏移系数做上述处理,于是权重得到更新,每一次更新视为一个批量(Batch),将所有的数据完全训练一遍称为一轮(Epoch),随着正向传播与反向传播交替进行,

    81320

    推荐系统里,怎么Embedding

    平时大家如何做推荐系统Embedding呢?...,先通过Identifier Vector映射成1024维度向量,这个向量并不会接受梯度,然后这个向量会通过多个mlp映射成32维度.能相信DHE只用了传统方式1/4参数却达到了相同AUC吗....高熵性(H-D):众所周知,熵越高信息量越高,我们肯定不希望有哪一位编码冗余. 了解了什么encoding,我们看看哪些encoding满足这些条件: ?...好吧,说来说去只有DHE满足了好encoding所有条件 ? ,所以DHE如何编码呢?...:因为每一维都可以看作1~m均匀分布,所以直接把这k维度INT normalize了. 2、Gaussian Distribution:先用第一种方式,再用Box-Muller处理,把均匀分布转变为正太分布

    1.2K30

    谈谈怎么理解面向对象

    一道经典面试题,当面试官问你,怎么理解面向对象即OOP,应该怎么回答呢? 答:面向对象三个特征:封装,继承,多态。...封装  1、什么封装? 通过访问修饰符,将类中不需要外部访问属性和方法进行私有化处理,以实现访问控制。 *注意:实现访问控制,而不是拒绝访问。...也就是说,我们私有化属性后,需要提供对应方法,让用户通过我们提供方法处理属性。 2、封装作用? ①使用者只关心类能够提供功能,不关心功能实现细节!...①方法封装 对于一些只在类内部使用方法,而不像对外部提供使用,那么,这样方法我们可以使用private进行私有化处理。...private function formatName(){} //这个方法仅仅能在类内部使用$this调用 ②属性封装+set/get方法 为了控制属性设置以及读取,可以将属性进行私有化处理,并要求用户通过我们提供

    73210

    重复提交,如何处理

    今天早上,新来同事小王突然问我:“周哥,什么幂等性啊?”。然后我就跟他解释了一番,幂等性就是说无论执行几次请求,其结果一样。...说到了幂等就不得不说重复提交了,连续点击提交按钮,理论上来说这是同一条数据,数据库应该只能存入一条,而实际上存放了多条,这就违反了幂等性。...因此我们就需要做一些处理,来保证连续点击提交按钮后,数据库只能存入一条数据。 防止重复提交方式很多,这里我就说一下我认为比较好用一种。...自定义注解+Aop实现 我们通过获取用户ip及访问接口来判断他是否重复提交,假如这个ip在一段时间内容多次访问这个接口,我们则认为重复提交,我们将重复提交请求直接处理即可,不让访问目标接口。...Aop处理逻辑 我们将ip+接口地址作为key,随机生成UUID作为value,存入redis。

    1.1K20

    重复提交,如何处理

    今天早上,新来同事小王突然问我:“周哥,什么幂等性啊?”。然后我就跟他解释了一番,幂等性就是说无论执行几次请求,其结果一样。...说到了幂等就不得不说重复提交了,连续点击提交按钮,理论上来说这是同一条数据,数据库应该只能存入一条,而实际上存放了多条,这就违反了幂等性。...因此我们就需要做一些处理,来保证连续点击提交按钮后,数据库只能存入一条数据。 防止重复提交方式很多,这里我就说一下我认为比较好用一种。...自定义注解+Aop实现 我们通过获取用户ip及访问接口来判断他是否重复提交,假如这个ip在一段时间内容多次访问这个接口,我们则认为重复提交,我们将重复提交请求直接处理即可,不让访问目标接口。...isSuccess) { // 获取锁失败,认为重复提交请求 redisUtils.lSet(key, clientId, timeout);

    1.1K10

    知道豆瓣电影怎么评分吗?

    另外,和上篇一样,重点分析流程(敲黑板了) 下面,开始今天——豆瓣电影分析之路。 假设 “小一哥,怎么一上来就是假设?假设又是什么?” “假设,针对我们分析结果而言。...希望最后输出一个什么结果,或者需要证明什么结果,都可以当做假设!” 数据分析由结果导向,什么结果导向? 说白了,其实是根据目的去完成任务。...接下来影片语言字段: 和影片制作国家字段一样,存在空白字符,同样处理方法。...“小一哥,这个怎么处理?...觉得今天内容量不够同学,也可以思考一下以下几个问题: 还有哪些维度可以互相组合并对总排序造成影响? 它们可视化显示能画出来吗? 评分模型应该怎么设计(可以参考阮一峰排名算法)?

    1.2K30

    面试官:系统怎么限流

    大家好,我小林。 如果大家校招时准备项目秒杀系统,那除了会问 Redis 和 MySQL,还会问你怎么限流。这一块知识应该挺多人没有准备。...然后后端真正业务处理程序从这个池子中取出请求依次处理,常见可以用队列模式来实现。...这就相当于用异步方式去减少了后端处理压力,但是当流量较大时,后端处理能力有限,缓冲池里请求可能处理不及时,会有一定程度延迟。后面具体漏桶算法以及令牌桶算法就是这个思路。...特权处理 这个模式需要将用户进行分类,通过预设分类,让系统优先处理需要高保障用户群体,其它用户群请求就会延迟处理或者直接不处理。...如图所示,令牌桶算法原理系统会以一个恒定速度往桶里放入令牌,而如果请求需要被处理,则需要先从桶里获取一个令牌,当桶里没有令牌可取时,则拒绝服务。

    65610

    Spring源码解析(四)Spring怎么处理BeanDefinition

    上一篇文章中分析了 BeanDefinition怎么被解析出来,在这一篇文章中我们主要看下 解析完了之后所做事情; 一、DefaultBeanDefinitionDocumentReader --...= null 就抛异常; MethodOverrides在我们上一篇文章中LookupOverride、ReplaceOverride被设置过;这行代码意思如果设置了...ClassLoader就通过返回拿到Class对象; *3.bdoverrides做一些处理; */...//标记这个mo不是 重载,而是覆盖;避免参数类型检查开销。默认true mo.setOverloaded(false); } } ?...四、总结 上面只是简单分析了一下BeanDefinition去处,发现BeanDefinition后来注册到了DefaultListableBeanFactory中;这个存放了所有的BeanDefinition

    37930
    领券