V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
zxCoder
V2EX  ›  CSS

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

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

    顺便求推荐 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  
       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   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4172 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 09:25 · PVG 17:25 · LAX 02:25 · JFK 05:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.