惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

GbyAI
GbyAI
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Jina AI
Jina AI
H
Help Net Security
月光博客
月光博客
Y
Y Combinator Blog
I
InfoQ
博客园 - Franky
W
WeLiveSecurity
The Register - Security
The Register - Security
博客园 - 叶小钗
Google DeepMind News
Google DeepMind News
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Blog — PlanetScale
Blog — PlanetScale
H
Hacker News: Front Page
L
LangChain Blog
S
Security @ Cisco Blogs
Hacker News - Newest:
Hacker News - Newest: "LLM"
罗磊的独立博客
V2EX - 技术
V2EX - 技术
H
Heimdal Security Blog
博客园_首页
SecWiki News
SecWiki News
N
News and Events Feed by Topic
B
Blog RSS Feed
S
Secure Thoughts
TaoSecurity Blog
TaoSecurity Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
AI
AI
Google Online Security Blog
Google Online Security Blog
MongoDB | Blog
MongoDB | Blog
T
Troy Hunt's Blog
A
About on SuperTechFans
WordPress大学
WordPress大学
小众软件
小众软件
The Last Watchdog
The Last Watchdog
J
Java Code Geeks
PCI Perspectives
PCI Perspectives
博客园 - 聂微东
N
News | PayPal Newsroom
Schneier on Security
Schneier on Security
Help Net Security
Help Net Security
Martin Fowler
Martin Fowler
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
U
Unit 42
博客园 - 司徒正美
Forbes - Security
Forbes - Security
酷 壳 – CoolShell
酷 壳 – CoolShell
S
Security Affairs

囧克斯

奔四了,写给40岁的自己 有序退网 我和 Vue.js 的十年 我参与《代码之外 Beyond Code》的故事 博客站迁移至 VitePress 的备忘 写给我的奶奶 中文格式化小工具 zhlint 及其开发心得 vue-mark-display:用 markdown 语法轻松撰写幻灯片 我对技术会议的一些看法 VueConf Hangzhou 见闻 [译]Web 表单的未来 [译]苹果正在做一些他们的程序员明摆着不想要的东西 [译]为什么我不会无偿加班且你也不应该 [译]如果管理是唯一可走的路,那就完蛋了 [译]如何撰写 Git 提交信息 [译]C 程序的原则 Vue 2.0 来了! Weex 近 4 个月的开源之路 Weex 在 JS Runtime 内的多实例管理 我理解的 SPA 我理解的 Flux 架构 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 通过一张图走进 Vue 2.0 Code Review for Vue 2.0 Preview Vue 2.0 发布啦! 务实的小而美 Vue.js 1.0.0 发布了! [译]如何成为一名卓越的前端工程师 手机淘宝前端的图片相关工作流程梳理 [译]如何让办公室政治最小化 Vue.js 源码学习笔记 从原型到发布——“团队时间线” 1.0 开发心得 Vue + webpack 项目实践 用 Koa 写服务体验 webcomponents 笔记 之 配置管理 小秀个人的13~14年摄影作品 (共19张) 由今年D2前端论坛想到的 [译]CSS命名神马的真心难 [译]Git 分支的最佳实践 [译]撰写可测试的 JavaScript [译]语义化版本管理 [译]通过HTML5 Canvas API调节图像的亮度和颜色 [译]JavaScript V8性能小贴士 [译]视觉差,走起! [译]Chrome开发者工具中评估性能的五大新特性 精气神儿 细节无微不至,彩屏让人又爱又恨——新老“神机”大对决:Nokia 1050 vs Nokia 1202 秦升拿到红牌之后…… 用Sass重新整理自己的博客主题样式 Connect中间件使用手册 巧用 RequireJS Optimizer 给传统的前端项目打包 编辑器小调查结果 [译]JSLint 文档 烟火——写给蛇年的傲游和我 小秀个人的全年摄影作品 (共15张) 2012年终毫无正能量的总结 标签?ID?还是CLASS? 微创新=伪创新 HTML5峰会归来 分享bookmarklet一则:随意阅读 国际羽联和中国队之间的恶性循环 ZeroClipboard 学习笔记 “思考人生” 听杨东杰弹吉他 学习精髓 网站装修笔记20120426 网站装修笔记20120414 网站装修笔记20120406 分享Typecho插件:百度统计助手 我的得奖感言 网站装修笔记20120331 用CSS3制作尖角标签按钮样式 分享Typecho插件:Markdown 解析器 + 编辑器 分享Typecho皮肤:我的字很大 汇总自己过去的一些HTML5科普文章 html5中的消息通信简介 + 我的新网站开张 网站装修计划 Typed Arrays 是神马? 文明看球 HTML5中的文件处理 之 File Writer API HTML5中的文件处理 之 File API 独生子女、互相等和不耐烦 IndexedDB技术简介(四) IndexedDB技术简介(三) IndexedDB技术简介(二) IndexedDB技术简介(一) 把博客的字体进一步调大,同时去掉了侧边栏 “模仿别人是为了找到自己” 写给我未婚妻的2011年 写给自己的2011年 手把手教你入门EaselJS做HTML5动画 “吃了吧,不吃就浪费了” 写给傲游的2011年 所谓专业 写给HTML5的2011年 对HTML5中LocalStorage的一些使用建议 回味一下我2011年看到的最过瘾的5场足球比赛 浅浅浅谈开饭店被顾客吃出“异物”的用户体验 前端的本职 继续对Mac穷追猛打 之 修改原生按钮文字大小的技巧
第四届 CSSConf CN 见闻
勾三股四 · 2018-04-03 · via 囧克斯

