V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
mythjava
V2EX  ›  问与答

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

  •  
  •   mythjava · 2022-04-07 13:08:53 +08:00 · 3723 次点击
    这是一个创建于 721 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    我想到了几个方面

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

    各位还有什么好的点子呢

    44 条回复    2022-04-08 13:08:06 +08:00
    BeijingBaby
        1
    BeijingBaby  
       2022-04-07 13:36:44 +08:00   ❤️ 2
    这也太浅了?
    面向后端技术么?
    shervinchen
        2
    shervinchen  
       2022-04-07 13:43:30 +08:00   ❤️ 1
    你这也太水了。。。给个方向吧,可以谈谈现代 CSS 方案下的主题系统,讲讲实现和设计思路
    heyjei
        3
    heyjei  
       2022-04-07 13:43:52 +08:00   ❤️ 1
    既然不用特别深入,就说明是面向初级用户。

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

    布局讲 flex 布局,为啥你选则 grid 布局,这个不常用吧,一般用最多的还是 flex 布局
    ReggieLee
        4
    ReggieLee  
       2022-04-07 13:45:09 +08:00   ❤️ 1
    原子 css\css in js\web compoments 下的 css
    murmur
        5
    murmur  
       2022-04-07 13:52:19 +08:00   ❤️ 1
    flex 布局比较好,ie 都可以用
    xujiahui
        6
    xujiahui  
       2022-04-07 13:57:25 +08:00   ❤️ 1
    要不推广 tailwindcss 吧
    fengfuliu
        7
    fengfuliu  
       2022-04-07 14:15:03 +08:00   ❤️ 1
    分享一些可以实现比较酷的效果,业务还可能用到的 css 吧 filter mix-blend-mode clip 之类的
    ypzhou
        8
    ypzhou  
       2022-04-07 14:15:58 +08:00   ❤️ 1
    zxCoder
        9
    zxCoder  
       2022-04-07 14:16:51 +08:00   ❤️ 1
    flex 布局
    murmur
        10
    murmur  
       2022-04-07 14:29:11 +08:00   ❤️ 1
    tailwind 简直是工程化的灾难,这东西单人用还可以,多人用你怎么能保证每个人对尺寸样式牢记于心
    ration
        11
    ration  
       2022-04-07 15:45:09 +08:00 via Android   ❤️ 1
    讲布局,块元素,行内元素,margin ,padding ,border ,float 之类的,再讲讲比较流行的布局,比如 grid 之类的
    henryhu
        12
    henryhu  
       2022-04-07 15:50:43 +08:00   ❤️ 1
    css 框架选择
    jjwjiang
        13
    jjwjiang  
       2022-04-07 15:55:02 +08:00   ❤️ 1
    看团队水平

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

    现在写 css 还不用 flex 布局简直是犯罪
    wu67
        14
    wu67  
       2022-04-07 16:14:43 +08:00   ❤️ 1
    还是得讲基础. 这玩意, 往深往浅讲都行. 浅的可以讲布局, 面向公司的设计、产品、和老板. 深的可以讲讲 flex 以及容易过大、过小时的伸缩计算 /设置, 这玩意就算是前端也能蒙圈.
    如果讲 ui 框架什么的, 推广使用倒是还行, 当课程讲, 不太可能, 有几个人就能衍生出几种写法
    Leviathann
        15
    Leviathann  
       2022-04-07 16:19:24 +08:00   ❤️ 1
    @murmur 这个都有提示的把,装插件会自动提示一个 tailwind utility 对应的实际 css 是什么
    waiaan
        16
    waiaan  
       2022-04-07 16:20:33 +08:00   ❤️ 2
    找《 css 的秘密花园》这本书,把里面的东西讲讲就差不多了。
    abear
        17
    abear  
       2022-04-07 16:26:38 +08:00   ❤️ 1
    animate 和 tailwindcss 啥的比较优秀的库;普通的太普通了。推广推广,让他们看源码。😂
    jqtmviyu
        18
    jqtmviyu  
       2022-04-07 16:29:00 +08:00
    tailwindcss
    hellojay
        19
    hellojay  
       2022-04-07 16:32:05 +08:00   ❤️ 1
    tailwindcss 不要太爽了
    devwolf
        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


    这样的?
    devwolf
        21
    devwolf  
       2022-04-07 17:02:44 +08:00
    @devwolf 当我没说……技术分享我看成技巧分享了,那没事了
    TimPeake
        22
    TimPeake  
       2022-04-07 17:05:20 +08:00
    掘金上很多。。。
    细说, 比如纯 css 实现阅读器进度条等,filter 滤镜实现 xx 特效等 B 格还高,大开眼界
    otakustay
        23
    otakustay  
       2022-04-07 17:09:08 +08:00
    @murmur #10 那我们怎么保证每个人对 api 牢记于心……
    murmur
        24
    murmur  
       2022-04-07 17:16:33 +08:00
    @otakustay 我的意思是,像 element 这种,全局设置好之后,form 的尺寸都是固定的,只要往里堆组件就可以

    用了 tailwind ,颜色、尺寸、大小、都需要自己组合
    NathanInMac
        25
    NathanInMac  
       2022-04-07 17:27:31 +08:00
    css 的工程化,convention ,best practice ,生产的优化之类的
    otakustay
        26
    otakustay  
       2022-04-07 17:51:26 +08:00
    @murmur #24 那毕竟分层上它们就不在同一个层嘛。我接触过不少团队是在 tailwind 基础上再做 design token class 的,用起来就很接近 element ui 这个效果了,比如 grid-l 就固定大小里面放几格也固定,按着设计规范来
    KissFace
        27
    KissFace  
       2022-04-07 17:55:20 +08:00
    flex 布局
    KouShuiYu
        28
    KouShuiYu  
       2022-04-07 18:45:36 +08:00
    我之前写过 css 样式隔离的几种方案
    https://chenkai.life/css/css-web-compoent-isolation/
    mythjava
        29
    mythjava  
    OP
       2022-04-07 20:06:40 +08:00
    @BeijingBaby
    @shervinchen
    @jjwjiang
    我们团队没有专门搞前端的 大家都是搞后端的 前端能跑就行 一直都是用的 jquery 布局基本都是靠 float 的 今年部分项目才决定换的 vue
    alphardex
        30
    alphardex  
       2022-04-07 20:08:00 +08:00
    1. 用 CSS 实现常见的 UI 效果
    2. 用 CSS 替代 JS
    3. 用 CSS 创作动画特效
    4. 用 CSS 进行数学运算(主玩 CSS 变量)
    12 相对实用基础,34 纯属个人喜好
    morize
        31
    morize  
       2022-04-07 20:36:16 +08:00
    我的前端同事能有一半搞得清楚以下三点,我就谢天谢地了
    1. padding 和 margin 有什么区别和使用场景
    2. 写 font 自觉加上 line-height
    3. 能用伪类解决的就不要写一堆 js 了,会用一个 :last-child ,我觉得就很棒了

    另外,2022 年了,还用绝对定位飞来飞去的,还有十八般武艺消除浮动...不是说不好,大部分场景眼下都有更好的办法。
    Seanfuck
        32
    Seanfuck  
       2022-04-07 22:19:31 +08:00
    flex 这么多人提了,可以的。还可以讲讲 svg ,BFC 等等
    pengtdyd
        33
    pengtdyd  
       2022-04-08 00:38:18 +08:00
    CSS 还用得着技术分享???不是有手就行吗
    pengtdyd
        34
    pengtdyd  
       2022-04-08 00:41:02 +08:00
    CSS 的技术分享给谁讲?
    前端:前端连这个都不会还讲个屁,直接开除算了。
    后端:会这个干嘛,有这时间还不如研究一下 k8s ,比听什么 css 靠谱的多。
    mythjava
        35
    mythjava  
    OP
       2022-04-08 09:19:43 +08:00
    @alphardex 感谢提供思路
    mythjava
        36
    mythjava  
    OP
       2022-04-08 09:46:18 +08:00
    @pengtdyd 领导安排的没有办法
    HAYWAEL
        37
    HAYWAEL  
       2022-04-08 10:46:02 +08:00
    分享一般没那么久。可以到张鑫旭那找一篇有意思的主题。吃透相关的内容 然后根据这个发散就好
    Arrowing
        38
    Arrowing  
       2022-04-08 10:54:47 +08:00
    css 画叮当猫
    horizon
        39
    horizon  
       2022-04-08 11:05:05 +08:00
    @murmur 你在说什么。。不可以写组件用 tailwind ?
    照我说,tailwind 才是强约束。
    murmur
        40
    murmur  
       2022-04-08 11:22:39 +08:00
    @horizon 工程化应该减少花样,所有的尺寸、样式,能统一都统一,你只需要知道场景不需要知道尺寸

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

    如果每个页面都是定制化,那可能 tailwind 更适合
    g0thic
        41
    g0thic  
       2022-04-08 11:32:51 +08:00
    https://zhuanlan.zhihu.com/p/483199541 可以看下这篇文章 讲了很多新东西 很多前端估计都不知道
    angith
        42
    angith  
       2022-04-08 11:49:52 +08:00
    tailwind 确实爽
    woomly
        43
    woomly  
       2022-04-08 13:07:15 +08:00
    可以讲一下仅使用单元素实现各种炫酷效果的实现过程...
    horizon
        44
    horizon  
       2022-04-08 13:08:06 +08:00
    @murmur 这得先问问交互 UI 答应不答应
    组件本身样式又不能覆盖所有场景,必然会有自定义样式的情况。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1214 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 18:11 · PVG 02:11 · LAX 11:11 · JFK 14:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.