团队叫我准备一个关于 CSS 的技术分享

[mythjava]

不用特别深入 我应该在哪几个方面进行准备呢

我想到了几个方面

• css 选择器
• css 动画
• grid 布局

各位还有什么好的点子呢

[devwolf]

@devwolf 当我没说……技术分享我看成技巧分享了，那没事了

[TimPeake]

掘金上很多。。。
细说， 比如纯 css 实现阅读器进度条等，filter 滤镜实现 xx 特效等 B 格还高，大开眼界

[otakustay]

@murmur #10 那我们怎么保证每个人对 api 牢记于心……

[murmur]

@otakustay 我的意思是，像 element 这种，全局设置好之后，form 的尺寸都是固定的，只要往里堆组件就可以

用了 tailwind ，颜色、尺寸、大小、都需要自己组合

[NathanInMac]

css 的工程化，convention ，best practice ，生产的优化之类的

[otakustay]

@murmur #24 那毕竟分层上它们就不在同一个层嘛。我接触过不少团队是在 tailwind 基础上再做 design token class 的，用起来就很接近 element ui 这个效果了，比如 grid-l 就固定大小里面放几格也固定，按着设计规范来

[KissFace]

flex 布局

[KouShuiYu]

我之前写过 css 样式隔离的几种方案
https://chenkai.life/css/css-web-compoent-isolation/

[mythjava]

@BeijingBaby
@shervinchen
@jjwjiang
我们团队没有专门搞前端的 大家都是搞后端的 前端能跑就行 一直都是用的 jquery 布局基本都是靠 float 的 今年部分项目才决定换的 vue

[alphardex]

1. 用 CSS 实现常见的 UI 效果
2. 用 CSS 替代 JS
3. 用 CSS 创作动画特效
4. 用 CSS 进行数学运算（主玩 CSS 变量）
12 相对实用基础，34 纯属个人喜好

[morize]

我的前端同事能有一半搞得清楚以下三点，我就谢天谢地了
1. padding 和 margin 有什么区别和使用场景
2. 写 font 自觉加上 line-height
3. 能用伪类解决的就不要写一堆 js 了，会用一个 :last-child ，我觉得就很棒了

另外，2022 年了，还用绝对定位飞来飞去的，还有十八般武艺消除浮动...不是说不好，大部分场景眼下都有更好的办法。

[Seanfuck]

flex 这么多人提了，可以的。还可以讲讲 svg ，BFC 等等

[pengtdyd]

CSS 还用得着技术分享？？？不是有手就行吗

[pengtdyd]

CSS 的技术分享给谁讲？
前端：前端连这个都不会还讲个屁，直接开除算了。
后端：会这个干嘛，有这时间还不如研究一下 k8s ，比听什么 css 靠谱的多。

[mythjava]

@alphardex 感谢提供思路

[mythjava]

@pengtdyd 领导安排的没有办法

[HAYWAEL]

分享一般没那么久。可以到张鑫旭那找一篇有意思的主题。吃透相关的内容 然后根据这个发散就好

[Arrowing]

css 画叮当猫

[horizon]

@murmur 你在说什么。。不可以写组件用 tailwind ？
照我说，tailwind 才是强约束。

[murmur]

@horizon 工程化应该减少花样，所有的尺寸、样式，能统一都统一，你只需要知道场景不需要知道尺寸

比如我写个 class="page detail" 那应该这页所有的表单元素尺寸都定下来了，你只需要关心是 button 还是 input

如果每个页面都是定制化，那可能 tailwind 更适合