CSS开发人员 web专业人员 whose primary responsibility is to deliver a polished and styled product to the visitor’s 浏览器. 几乎每个网站都使用CSS, 但在现代web开发堆栈中，CSS通常不被认为是“平等的”. 不幸的是, 这种误解会导致CSS被认为是理所当然的, 甚至在某种程度上被忽视了.

Allowing non-CSS developers to deal with CSS often results in the introduction of CSS hacks and 错误 in your code, 并且会给开发人员带来不必要的挫折. 在本文中, I would like to familiarize everyone with what the job encompasses so you can get a better understanding of why every site needs a reliable, 专业CSS开发人员.

CSS开发者都做些什么?

让我们从基础开始. 为什么CSS如此重要，CSS开发人员究竟应该做些什么?

CSS是一种特定的语言因此，它不能独立存在. 它需要HTML才有意义. 因此，CSS开发人员要做的第一件事就是编写HTML代码.

编写整洁的HTML总是很重要的

写简单的, 清洁, and adequately organized HTML is a great responsibility because the humble HTML document is the first thing you deliver to your end-users.

如果您正在编写一个生产就绪的HTML文档, you should try to make sure to include all required and optional tags in the head of the document to make the most of your website. 我说的是设置正确的文档类型, 语言, 元标记, 网站图标, 加载技术, 和搜索引擎优化.

一切可以帮助你提高网站性能的东西, 更容易, 并提供更多的曝光给你的观众和搜索引擎, 以及其他服务和工具. HTML文档的主体也不应该过于臃肿. 知道何时使用语义HTML标记, 如何添加所需的HTML属性, 以及如何避免深嵌套 divitis，不应该被忽视，而应该从项目的一开始就实施. 没有专业的开发人员会在项目中途开始遵循最佳实践, 然而，即使是像HTML这样看似基本的东西也经常出错.

总体设计通常决定了我们如何组织各种HTML组件. CSS开发人员与设计人员密切合作, 并不是每个设计师都使用相同的工具来提供设计. 熟悉Sketch, Photoshop, InVision, 或Figma, 并且能够“切片”设计, CSS开发人员必须具备哪些技能. One should always keep in mind how to structure a component to make it possible to apply the design at the same time. 使用良好的命名约定，比如 本 or 允许，应该防止编写臃肿的HTML或不可维护的CSS代码.

JavaScript无处不在

有些组件应该是交互式的，比如模态或工具提示. 这通常需要很好地掌握JavaScript，不是“深度”JavaScript，而是 JavaScript事件和DOM处理. DOM handling could be challenging because you don’t want to drain your user’s resources and make your website sluggish or, 更糟糕的是, 让它崩溃，让它完全没有反应.

JavaScript世界正在快速发展, 有时似乎每天都有新的框架和工具出现. 由于JavaScript的巨大流行, staying in the loop is critical if you want to use the latest best practices and deliver the most enjoyable experience to end-users.

CSS

CSS也是如此, 尽管许多人认为它的发展速度与JavaScript相差甚远. 然而，新的特性，如CSS变量，CSS网格，甚至 Flexbox 需要一些时间来掌握.

然后，浏览器的支持，这仍然是一个问题，即使在今天. Your site might look like a million dollars in a modern 浏览器, but not so much in legacy 浏览器s. IE11可能支持Flexbox，但它可能不会像预期的那样工作. 知道如何避免这些问题是CSS开发人员工作的一部分.

值得庆幸的是，社区非常有帮助，网站喜欢 Flex错误 or Grid错误 能节省很多时间吗.

CSS工具，技术和原则

有时我们可以依赖任务运行器之类的工具或Grunt之类的捆绑器, 狼吞虎咽地吃, 和webpack来帮助我们交付可靠的代码. 你可以用编译器来强化你的代码， 缩小镜、babel或PostCSS来编译代码.

然后我们需要考虑到各种字体, 排版, 图片, 图标, 图标的字体, 动画, 转换, 以及其他抽象方面，这些都是CSS开发人员日常任务的一部分. 每个功能都有其特殊性、局限性、问题和解决方案. 你掌握的功能和技术越多, 在项目中设计和实现组件就越容易.

There’s a significant number of CSS properties and values, and one cannot know everything. 幸运的是, 我们的工具在这方面帮助了我们，尤其是代码编辑器和开发工具. 然而，当您需要解决一个问题时，即使是工具也不能帮助解决头痛 z - index问题. 失败是最好的学习方式.

我想说的是，在使用CSS时尤其如此，原因如下:

如果你从来没有尝试过解决z指数问题, 那么你就永远学不到堆叠上下文. 如果您从未尝试过重写Bootstrap类, 那你就永远学不到什么是特异性. If you have never tried to fix the float problem, you would never learn about the box model.

