CSS developers are web professionals 谁的主要责任是向访问者的浏览器交付一个精致和有风格的产品. Practically every website uses CSS, 但在现代web开发堆栈中，CSS通常不被认为是“平等的”. Unfortunately, 这种误解会导致CSS被认为是理所当然的, or even overlooked to some extent.

允许非CSS开发人员处理CSS通常会导致在代码中引入CSS hack和bug, 并且会给开发人员带来不必要的挫折. In this article, 我想让大家熟悉什么工作包括，所以你可以得到一个更好的理解为什么每个网站需要一个可靠的, professional CSS developer.

What Do CSS Developers Do?

Let’s start with the basics. 为什么CSS如此重要，CSS开发人员究竟应该做些什么?

CSS is a specific language, and as such, it cannot exist on its own. It requires HTML to make sense. 因此，CSS开发人员要做的第一件事就是编写HTML代码.

Writing Tidy HTML Always Matters

Writing straightforward, clean, 适当组织的HTML是一项重大责任，因为不起眼的HTML文档是您交付给最终用户的第一件事.

If you are writing a production-ready HTML document, 你应该确保在文档的头部包含所有必需的和可选的标签，以充分利用你的网站. I am talking about setting the correct doctype, language, meta tags, favicons, loading techniques, and SEO.

一切可以帮助你提高网站性能的东西, more accessible, 并提供更多的曝光给你的观众和搜索引擎, as well as other services and tools. HTML文档的主体也不应该过于臃肿. Knowing when to use semantic HTML tags, how to add required HTML attributes, and how to avoid deep nesting or divitis，不应该被忽视，而应该从项目的一开始就实施. 没有专业的开发人员会在项目中途开始遵循最佳实践, 然而，即使是像HTML这样看似基本的东西也经常出错.

总体设计通常决定了我们如何组织各种HTML组件. CSS developers work closely with designers, 并不是每个设计师都使用相同的工具来提供设计. Being familiar with Sketch, Photoshop, InVision, or Figma, and being able to “slice” the design, are must-have skills for CSS developers. 应该始终牢记如何构建组件以使其能够同时应用设计. Using a good naming convention, like BEM or OOCSS，应该防止编写臃肿的HTML或不可维护的CSS代码.

JavaScript is Everywhere

有些组件应该是交互式的，比如模态或工具提示. 这通常需要很好地掌握JavaScript，不是“深度”JavaScript，而是 JavaScript events and DOM handling. DOM处理可能是具有挑战性的，因为您不想耗尽用户的资源，使您的网站运行缓慢或运行缓慢, even worse, crash it and make it completely unresponsive.

The JavaScript world is evolving fast, 有时似乎每天都有新的框架和工具出现. Due to JavaScript’s immense popularity, 如果您希望使用最新的最佳实践并向最终用户交付最愉快的体验，那么保持在循环中是至关重要的.

CSS

That is also true of CSS, 尽管许多人认为它的发展速度与JavaScript相差甚远. 然而，新的特性，如CSS变量，CSS网格，甚至 Flexbox require some time to master.

然后，浏览器的支持，这仍然是一个问题，即使在今天. 您的站点在现代浏览器中可能看起来像一百万美元，但在传统浏览器中就没有那么多了. IE11可能支持Flexbox，但它可能不会像预期的那样工作. 知道如何避免这些问题是CSS开发人员工作的一部分.

值得庆幸的是，社区非常有帮助，网站喜欢 Flexbugs or Gridbugs can save a lot of time.

CSS Tools, Techniques and Principles

有时我们可以依赖任务运行器之类的工具或Grunt之类的捆绑器, Gulp, and webpack to help us deliver reliable code. You could supercharge your code with linters, minifiers, babel, or PostCSS to transpile the code.

Then we need to take into account various fonts, typography, images, icons, icon fonts, animations, transitions, 以及其他抽象方面，这些都是CSS开发人员日常任务的一部分. 每个功能都有其特殊性、局限性、问题和解决方案. The more features and techniques you master, 在项目中设计和实现组件就越容易.

有大量的CSS属性和值，一个人不可能知道所有的东西. Fortunately, our tools help us there, especially code editors and dev tools. 然而，当您需要解决一个问题时，即使是工具也不能帮助解决头痛 z-index problem. Failing is the best way to learn.

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

If you have never tried to solve the z-index problem, then you would never learn about stacking context. 如果您从未尝试过重写Bootstrap类, then you would never learn about specificity. 如果您从未尝试解决浮动问题，那么您将永远不会了解盒模型.