上周末作为一名分享者参加了 CSSConf CN,在厦门。

其实除了自己的分享内容,这次我是带着很明确的目的参会的,因为有两个主题我特别关注,就是:

  • 第一个:响应式的组件
  • 第三个:从 API 的角度看组件的 CSS

(两个分享的标题都被我稍微“演绎”了一下)

这两件事都是自己工作上正在特别关注的事情,一方面,我们很少从 API 的角度去理解一个组件的 CSS 该如何组织和管理,所以这个标题就特别吸引我,另一方面响应式组件的分享者是来自新加坡的前端工程师 Zell (我个人一直觉得国内的响应式都是在瞎搞,看了很多周围团队都没有认真做这件事,甚至不相信响应式的价值,从设计师到工程师),因此非常珍惜这个机会能近距离学习一些国外的同行们是怎么看待和实践响应式的。

所以尽管我们团队的差旅经费已经用完了,还是决定自费来厦门近距离交流一下。

现在证明这次真的不虚此行。

当然参加这种线下活动,“面基”的目的是一定有的……恩,这个不值一提。


响应式组件 ​

在谈这次分享内容给我的收获之前,我想说,实际上我不只是从几十分钟的分享中学习了响应式组件的东西。我这次去厦门的行程特地提前了两天,周四就到厦门了,就是希望能多一些分享的准备和现场交流。正好 Zell 也到的比较早,于是乎我在周末的会议之前就跟 Zell 聊了很多。真的是很难得的机会。

回到分享的内容,我听过 Zell 的分享之后简单整理了一些要点:

  1. Proportional scaling:让所有的组件成比例
  • 注意字号:font-size 尽量使用 em 单位,而不是如 px 的绝对单位
  • 注意视口/窗口大小 (viewport):尽量使用 vwvhvminvmax 单位,必要的时候可以配合 calc()
  1. Responsive scaling:处理好响应式的断点
  • 善用 media query
  • 尽可能使用 min-width,以小屏幕为基础
  • 必要的时候使用 min-widthmax-width 的交集,避免样式间不必要的相互干扰
  1. Modular scaling:像乐高一样拼合模块时的注意事项
  • 不要在子元素上直接设置外边距
  • 取而代之的是在父元素上整体设置每个子元素的边距
    • 巧用 + 选择器处理最后一个元素多余的边距
  • 在需要对其的地方使用 rem 作为边距的单位以避免被组件的字号影响布局
  1. Morphable blocks:尽可能透过不同的表象提炼相同结构的组件,以达到尽可能的复用和组件数最小化
  • 找出相同点和不同点
  • 得出最佳的 HTML 结构
  • 通过设置不同的样式展示出不同的效果
  • 让 modifier (BEM 中的 M) 的数量尽可能的少
  1. 额外的小贴士:命名规范和约定、避免在选择器上使用 ID 从而使得选择器的权重失控