有时候，解决方案很简单，但仅仅提出一个问题是很难的. 当与其他语言比较时，你不能问为什么我的循环不起作用. 您需要完整的上下文来解决CSS中的问题, 这通常是许多人不理解的: 的级联.

层叠是CSS中最好的特性，它应该为你工作，而不是反对你. 一些开发人员通过发明自定义方法来解决这个问题，例如 CSS-in-JS. If you pack your CSS in the encapsulated environment like React, you cannot use it elsewhere. 我怀疑这是否是您希望在可扩展平台中使用的方法. If you have problems with 的级联, learn to embrace it, and then learn how to tame it.

在我准备这篇文章的时候，马克斯Böck 关于CSS思维的文章，这正是CSS开发人员需要做的. CSS开发人员在盒子里思考, 预测内容修改, and avoid fixed numbers whenever possible while trying to write as less code as possible without overriding default values and context.

为什么你需要一个CSS开发人员?

大多数 前端 甚至全栈开发人员都可以编写CSS代码. But not every one of them could fix every CSS bug or implement the design without convoluting HTML code or relying on JavaScript where it is not necessary.

专业的CSS开发人员关心代码的最终细节, 喜欢创建布局和组件, 即使是最复杂的, 并且知道如何解决每个问题或漏洞.

CSS编码标准

Before writing any code, it is generally a good idea to have some ground rules about writing code. CSS developers should respect coding standard—it is essential for maintainability and scalability of the project.

选择在整个项目中使用的命名约定. Establishing a naming convention early on can help developers produce better and more organized code. It can also help everyone involved in the project understand the component structure and relationship between components and elements by reading the HTML code alone.

决定如何处理CSS中的缩进、选择器类型、简写属性和单元. For example, avoid using pixel units if the coding standard proposes the usage of rem units. 每个人都有自己独特的写作/编码风格, 但是作为一名专业人士, 你必须有能力领养, 更重要的是, 理解每一个概念.

CSS设计实现

在将设计转换为代码之前, 你应该花时间去理解每一页, 布局, 和组件. If possible, dissect every page, create a list of pages 和组件s, and try to find a pattern.

如果您注意到某个组件出现在多个页面上, you should recognize the environment around it and try to think of it as a standalone component. 如果有类似的组件, 比如卡片或列表, 你可以有相同分量的变化. This way you could reuse the HTML code and write only a bit of CSS code to make it appear modified.

It is also a good idea to try to find patterns in other areas, like 排版 and spacing. Sometimes this leads to having helper classes that could be used across the whole project rather than individual pages.

组织CSS代码

CSS开发人员应该组织他们的代码，并为每个人创建一个有意义的结构. 当使用CSS处理器之类的工具时, CSS开发人员应该记录生成编译代码的过程.

如果需要，CSS开发人员可以创建样式指南. Style guides can be a reference when creating new pages or deciding how to approach existing ones. My advice is to make the style guide globally available for the whole team because it is often much easier to have a decision made when having a visual context. Style guides can contain color palettes, 排版 rules, coding standards, and even static pages. 没有限制，除了预算和你的想象力.

生产中的CSS代码

编写CSS代码意味着处理跨浏览器问题, 错误, 动画, 转换, 反应性, 还有打印样式. 对于全能的开发人员来说，这些特性中的许多都不容易管理. 我想说的是，这些是最不受欢迎的CSS任务, 并不是每个开发人员都知道如何处理它们. 另一方面, specialized CSS developers know (or at least should know) how to produce code with every bug, 浏览器, 考虑到环境.

使用现代方法是一种方法, but supporting older 浏览器s and respecting user’s settings like reduced motions shouldn’t be ignored, 要么.

CSS开发人员也编写HTML和JavaScript代码. 这意味着资产交付是CSS开发人员的责任. CSS开发人员应该负责加载字体, 提取关键CSS, 使用延迟和异步JavaScript加载, 提供响应式图像.

这些技术都不容易实现，也没有什么灵丹妙药.

CSS开发者能为你做什么

以上都解释了为什么你需要一个专门的CSS开发人员. 以下是他们处理的一些关键事情:

• 确保每个项目成员都遵守编码标准
• 实现设计
• 组织代码
• 编写代码
• 修正错误
• 学习新技术
• 改进代码

结束

太久了, the question of the existence and importance of the role of CSS developers encouraged not particularly constructive and well-meaning discussions. 让我们试着一劳永逸地承认CSS开发人员是一个合适的角色.

在他的文章中， 巨大的鸿沟, 克里斯·科耶尔引用了一些科技领袖的话, 他们中的大多数人都同意应该有一个界限, 应该有一个 基于css的角色 不需要掌握现代JavaScript框架的知识. 如果你知道的不仅仅是“CSS”，那将会有所帮助,，但这个角色应该存在, 它应该被接受为等同于基于javascript的角色.

毕竟, do you want to leave your product in the hands of a specialized professional that could polish it to perfection, 或者你会满足于 足够好?