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

[mythjava]

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

我想到了几个方面

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

各位还有什么好的点子呢

[BeijingBaby]

这也太浅了？
面向后端技术么？

[shervinchen]

你这也太水了。。。给个方向吧，可以谈谈现代 CSS 方案下的主题系统，讲讲实现和设计思路

[heyjei]

既然不用特别深入，就说明是面向初级用户。

讲选择器和布局吧，特别是选择器的优先级的问题（这个特别适合出一个思考题）

布局讲 flex 布局，为啥你选则 grid 布局，这个不常用吧，一般用最多的还是 flex 布局

[ReggieLee]

原子 css\css in js\web compoments 下的 css

[murmur]

flex 布局比较好，ie 都可以用

[xujiahui]

要不推广 tailwindcss 吧

[fengfuliu]

分享一些可以实现比较酷的效果，业务还可能用到的 css 吧 filter mix-blend-mode clip 之类的

[ypzhou]

看下张老师的 https://www.zhangxinxu.com/wordpress/category/js/

[zxCoder]

flex 布局

[murmur]

tailwind 简直是工程化的灾难，这东西单人用还可以，多人用你怎么能保证每个人对尺寸样式牢记于心

[ration]

讲布局，块元素，行内元素，margin ，padding ，border ，float 之类的，再讲讲比较流行的布局，比如 grid 之类的

[henryhu]

css 框架选择

[jjwjiang]

看团队水平

都还处于原始人阶段的话大力推荐 flex 和 grid ，flex 可以解决 80%以上以前 CSS 的疑难杂症，包括不仅限于什么居中对齐自适应等等……

现在写 css 还不用 flex 布局简直是犯罪

[wu67]

还是得讲基础. 这玩意, 往深往浅讲都行. 浅的可以讲布局, 面向公司的设计、产品、和老板. 深的可以讲讲 flex 以及容易过大、过小时的伸缩计算 /设置, 这玩意就算是前端也能蒙圈.
如果讲 ui 框架什么的, 推广使用倒是还行, 当课程讲, 不太可能, 有几个人就能衍生出几种写法

[Leviathann]

@murmur 这个都有提示的把，装插件会自动提示一个 tailwind utility 对应的实际 css 是什么

[waiaan]

找《 css 的秘密花园》这本书，把里面的东西讲讲就差不多了。

[abear]

animate 和 tailwindcss 啥的比较优秀的库；普通的太普通了。推广推广，让他们看源码。😂

[jqtmviyu]

tailwindcss

[hellojay]

tailwindcss 不要太爽了

[devwolf]

平时有总结到一些小技巧吗，单独拎出来讲而不是挑大的方面？

比如：
=======================
Q1：如何在多列的时候，实现 hover 图片中心放大？
A1：
父元素 position: relative;overflow: hidden;子元素丢一个 visibility: hidden;的 img 拷贝版去占位。

另一份 img 子元素用来实现展示与放大的效果——
首先用 position: absolute;定位叠在上面。
top: 50%;left: 50%;使该图片偏移，
transform: scale(1.02) translate(-50%, -50%) 让图片偏移回去以及微调大小
hover 后 transform: scale(1.1) translate(-46%, -46%);改变图片大小以及微调偏移。（微调偏移，是为了在 flex 实现的多列布局里，仍然维持中心放大的效果）
hover 前后补上 transition: transform 1s ease-in-out;

核心：absolute 定位改偏移，再用 translate 平移回来，这个我跟 leader 学来的技巧。也有用 right:calc(50.5% + (1920px / 2) - 540px) 这样基于中轴的绝对定位技巧(来实现一些……“相对静止”那种效果)。

=========================
Q2: 实现渐变的 border
A1： https://jsrun.net/XfQKp/edit
ps：这个我之前有存 demo


这样的？

[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 更适合

[g0thic]

https://zhuanlan.zhihu.com/p/483199541 可以看下这篇文章 讲了很多新东西 很多前端估计都不知道

[angith]

tailwind 确实爽

[woomly]

可以讲一下仅使用单元素实现各种炫酷效果的实现过程...

[horizon]

@murmur 这得先问问交互 UI 答应不答应
组件本身样式又不能覆盖所有场景，必然会有自定义样式的情况。