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

CSS

Grid

点子

准备

44 条回复 • 2022-04-08 13:08:06 +08:00

1

BeijingBaby

2022-04-07 13:36:44 +08:00

2

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

2

shervinchen

2022-04-07 13:43:30 +08:00

1

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

3

heyjei

2022-04-07 13:43:52 +08:00

1

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

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

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

4

ReggieLee

2022-04-07 13:45:09 +08:00

1

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

5

murmur

2022-04-07 13:52:19 +08:00

1

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

6

xujiahui

2022-04-07 13:57:25 +08:00

1

要不推广 tailwindcss 吧

7

fengfuliu

2022-04-07 14:15:03 +08:00

1

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

8

ypzhou

2022-04-07 14:15:58 +08:00

1

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

9

zxCoder

2022-04-07 14:16:51 +08:00

1

flex 布局

10

murmur

2022-04-07 14:29:11 +08:00

1

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

11

ration

2022-04-07 15:45:09 +08:00 via Android

1

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

12

henryhu

2022-04-07 15:50:43 +08:00

1

css 框架选择

13

jjwjiang

2022-04-07 15:55:02 +08:00

1

看团队水平

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

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

14

wu67

2022-04-07 16:14:43 +08:00

1

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

15

Leviathann

2022-04-07 16:19:24 +08:00

1

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

16

waiaan

2022-04-07 16:20:33 +08:00

2

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

17

abear

2022-04-07 16:26:38 +08:00

1

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

18

jqtmviyu

2022-04-07 16:29:00 +08:00

tailwindcss

19

hellojay

2022-04-07 16:32:05 +08:00

1

tailwindcss 不要太爽了

20

devwolf

2022-04-07 16:55:42 +08:00

1

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

比如：
=======================
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

这样的？

21

devwolf

2022-04-07 17:02:44 +08:00

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

22

TimPeake

2022-04-07 17:05:20 +08:00

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

23

otakustay

2022-04-07 17:09:08 +08:00

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

24

murmur

2022-04-07 17:16:33 +08:00

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

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

25

NathanInMac

2022-04-07 17:27:31 +08:00

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

26

otakustay

2022-04-07 17:51:26 +08:00

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

27

KissFace

2022-04-07 17:55:20 +08:00

flex 布局

28

KouShuiYu

2022-04-07 18:45:36 +08:00

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

29

mythjava

OP

2022-04-07 20:06:40 +08:00

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

30

alphardex

2022-04-07 20:08:00 +08:00

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

31

morize

2022-04-07 20:36:16 +08:00

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

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

32

Seanfuck

2022-04-07 22:19:31 +08:00

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

33

pengtdyd

2022-04-08 00:38:18 +08:00

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

34

pengtdyd

2022-04-08 00:41:02 +08:00

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

35

mythjava

OP

2022-04-08 09:19:43 +08:00

@alphardex 感谢提供思路

36

mythjava

OP

2022-04-08 09:46:18 +08:00

@pengtdyd 领导安排的没有办法

37

HAYWAEL

2022-04-08 10:46:02 +08:00

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

38

Arrowing

2022-04-08 10:54:47 +08:00

css 画叮当猫

39

horizon

2022-04-08 11:05:05 +08:00

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

40

murmur

2022-04-08 11:22:39 +08:00

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

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

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

41

g0thic

2022-04-08 11:32:51 +08:00

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

42

angith

2022-04-08 11:49:52 +08:00

tailwind 确实爽

43

woomly

2022-04-08 13:07:15 +08:00

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

44

horizon

2022-04-08 13:08:06 +08:00

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