有时候，解决方案很简单，但仅仅提出一个问题是很难的. 当与其他语言比较时，你不能问为什么我的循环不起作用. 您需要完整的上下文来解决CSS中的问题, and this is often something many don’t understand: the cascade.

层叠是CSS中最好的特性，它应该为你工作，而不是反对你. 一些开发人员通过发明自定义方法来解决这个问题，例如 CSS-in-JS. 如果你把CSS打包在像React这样的封装环境中，你就不能在其他地方使用它. 我怀疑这是否是您希望在可扩展平台中使用的方法. 如果你在层叠中遇到问题，学会接受它，然后学会如何驯服它.

While I was preparing this article, Max Böck wrote about the CSS mindset，这正是CSS开发人员需要做的. CSS developers think inside the box, predict content modifications, 尽可能避免固定的数字，同时尽可能少地编写代码，而不重写默认值和上下文.

Why Do You Need a CSS Developer?

Most frontend 甚至全栈开发人员都可以编写CSS代码. 但并不是每个人都可以修复每个CSS错误或实现设计，而不需要复杂的HTML代码或依赖于不必要的JavaScript.

专业的CSS开发人员关心代码的最终细节, enjoys creating layouts and components, even the most complicated ones, and knows how to solve every problem or a bug.

CSS Coding Standards

在编写任何代码之前，通常有一些关于编写代码的基本规则是一个好主意. CSS开发人员应该尊重编码标准——这对项目的可维护性和可伸缩性至关重要.

选择在整个项目中使用的命名约定. 尽早建立命名约定可以帮助开发人员生成更好、更有组织的代码. 它还可以帮助参与项目的每个人通过单独阅读HTML代码来理解组件结构以及组件和元素之间的关系.

决定如何处理CSS中的缩进、选择器类型、简写属性和单元. 例如，如果编码标准建议使用rem单位，则避免使用像素单位. Everyone has a distinct writing/coding style, but as a professional, you have to be able to adopt, and more importantly, understand every concept.

CSS Design Implementation

Before converting the design to code, you should take the time to understand every page, layout, and component. 如果可能的话，剖析每个页面，创建一个页面和组件列表，并尝试找到一个模式.

如果您注意到某个组件出现在多个页面上, 您应该认识到它周围的环境，并尝试将其视为一个独立的组件. If there are similar components, like cards or lists, you could have a variation of the same component. 通过这种方式，您可以重用HTML代码，只编写少量CSS代码，使其看起来经过修改.

尝试在其他领域寻找模式也是一个好主意，比如排版和间距. 有时，这会导致helper类可以在整个项目而不是单个页面中使用.

Organize Your CSS Code

CSS开发人员应该组织他们的代码，并为每个人创建一个有意义的结构. When using tools like CSS processors, CSS开发人员应该记录生成编译代码的过程.

If required, CSS developers can create style guides. 在创建新页面或决定如何处理现有页面时，样式指南可以作为参考. 我的建议是让整个团队都可以使用样式指南，因为当有一个可视化的环境时，通常更容易做出决定. 样式指南可以包含调色板、排版规则、编码标准，甚至静态页面. 没有限制，除了预算和你的想象力.

CSS Code in Production

编写CSS代码意味着处理跨浏览器问题, bugs, animations, transitions, responsivity, and print styles. 对于全能的开发人员来说，这些特性中的许多都不容易管理. 我想说的是，这些是最不受欢迎的CSS任务, and not every developer knows how to handle them. On the other hand, 专业的CSS开发人员知道(或者至少应该知道)如何生成包含每个bug的代码, browser, and environment in mind.

Using modern approaches is one way to go, 但支持旧的浏览器和尊重用户的设置，如减少运动不应该被忽视, either.

CSS developers write HTML and JavaScript code, too. 这意味着资产交付是CSS开发人员的责任. CSS开发人员应该负责加载字体, extracting Critical CSS, using deferred and async JavaScript loading, and providing responsive images.

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

What CSS Developers Can Do For You

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

• 确保每个项目成员都遵守编码标准
• Implement design
• Organize the code
• Write the code
• Fix bugs
• Learn about new techniques
• Improve the code

Wrapping Up

For far too long, CSS开发人员角色的存在和重要性的问题并没有鼓励特别有建设性和善意的讨论. 让我们试着一劳永逸地承认CSS开发人员是一个合适的角色.

In his article, The Great Divide, Chris Coyier quotes some of the tech leaders, and most of them agree there should be a divide, there should be a CSS-based role 不需要掌握现代JavaScript框架的知识. It could help if you know more than “just CSS,” but the role should exist, 它应该被接受为等同于基于javascript的角色.

After all, 你想把你的产品交给专业人士，让他们把它打磨得完美吗, or would you settle for good enough?