求问 视觉稿转成 css 的方法论

[xiaopenyou]

像写程序，自顶向下、逻辑上分解问题（算法），用伪码 etc.有解决思路后，再逐句翻译成具体代码。是有成熟方法论的。

但是视觉转 css ，怎样组装 css 代码，最终 bit 还原出视觉稿？这一步骤，有什么资料吗？
精通 CSS 那本书，也是具体讲常用组件的实现，没升华到方法论和理论层面。要是遇到未知的样式呢？
是因为这个领域本就没多少理论可挖，没有按部就班的方法论，全在经验积累吗？

[xiaopenyou]

写 css 时，经常写几行就浏览器看下效果，跟打补丁似的。这感觉就像写程序，写几行就调试下，一样坑爹
小弟初学，是哪里没理解对，还是写 css 本来就是这样…

[Septembers]

Firefox 有个 3D mode 有助于帮助你理解别人的 DOM 结构

[emric]

脑里想好大概的结构(或者用笔) -> code -> 打开浏览器细调测试

[Septembers]

先理解业务再理解视觉设计

我目前的方法论：吧视觉扔一个假想的平直空间抽象假想 DOM 结构和需要的 style ，再最终实施

视觉上实现大多数时候比业务实现简单

[zonghua]

@xiaopenyou 我现在就是这样坑自己，😂😩

[learnshare]

写 HTML 和 CSS 也有一个抽象、复用之类的过程。

不过简单点，就是拆分、再拆分、再拆分，从大块开始写，逐步细化、填充效果和内容。

[xiaopenyou]

@Septembers 谢谢，小弟好奇的就是「把视觉扔一个假想的平直空间抽象*假想* DOM 结构和需要的 style 」中的「假想」这一心理过程，是有成熟方法论的(按照一套操作步骤必能"假想"出)，还是更多靠经验(点点积累 什么样的视觉假想出什么样的 dom&style )。

不过看大家的回复，似乎经验成分居多。谢谢前辈们:)

[Septembers]

@xiaopenyou 思想实验

[kisnows]

我一般会先把设计稿的结构分析一下，然后把相同的地方整理出来。
这样先写结构，然后把相同的地方写出来，也就是组件。
最后就跟你第一条回复一样，写几句，看一下浏览器。
好像，也没有什么特别好的办法。

[qiuai]

布局-分栏-每一个栏目-浏览器校对细节.