CSS 真难学啊 不考虑各种历史遗留因素,有没有可能诞生一个更简单明了地定义样式的语言(不知道能不能算语言)? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zxCoder
V2EX    CSS

CSS 真难学啊 不考虑各种历史遗留因素,有没有可能诞生一个更简单明了地定义样式的语言(不知道能不能算语言)?

  •  1
     
  •   zxCoder 2021-03-16 08:13:09 +08:00 6686 次点击
    这是一个创建于 1735 天前的主题,其中的信息可能已经有所发展或是发生改变。

    顺便求推荐 CSS 教程 /书

    51 条回复    2021-03-20 23:04:11 +08:00
    aydd2004
        1
    aydd2004  
       2021-03-16 08:15:16 +08:00
    前端们不是写的还蛮开心的?
    murmur
        2
    murmur  
       2021-03-16 08:21:58 +08:00
    css 有什么难学的,IE8+以上都没啥 trick 了,新人直接学 flex 布局能省好多事
    bzw875
        3
    bzw875  
       2021-03-16 08:22:05 +08:00
    不需要刻意的学习,从事前端的工作,天天画页面调样式倒逼你去学习遇到不懂的就查资料。
    renmu123
        4
    renmu123  
       2021-03-16 08:22:52 +08:00 via Android
    css 权威指南,抠字眼去看,你就差不多能明白 css 原理了
    qwei
        5
    qwei  
       2021-03-16 08:25:18 +08:00
    @murmur 也不全是,iOS 对 flex 的支持不是很友好,总会出些奇奇怪怪的问题。
    Jirajine
        6
    Jirajine  
      2021-03-16 08:30:03 +08:00 via Android
    css 也还好吧,要么你就用 css-in-js 的方案。
    不过 css 的问题是管的东西有点多,布局、动画之类的,单单样式还算挺简单明了的。
    msg7086
        7
    msg7086  
       2021-03-16 08:38:13 +08:00   12
    treblex
        8
    treblex  
       2021-03-16 09:01:48 +08:00
    flutter. web 端算是正式支持了,不过好像还是 canvas 方案,不太了解
    10bkill1p
        9
    10bkill1p  
       2021-03-16 09:02:24 +08:00
    面试官:请写出隐藏元素的常用方法
    我:margin-left: -99999px
    liyang5945
        10
    liyang5945  
       2021-03-16 09:03:47 +08:00
    css 难学个鸡儿,我之前是看培训班视频学的前端,觉得很简单,就是需要记忆的东西比较多点
    ran1ever
        11
    ran1ever  
       2021-03-16 09:12:51 +08:00
    @10bkill1p 学到了
    murmur
        12
    murmur  
       2021-03-16 09:13:25 +08:00
    @treblex flutter web 的官方 demo 连字体渲染都有问题,还是算了吧,第一次见到 2021 年 utf-8 环境英文字体都渲染出方框的
    Building
        13
    Building  
       2021-03-16 09:28:00 +08:00 via iPhone
    前端难就难在兼容性上,新东西不敢用,同一段代码每个浏览器都有自己的想法...
    LiuJiang
        14
    LiuJiang  
       2021-03-16 09:28:48 +08:00
    你说 CSS 特效难学,我还能理解,布局相对之前(不考虑 IE ),好写多了。
    murmur
        15
    murmur  
       2021-03-16 09:32:30 +08:00
    @Building flex 布局、transform 、translate 这些东西 IE10 就可以用了,新东西你用他干嘛,有哪个布局必须用新特性才做的出来
    clown007
        16
    clown007  
       2021-03-16 09:32:46 +08:00
    多写写记住那些属性就行了
    djs
        17
    djs  
       2021-03-16 09:38:19 +08:00
    一直觉得 css 是非常难学习的,很多人那巧劲用的我都眼花了
    yaphets666
        18
    yaphets666  
       2021-03-16 09:41:04 +08:00
    css 学习难度大约在 java 的 1%这个水平.当然这里直说是会用,不谈精通.
    觉得难学,主要还是因为你对 css 有成见...不愿意去记这些东西,或者不愿意动手.
    murmur
        19
    murmur  
       2021-03-16 09:42:54 +08:00   1
    你觉得 css 难学是因为 css 本身太强大,描述了太多东西,如果 css 好学岂不是这个东西太弱鸡

    比如你要描述个物体,他有尺寸、位置,尺寸又有绝对大小和相对大小

    物体不只一个,那就有位置关系,物体之间还有排布、间距

    作为最简单的文字,也有颜色、粗细、大小、间距、行高

    物体如果是个框框,还有外框、外框粗细、圆角、背景,作为背景有背景色,是不是还有渐变,有背景图,图片要怎么摆放

    这种拓展的东西太多,你就觉得 css 复杂,所以学 css 要从需求学起,拆解设计稿,设计稿有什么你用什么
    Vegetable
        20
    Vegetable  
       2021-03-16 09:45:06 +08:00
    最近几年 css 没那么难学了

    很多历史遗留问题都可以入土了,比如 ie6,基本不用考虑兼容问题了,学习 css 也不用掌握 css 本身,只需要够用就行了。
    新出的东西设计其实很不错,比如 flex 、vw 、vh 之类的,都是非常棒特性,解决了很多痛点。不要打开一个教程一点一点学 css,那可能会很痛苦。顶多过一遍 https://zh.learnlayout.com/ ,然后现用现查
    zxCoder
        21
    zxCoder  
    OP
       2021-03-16 09:45:52 +08:00
    补充一下我的实际问题,就是文章详情页里,通过点击目录,可以定位到某个大标题,然后就被顶部的固定导航栏盖住了,然后我就百度做法,找到一个解决方案,https://zhuanlan.zhihu.com/p/127781764,就是用负数 margin-top 和正数 padding-top,然后这种方法不知道为什么和上面网站演示的不太一样,我的在大标题上面会出现一段空白,滚动就出现了,然后我就又调了调 padding margin.... 最后才勉强成形(不太准确,反正肉眼看不出区别就是了)


    @aydd2004
    @murmur
    @bzw875
    @renmu123
    @qwei
    @Jirajine
    @msg7086
    @treblex
    @10bkill1p
    @liyang5945
    @ran1ever
    @Building
    @LiuJiang
    @clown007
    SpiritQAQ
        22
    SpiritQAQ  
       2021-03-16 09:55:33 +08:00
    CSS 就个画样式的竟然三天内学不会 === CSS 难
    Mutoo
        23
    Mutoo  
       2021-03-16 10:04:45 +08:00 via iPhone
    你可以试试新的潮流:utility-first 的 tailwindcss
    murmur
        24
    murmur  
       2021-03-16 10:06:04 +08:00
    @Mutoo 这东西玩以下还可以,工程化太差了

    领导说让你把所有灰色的按钮字体改大一号,但是你的按钮是 bg-gray 、width-20 、fontsize-12 组成的,你怎么改

    全文搜索么
    wangmn
        25
    wangmn  
       2021-03-16 10:08:31 +08:00
    css 大神张鑫旭的书 css 世界 推荐一下
    zaul
        26
    zaul  
       2021-03-16 10:09:34 +08:00
    flex 一把梭
    Mutoo
        27
    Mutoo  
       2021-03-16 10:13:00 +08:00 via iPhone
    @murmur postcss 管线 + @apply 喽。tailwindcss 2.0 早就工程化了。
    ctrlands
        28
    ctrlands  
       2021-03-16 10:13:18 +08:00
    现在不用兼容 ie 了,工作后几乎没有遇到过要 兼容 ie 的项目了
    hahastudio
        29
    hahastudio  
       2021-03-16 10:13:32 +08:00
    因为排版是一个非常复杂的问题
    66beta
        30
    66beta  
       2021-03-16 10:17:34 +08:00
    不考虑历史问题兼容性问题的话
    你需要易读性的话,可以在 tailwindcss 上自定义一套更语义化的:
    .padding-vertical-2 {
    @apply py-2;
    }
    Liam1997
        31
    Liam1997  
       2021-03-16 10:27:30 +08:00
    现在很少手撸 CSS 的吧,基本都是各种 UI 框架一把梭,自己写点儿 sass 、less,布局 flex 就能 cover 大部分场景了。自己的网站可以使用 tailwindcss 啥的。
    otakustay
        32
    otakustay  
       2021-03-16 10:31:24 +08:00
    “更简单明了地定义样式的语言”就是“现代化的 CSS”
    Web 布局的核心是流式布局,这是很少在其它 UI 体系中见到的形式,而现有的 CSS 几乎是流式布局的最佳声明方式了
    如果你要的不是流式布局,比如传统的绝对定位或者卡片布局,那可能会有一些更好的声明式的方案,或者直接找带 Layout 的组件库就行了
    charlie21
        33
    charlie21  
       2021-03-16 10:52:38 +08:00
    @Mutoo tailwind 是给 CSS 老手的,从 a 到 z 有两种途径,a-b-c-d-...-z 和 a-z,后者直接劝退
    TomatoYuyuko
        34
    TomatoYuyuko  
       2021-03-16 11:01:50 +08:00
    tailwindcss 了解一下?
    charlie21
        35
    charlie21  
       2021-03-16 11:05:51 +08:00
    为什么呢?不符合认识事物的规律 直接限制你的词汇量
    sugars
        36
    sugars  
    PRO
       2021-03-16 11:06:44 +08:00
    先把盒子模型理解透了,css 就不难了
    Sapp
        37
    Sapp  
       2021-03-16 11:49:38 +08:00
    用 flex, 不要看兼容性,不要看各种稀奇古怪的花招,他马上就简单起来了。
    wolfan
        38
    wolfan  
       2021-03-16 11:52:41 +08:00
    只要不需要用 CSS 作动画什么的,其实本一天就成吧。

    runoob 菜鸟上看入门,MDN 上学精通。https://caniuse.com/#home 上查通用。
    USAA
        39
    USAA  
       2021-03-16 13:41:22 +08:00
    JS 才难
    gitdoit
        40
    gitdoit  
       2021-03-16 14:07:08 +08:00
    这东西找个教程静下心看几天,常用的几种东西都知道的差不多了。高阶的后面再慢慢看
    luogege
        41
    luogege  
       2021-03-16 14:47:33 +08:00
    一般的布局很简单,照着打就行了。往上,难点的特效和动画就开始难了,这个就需要自己去研究下了,有些需要配合 js 去实现的,这个可以拦住一堆 css 小白
    luogege
        42
    luogege  
       2021-03-16 14:51:15 +08:00
    @zxCoder 这个有个专门的 api,叫 scrollIntoView,就是通多导航定位到相应的标题是吧
    XCFOX
        43
    XCFOX  
       2021-03-16 16:50:26 +08:00
    各类 css 原子库和 css in js 库都在尝试 css 的各种花样。
    目前见过步子最大的是: https://chakra-ui.com/ ,几乎不用写原生 css,
    KouShuiYu
        44
    KouShuiYu  
       2021-03-16 17:47:28 +08:00
    两年前端,无法让 canwas 在手机上居中,
    https://chenkai0520.github.io/scratch-image/
    KouShuiYu
        45
    KouShuiYu  
       2021-03-16 17:49:32 +08:00
    两年前端,无法让 canvas 在手机上居中,谁可以的话欢迎提个 PR[scratch-image]( https://github.com/chenkai0520/scratch-image)
    yazoox
        46
    yazoox  
       2021-03-16 18:02:51 +08:00
    我们公司用的方案,styled component,好像就是楼上兄弟说的 css-in-js 。使用下来感觉还好,俺是从 0 开始学前端。
    ETO
        47
    ETO  
       2021-03-16 20:43:46 +08:00
    @murmur 可以提取组件,跟配置的,你可以把 width-20 配置任意大小,然后再打包代码。
    ajaxfunction
        48
    ajaxfunction  
       2021-03-16 23:45:24 +08:00
    那你是没学 xml 布局。
    有空你试试用 xml 方式去写设计稿,就会知道写 css 是多么的爽
    mikulch
        49
    mikulch  
       2021-03-17 07:32:04 +08:00 via iPhone
    @murmur 现在学习前端还需要 dom 编程那些吗?
    meepo3927
        50
    meepo3927  
       2021-03-17 10:16:35 +08:00
    flex 简单很多
    henryhu
        51
    henryhu  
       2021-03-20 23:04:11 +08:00
    tailwindcss 了解一下
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     946 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 18:52 PVG 02:52 LAX 10:52 JFK 13:52
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86