用 CSS 写全屏页面，桌面端好说——直接 vw, vh 就好，但移动端由于工具栏尺寸会变，事情就变得复杂了。但不必担心——最新的 CSS 标准已经发布，lvh, svh, dvh 等新可爱单位来啦！

svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，接下来就可以在模版中方便地使用 svg-sprite 技术了。 这时候发现还是不行啊，body 中并没有看到 symbol 标签。 配置好了，就可以用了。使用方…

SVG指的是利用XML格式定义的图像，可以当做html标签被嵌入到网页中呈现某一种效果。 在vue项目中引入svg，虽然可以像网页一样把一大段代码拷贝进去，但是对于模块化开发来说却显得很臃肿，于是svg提供了use标签，这样可以把svg源码放在静态目录下，然后通过use标签来引…

你真正了解 flex 的特性吗？Grid 布局是否体验过？本文带你全面全面掌握，可以收藏作为手册自查。

flex布局具有便捷、灵活的特点，熟练的运用flex布局能解决大部分布局问题，这里对一些常用布局场景做一些总结。 flex:0 0 25%,相当于flex-basis:25%，使得每一个列表项的宽度占外层容器(本例中的ul元素)的25%，因此每行最多能够排开四个列表项。 各大U…

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

一. BEM 二. scoped css 三. css modules 将 css 的选择器转换成惟一的字符串，运用到 dom。是在用算法命名，记录了人的命名到算法命名的 map 表 四. css-in-js 将 css 内容用惟一的选择器表示。同 css modules，用算…

我听说很多开发者厌恶 CSS。而在我的经验中，这往往是由于他们并没有花时间来学习 CSS。 CSS 算不上是最优美的『语言』，但迄今二十多年来，它都是美化 web 举足轻重的工具。从这点来说，也还算不错吧？ 尽管如此，CSS 写得越多，你越容易发现一个巨大的弊端。 因为维护 C…

不以规矩，不能成方圆。 对于团队而言，统一很重要，代码是写给人看的，然后顺便跑在机器上而已。 每一种事物都有它被发明时，都会有其用处和目的，每一个事物都是自己擅长和适合的领域； 我们要在对的地方使用它，让它做自己擅长的事。 我们知道，当一个团队开始指定并实行编码规范的话，错误就…