BEM 的命名约定

上一篇文章讲解了 BEM 的核心概念,今天这篇文章主要讲解 BEM 的命名约定。

原文地址

当时工作中遇到 BEM 实体的时候,你需要了解他们的命名规则。

命名约定的主要思想是要使得 CSS 选择器尽量的清晰并且能够携带最多的信息。这将有助于代码的开发与调试,并且解决 web 开发者所面临的一些问题。

假设我们有一个叫做menuitemvisible的选择器。这种符号的第一眼不能让我们从选择器的名称中识别出 BEM 实体的类型。

让我们加入定界符:menu-item-visible或者mentItemVisible

以这种方式书写,选择器的名称被清晰的分割成多个逻辑部分。我们能确定menu是一个块,item是一个元素,然后visible是一个修饰语。但是,实际项目中的例子通常更为复杂,并不像之前的例子那样简单易懂,这就是 BEM 命名约定发挥作用的地方。

BEM 方法论提供了一种创建命名式规则的思路,并将它落实为典型的 CSS 选择器命名规则。但是,还有其它基于 BEM 的替代方案。

查看全文

BEM 的核心概念

从狭义上来讲,BEM 是一套 CSS 的命名规则,将 CSS 的命名分解为 Block, Element, Modifier 三个部分。本篇译文讲述 BEM 的核心概念,他的具体命名规则其它文章再做讲解。

原文地址

查看全文

渲染性能

原文地址 与 译文地址

要想编写高性能的 web 站点或应用,你需要充分了解浏览器是如何处理 HTML/JavaScript/CSS 的,从而确保你写的代码(或引用的第三方代码)是尽可能高效的。

60帧与设备刷新率

当今大多数设备的屏幕刷新率都是 60次/秒 。因此,如果在页面中有一个动画或渐变效果,或者用户正在滑动页面,那么浏览器渲染动画或页面的每一帧的速率,也需要跟设备屏幕的刷新率保持一致。

也就是说,浏览器对每一帧画面的渲染工作需要在16毫秒(1秒 / 60 = 16.66毫秒)之内完成。但实际上,在渲染某一帧画面的同时,浏览器还有一些额外的工作要做(比如渲染队列的管理,渲染线程与其他线程之间的切换等等)。因此单纯的渲染工作,一般需要控制在10 毫秒之内完成,才能达到流畅的视觉效果。如果超过了这个时间限度,页面的渲染就会出现卡顿效果,也就是常说的掉帧,它是很糟糕的用户体验。

查看全文