实际上每一条都不是很难,也不是没有见到过,但是总结的非常有系统性,给了大家一些很好开始的着手点。

另外 Zell 在聊天过程中也提到了很多我非常认同的观点和细节,想分享给大家:

  • 前端工程师是真正用户体验的“最后一道门”,身为前端工程师一定要有意识捍卫用户体验 (这句话后来跟 裕波 聊天的时候他说了一模一样的话,可见大家都十分认同)。
  • 前端工程师一定要跟设计师“坐在一起”工作,一定要强沟通,才能把工作做好。
  • 跟 Zell 聊到响应式在自己的工作中遇到很多困难的时候,Zell 出乎意料的大方对我说“你找我就对了”,即大方又自信。看得出来响应式在 Zell 看来已经是吃饭喝水一样了,我们自己包括周围的人却连一步都还没走出来,真是觉得惭愧。

从 API 的角度看组件的 CSS ​

我记录了一些要点和自己的理解:

  • 首先,通过 CSS 的发展史来看,我们一直试图通过一种特定的语法 (CSS) 来描述网页的样式,但在 web page -> web app 的划时代趋势下,我们组织代码的方式也发生了变化,尤其是 CSS 的部分容易被人们忽视。
  • 分享者 E0 把今天的 CSS 设计问题,从 API 的角度划分成了三个层次:
    1. 对于组件的维护者来说:要把一部分 CSS 样式封装起来,供自己维护,同时也要避免被组件的使用者误修改或滥修改,通常这些样式会被内联或编译为无语义不可编辑的 CSS class
    2. 对于组件的使用者来说:要把一部分 CSS 用法暴露出来,供开发者灵活配置或修改,很多组件库会在文档中列出可以配置和修改的 CSS class,但除此之外,还有一些库做了很巧妙的不一样的封装,比如通过扩展的伪类或伪元素。这种方式我之前没有留意到过,有点开眼界
    3. 对于浏览器插件作者:这个角度也是我之前没有认真思考过的,就是说还有这样一群开发者,希望通过浏览器插件处理一些不同用户的特定需求。如果我们的组件希望对这些人友好,那么就多了一层考量。这时我们就想到了一些更加通用或规范化的,和具体工具、库、编译方式无关的设计,比如 CSS 自定义属性、无权重的选择器等

听过之后非常受启发。

这两份 slides 我也第一时间分享给了我们团队组件库的同学们了解学习了:)

关于自己分享的 CSS Houdini ​

这些内容可能真的是有一点“超前”了,因为很多浏览器都还没实现,而且规范本身也没有稳定下来。但是我迫不及待的想分享出来,是因为我也听到了一些说法,说“CSS 很久没有什么新闻了”。那 CSS Houdini 绝对是一个可以让 CSS 更上一层楼的“重量级”的东西。希望可以通过分享 CSS Houdini 让大家对 CSS 更有信心和期待。

同时很多技术的“风向”都是由最底层的东西决定的,我们从规范层面对 CSS 有更多的了解,一定会对我们的实际工作有很多指导和借鉴的价值。如果你同时还是一个有开源精神的人,那么你可以从今天开始就构思一些基于 CSS Houdini 的工具和库了对吧,用这些工具和库加速 CSS Houdini 的落地,同时也尽快把一些之前没有 CSS Houdini 的时候大家用起来很别扭很勉强的东西汰换掉,更在这个过程中体会 web 带给我们的乐趣:)

其它 ​

另外几个分享也各有特色,总体上,我觉得这次 CSSConf CN 同时包含了 CSS 的规范、理念、工具、技巧、动画、八卦、吐槽各个方面,应该是尽可能照顾到了大家的兴趣和需求了。还是觉得这样的会议非常的棒。

我觉得 CSS 和动画、SVG、字体设计、3D 图形学、可访问性、语义化的 web 等话题有着非常紧密的联系,有很多有意义的延伸,并且这些话题也很难有独立的 Conf 了吧我估计。再加上 CSSConf 的主办者们,尤其是 裕波,是非常懂前端开发者们的,他们经营 CSSConf 的理念和方式我一直非常认同和欣赏,所以也许未来有一天,CSSConf 会比 JSConf 更受人关注。

以上