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

zxCoder · 2021-03-16T00:13:09Z

顺便求推荐 CSS 教程 /书

CSS

语言

明了

教程

51 replies • 2021-03-20 23:04:11 +08:00

aydd2004

Mar 16, 2021

1

前端们不是写的还蛮开心的？

murmur

Mar 16, 2021

2

css 有什么难学的，IE8+以上都没啥 trick 了，新人直接学 flex 布局能省好多事

bzw875

Mar 16, 2021

3

不需要刻意的学习，从事前端的工作，天天画页面调样式倒逼你去学习遇到不懂的就查资料。

renmu123

Mar 16, 2021 via Android

4

css 权威指南，抠字眼去看，你就差不多能明白 css 原理了

qwei

Mar 16, 2021

5

@murmur 也不全是，iOS 对 flex 的支持不是很友好，总会出些奇奇怪怪的问题。

Jirajine

Mar 16, 2021 via Android

6

css 也还好吧，要么你就用 css-in-js 的方案。
不过 css 的问题是管的东西有点多，布局、动画之类的，单单样式还算挺简单明了的。

msg7086

Mar 16, 2021

12

7

treblex

Mar 16, 2021

8

flutter. web 端算是正式支持了，不过好像还是 canvas 方案，不太了解

10bkill1p

Mar 16, 2021

9

面试官：请写出隐藏元素的常用方法
我：margin-left: -99999px

liyang5945

Mar 16, 2021

10

css 难学个鸡儿，我之前是看培训班视频学的前端，觉得很简单，就是需要记忆的东西比较多点

consoleXY

Mar 16, 2021

11

@10bkill1p 学到了

murmur

Mar 16, 2021

12

@treblex flutter web 的官方 demo 连字体渲染都有问题，还是算了吧，第一次见到 2021 年 utf-8 环境英文字体都渲染出方框的

Building

Mar 16, 2021 via iPhone

13

前端难就难在兼容性上，新东西不敢用，同一段代码每个浏览器都有自己的想法...

jchencode

Mar 16, 2021

14

你说 CSS 特效难学，我还能理解，布局相对之前（不考虑 IE ），好写多了。

murmur

Mar 16, 2021

15

@Building flex 布局、transform 、translate 这些东西 IE10 就可以用了，新东西你用他干嘛，有哪个布局必须用新特性才做的出来

clown007

Mar 16, 2021

16

多写写记住那些属性就行了

djs

Mar 16, 2021

17

一直觉得 css 是非常难学习的，很多人那巧劲用的我都眼花了

yaphets666

Mar 16, 2021

18

css 学习难度大约在 java 的 1%这个水平.当然这里直说是会用,不谈精通.
觉得难学,主要还是因为你对 css 有成见...不愿意去记这些东西,或者不愿意动手.

murmur

Mar 16, 2021

1

19

你觉得 css 难学是因为 css 本身太强大，描述了太多东西，如果 css 好学岂不是这个东西太弱鸡

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

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

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

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

这种拓展的东西太多，你就觉得 css 复杂，所以学 css 要从需求学起，拆解设计稿，设计稿有什么你用什么

Vegetable

Mar 16, 2021

20

最近几年 css 没那么难学了

很多历史遗留问题都可以入土了，比如 ie6，基本不用考虑兼容问题了，学习 css 也不用掌握 css 本身，只需要够用就行了。
新出的东西设计其实很不错，比如 flex 、vw 、vh 之类的，都是非常棒特性，解决了很多痛点。不要打开一个教程一点一点学 css，那可能会很痛苦。顶多过一遍 https://zh.learnlayout.com/ ，然后现用现查

zxCoder

OP

Mar 16, 2021

21

补充一下我的实际问题，就是文章详情页里，通过点击目录，可以定位到某个大标题，然后就被顶部的固定导航栏盖住了，然后我就百度做法，找到一个解决方案，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

Mar 16, 2021

22

CSS 就个画样式的竟然三天内学不会 === CSS 难

Mutoo

Mar 16, 2021 via iPhone

23

你可以试试新的潮流：utility-first 的 tailwindcss

murmur

Mar 16, 2021

24

@Mutoo 这东西玩以下还可以，工程化太差了

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

全文搜索么

okinto

Mar 16, 2021

25

css 大神张鑫旭的书 css 世界推荐一下

zaul

Mar 16, 2021

26

flex 一把梭

Mutoo

Mar 16, 2021 via iPhone

27

@murmur postcss 管线 + @apply 喽。tailwindcss 2.0 早就工程化了。

ctrlands

Mar 16, 2021

28

现在不用兼容 ie 了，工作后几乎没有遇到过要兼容 ie 的项目了

hahastudio

Mar 16, 2021

29

因为排版是一个非常复杂的问题

66beta

Mar 16, 2021

30

不考虑历史问题兼容性问题的话
你需要易读性的话，可以在 tailwindcss 上自定义一套更语义化的：
.padding-vertical-2 {
@apply py-2;
}

Liam1997

Mar 16, 2021

31

现在很少手撸 CSS 的吧，基本都是各种 UI 框架一把梭，自己写点儿 sass 、less，布局 flex 就能 cover 大部分场景了。自己的网站可以使用 tailwindcss 啥的。

otakustay

Mar 16, 2021

32

“更简单明了地定义样式的语言”就是“现代化的 CSS”
Web 布局的核心是流式布局，这是很少在其它 UI 体系中见到的形式，而现有的 CSS 几乎是流式布局的最佳声明方式了
如果你要的不是流式布局，比如传统的绝对定位或者卡片布局，那可能会有一些更好的声明式的方案，或者直接找带 Layout 的组件库就行了