虽然现在已经是ES6的时代，但是，还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法，并分步骤讲述如何写出优雅的类。 例子为一个轻提示组件Toast。 JavaScript的类，是用函数对象来实现。 其中的重点，就是Function的编…

2018-4-16日更新css-modules配置，前面步骤不变，可直接跳到第七步。 移动端适配最接近完美的解决方案在react中的使用方式。本文只讲create-react-app创建的项目如何配置，具体每个插件的用途和使用方法请先查阅大漠先生的文章，我相信大漠先生的文章已经…

我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。 对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化，相信大多数人对此深…

CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。 有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。…

布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。2009年，W3C提出了一种新的方案-Flex，Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局。下…

不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子： 现在，你甚至可以在边框中使用渐变。 具体的例子可以看这里，或者看这里使用的是background-clip和backgroun…

虽然现在 Css Module 与 Css-in-js 更流行，但使用它们会导致过分依赖 滥用 class 做唯一定位，违背了 Css 选择器的初衷。 本期精读的文章是：attribute-selectors-splicing-html-dna-css，带你重新理解强大的 Cs…

当图片容器距屏幕顶部或底部的距离为 0 时，则相应的改变图片堆叠顺序及圆心位置。 clip-path 的含义就是裁剪路径，通过指定的闭合路径或者形状，甚至是 SVG 中 clipPath 标签定义的形状，裁剪出部分需要保留的区域，这样网页中的布局实现可以是多种多样的。 所有主流…