CSS一般是由美工来写还是由前端程序员来写？
CSS一般是由美工来写还是由前端程序员来写？ 如果是规整程度较高的网页，那很可能既不是美工写的，也不是前端写的——而是前端从美工的UI导出稿里复制粘贴的。
反正sketch有生成css的功能。 UI设计师负责原稿设计、html、css以及一些简单的js特效实现。研发工程师负责将视觉设计融合到具体的业务场景中，也就是实现产品。测试工程师负责 产品的单元测试，自动化测试框架。运维工程师负责整个流水线的搭建。
在整个产品的研发环节中，大家是紧密在一起工作的。UI设计师一些效果不会写，可以找研发帮忙。测试工程师可以指导研发写一些单元测试。当然，有些厉害的公司还有特性团队，专门解决一些行业的复杂问题，他们作为技术专家帮各个团队解决问题。在全世界范围内，几乎大部分好的互联网公司都是这样的运作模式。
我是计算机科班出身的，这个专业里面从来没有前端这个专业。至于现在前端流行的各种框架，也不是所谓的”前端程序员“创造出来的，他们基本是研发工程师。还有，像google这些公司面试的时候更多地是面试算法，编程，程序设计，计算机基础知识。你进去后，很有可能去写React、写Go，甚至一些听都没听说过的语言和技术栈。而且，公司可能会用新的语言去替换之前的技术栈，你的技术栈会随着一起迁移。
国内的一些初创公司也是学这一套，但招到的人都参差不齐，可能刚毕业甚至是跨专业的让你去干设计、写前端、写后端、写SQL，什么活都干。几年之后，你会变得很迷茫，因为没有对编程的基本功积累，所有都停留在很浅薄的认知上。比如，学个php再去转go，发现学不过来。学前端也只是在vue和react这些框架建立起来的围墙内堆砌代码。比如：react的hook和vue的composition api带来的变革是什么很多人都不知道，只是觉得它有这个东西，那我就要学，不然会被淘汰。
然后像BAT这种公司，八股文似的面试手段，导致大部分的人天天都在背一些概念性的东西，比如js的this指向问题，这个明显是语言的一个历史包袱，一个缺陷，经常会有人拿这个来考面试的人。真正能为公司创造利润的东西，比如如何写好代码，不把一个项目堆成一座屎山，反而没多少人关心，因为这个对面试没多大用处。所以很多人都把时间花费在研究vue或react源码上，研究一些几乎用不到的api，而不是编程本身，真的很悲哀。当然，如果真的是兴趣使然，那就另说了。有篇很有意思的文章： 他开发了 redux，昨晚“字节一面”却挂了？
整个行业的导向导致了”CSS一般是由美工来写还是由前端程序员来写？“这样的问题。当然，类似的问题还有很多：
我应该学vue还是react？
我作为一个前端程序员，要写后端代码吗？
go很火，java程序员要转go吗？
全栈工程师有前途吗？
... 现在很多类型的业务很少写css，套上组件库之后，布局走栅格，样式走组件，有时候好几天都写不了几句css
上次入职了一位前端，说他完全没写过 css，只写js，css都需要美工岗写好了给他，并且现在和以后也不接受写 css。。当时我就震惊了 通常来说是前端写的。
美工了解一下css的布局规范可以切出规范的切图和sprites。
不过确实样式这一部分工作给美工来做会比较好，但是美工对css的了解肯定是不够的，所以通常是用工具把css的编写可视化。
这是low code搭建工具的多个方向中的一个，让前端专注model层逻辑和交互，视图层通过可视化的方式来配置（相当于写css和html/jsx/模板）。
想象一下，前端基于已有的物料库写好一个页面，然后设计/产品可以在测试环境打开这个页面，旁边还有样式/布局编辑器可以做到立即生效看效果，还可以把接口相同的模块替换成另一个。这对前端来说就太省心了。测试环境可以用动态加载的视图层配置，不管是代码生成也好，schema也好。正式发布可以AOT提前编译成代码提高性能。
不管是直接写css，还是lowcode搭建，还是完全不管css，美工都应该至少了解css的布局逻辑，否则切出来的图根本没法用。。 看公司。
小公司的前端不仅写 CSS 还得 Photoshop 切个页面，搞不好还得来几句 SQL。
大公司的话目前大多数也是由前端程序员来写。尤其是现在 react 与 JSX 的盛行时期，把 CSS + HTML 和 JavaScript 全部都杂糅到一起成了业界标配。
现在大热的 styled-components GitHub 上头有 30+ k 的点赞，基本湾区各种大小厂都在用。面试肯定也少不了来这么一个 styled-component。我来个 demo 你感受一下。
const Button = styled.a`
/* This renders the buttons above... Edit me! */
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
/* The GitHub button is a primary button
* edit this to target it specifically! */
${props => props.primary && css`
background: white;
color: black;
`}
`
render(
<div>
<Button
href=&#34;https://github.com/styled-components/styled-components&#34;
target=&#34;_blank&#34;
rel=&#34;noopener&#34;
primary
>
GitHub
</Button>
<Button as={Link} href=&#34;/docs&#34;>
Documentation
</Button>
</div>
)
如果你是前端，还打算把 CSS 交给美工来写吗？
如果你是美工，真的不打算转前端继续写 CSS 吗？
页:
[1]