最近计划写一个关于CSS的系列, 总结一下CSS的知识. 名称叫"极致CSS".
构思了十篇的内容, 大纲如下
- 从HTML开始 网页标签 meta 根元素 块元素 行内元素 未定义元素 自定义元素
- 基本语法规则 CSS的引入方式 选择器 属性 继承与权重规则
- 数值单位与函数 长度 颜色 url rgb
- 字体与行内布局模型 font line-height vertical-align
- 替换元素与伪元素 img content
- 盒模型 width height margin
- 布局属性与定位 float position flex
- 层叠与剪裁 z-index overflow clip-path
- 背景边框与装饰 background padding border outline box-shadow 圆角 阴影
- 高级效果 变形 渐变 动画 滤镜
最后也计划加一个经验总结, 关于页面还原的思路和实践.
个人认为目前在CSS方面没有一本好的教材. CSS权威指南过于理论化, 缺少和实际应用场景的结合. 其他教材基本只是讲授了基础知识, 无法形成知识体系. 我把张鑫旭的 CSS世界 多看了几遍 但是这本书只讲到CSS2.1 新书据说今年要准备出版了 会讲到CSS3的内容. 而且也需要有一些基础才能理解, 入门就看还是有难度.
CSS的困难主要在于布局和单位, 布局方面目前flex基本成为了主流, 结合margin, 一般的页面布局已经不需要借助float了. 单位方面主要是处理px和vw的关系, 适配不同的屏幕尺寸. 目前我在移动端是使用meta标签整体缩放, 也可以用rem或vw, 思路是一样的. 桌面端和某些特定场景下要通过calc计算或者media query查询.
最近看到这几篇讲flex的文章还是不错的
关于CSS的书写, 我最近在用gulp-qcss, 类似emmet, 但是代码比较简短, 只是一个正则替换, 可以自己编辑替换规则. 我参考这个思路也写了个使用split和join的实现. 代码在qcs. 其中使用了一些方法简写, 可以参考u.js. (替换链接为github也可以查看)
示例如下
.f2 { w: 154; h: 154; mt: 200; bd: 2 s #F1F1F1; bo: 50%; bgi: url(logo-128.png); }
.f4 { fw: bd; f: 48; c: #333; m: 36 a; }
.f1 { w: 158; h: 2; bgi: lg(270deg, #B1B1B1 0%, rgba(213,213,213,.5) 95.59%); o: .2; }
.f3 { f: 36; c: #999; mb: 150; }
.f5 { f: 30; c: #999; mt: 30; }
替换完之后是
.f2 { width: 154px; height: 154px; margin-top: 200px; border: 2px solid #F1F1F1; border-radius: 50%; background-image: url(logo-128.png); }
.f4 { font-weight: bold; font-size: 48px; color: #333; margin: 36px auto; }
.f1 { width: 158px; height: 2px; background-image: linear-gradient(270deg, #B1B1B1 0%, rgba(213,213,213,.5) 95.59%); opacity: .2; }
.f3 { font-size: 36px; color: #999; margin-bottom: 150px; }
.f5 { font-size: 30px; color: #999; margin-top: 30px; }
这样可以加快CSS的书写. qcss的版本可以更短, 省略了属性名和属性值之间的冒号, 而我为了兼容其他工具把冒号保留下来了, 并且现在的替换代码实现比较简单, 强制要求规范格式, 用冒号加一个空格分割, 否则转换工具会报错. 我感觉这样书写的成本也不会增加太多, 而且, 代码都这么简短了, 还是规范一些好.
