提高前端性能的一个案例

De Voorhoede,我们尽所能地为客户推进前端性能。虽然不是很容易就能说服客户完全按照我们的指令去做,但我们一直在尽全力和他们沟通,解释提高性能的重要性,或者将他们的性能与他们主要竞争对手进行比较。最近更新了我们的网站,除了设计上进行了大修,这也是一个将性能提高到最优的理想机会。我们的目标是有效控制,注重性能,与未来技术兼容,并将创建网站变为了一件有趣的事。以下是我们如何改进网站的具体做法。

CSS倒影那些事儿

最近我在Codepen看到一个这样子的加载示例。使用CSS完成的具有渐变褪色倒影的、旋转的3D条形块。每一个条形块使用了一个元素,之后进行复制,这些元素形成倒影,最后添加渐变进行覆盖形成渐变褪色效果。这听起来有点像用你的左脚趾从背后抓右耳朵般不切实际。更不用说渐变覆盖方法形成褪色效果在非平面背景色不起作用了。是不是有更好的方法使用CSS可以实现这种效果呢?

内置 Symbol 值详细概述

Symbol 是 ECMAScript 2015 引入的新原始数据类型(primitive type)。使用 Symbol 可以创建独一(unique)的标识符,用法是:let uniqueKey = Symbol('SymbolName')。Symbol 可以被用作对象中属性的键名。一系列被 JavaScript 特殊处理的 Symbol 值被发布为内置 Symbol 值(well-known symbols)

如果你会了Sass,你就会了ES2015

如果你会了Sass,你就会了ES2015!...虽然不是全部,但也有很多惊人的相似之处!当学习最新的ECMAScript 规范,ES2015(以前被称为ES6)时,碰到了一些让我立刻想到Sass的特性。

解决Sass媒体查询的重复问题,优化工作流程

在Sass中有很多方法可以解决媒体查询这个问题,但是其中一些方法存在相同的问题。一开始我会还原这个问题,然后提供我的解决方案,最后列出这个方案对工作流程的好处。

如何更好的使用BEM

BEM是由Yandex团队提出的一种CSS Class 命名方法,旨在更好的创建CSS/Sass模块。他需要遵循一些特殊规定,有些人认为这些规定很冗余,但是我发现他们对于理解DOM有着很大的帮助。你可以去查看我之前的文章去了解为什么BEM如此伟大。或者你可以去查看这几篇中文文章来了解BEM(《BEM的定义》《为什么我们需要BEM》)。今天这篇文章,是我在假设你对BEM和Sass已经有所了解甚至熟悉的基础上完成的。

为了性能,选择Mixins吧!

当我们提及预编译的时候,我经常会被问到的一个问题是Mixins 还是 @extend ? 关于这个话题我经常直言不讳,而且鉴于以下的这几条原因,我坚定的认为你应该避免使用@extend:

Sass: @mixin指令介绍

为了有效的维护和开发项目,代码的重复利用就显得尤为重要。在Sass中,除了@import@extend可以使你的代码更加具有重复利用性,@mixin指令也同样能提高你代码的重复使用率并简化你的代码。

Sass:@mixin和@extend该如何选择

Mixins允许我们在项目中复用样式片段,可以传递参数这个特性使得它们非常灵活,强大。同样,我们也可以使用@extend命令让一个选择器继承其它选择器去复用样式片段。有的时候Mixinextend好像做了同样的事情,那我们应该选择哪一个呢?

OOCSS vs. OOSCSS

在这篇文章中我主要想给大家阐述在使用Sass来编写CSS和OOCSS两者之间的差异。在开始之前,我想在大家对定义语义化和演示(视觉)类名之间的差异有所了解。

页面

返回顶部