CSS 开发人员做什么以及为什么需要一个

CSS 开发人员是网络专业人士，他们的主要职责是为访问者的浏览器提供精美且风格化的产品。 几乎每个网站都使用 CSS，但在现代 Web 开发堆栈中，CSS 通常不被认为是“平等的”。 不幸的是，这种误解可能导致 CSS 被视为理所当然，甚至在某种程度上被忽视。

允许非 CSS 开发人员处理 CSS 通常会导致在您的代码中引入 CSS hack 和错误，并可能给开发人员带来不必要的挫败感。 在本文中，我想让每个人都熟悉这份工作所包含的内容，以便您更好地理解为什么每个网站都需要可靠、专业的 CSS 开发人员。

CSS 开发人员做什么？

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

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

编写整洁的 HTML 总是很重要

编写简单、干净且组织良好的 HTML 是一项重大责任，因为不起眼的 HTML 文档是您交付给最终用户的第一件事。

如果您正在编写可用于生产的 HTML 文档，则应尝试确保在文档头部包含所有必需和可选的标签，以充分利用您的网站。 我说的是设置正确的文档类型、语言、元标记、网站图标、加载技术和 SEO。

一切可以帮助您的网站提高性能、更易于访问，并为您的受众和搜索引擎以及其他服务和工具提供更多曝光。 HTML 文档的正文也不应该臃肿。 了解何时使用语义 HTML 标记、如何添加所需的 HTML 属性以及如何避免深度嵌套或 divitis，不应被忽视，而应从项目一开始就实施。 没有专业的开发人员在项目进行到一半时就开始遵循最佳实践，但即使是看似基本的东西，例如 HTML，也经常做错。

整体设计往往决定了我们如何组织各种 HTML 组件。 CSS 开发人员与设计师密切合作，并不是每个设计师都使用相同的工具来提供设计。 熟悉 Sketch、Photoshop、InVision 或 Figma，并能够“切片”设计，是 CSS 开发人员必备的技能。 人们应该始终牢记如何构建组件以使其能够同时应用设计。 使用良好的命名约定，如 BEM 或 OOCSS，应该可以防止编写臃肿的 HTML 或无法维护的 CSS 代码。

JavaScript 无处不在

一些组件应该是交互式的，例如模式或工具提示。 这通常需要很好地掌握 JavaScript，而不是“深度”JavaScript，而是 JavaScript 事件和 DOM 处理。 DOM 处理可能具有挑战性，因为您不想耗尽用户的资源并使您的网站变得迟缓，或者更糟糕的是，使其崩溃并使其完全无响应。

JavaScript 世界正在快速发展，有时似乎每天都会出现新的框架和工具。 由于 JavaScript 非常受欢迎，如果您想使用最新的最佳实践并为最终用户提供最愉快的体验，那么保持循环至关重要。

CSS

CSS 也是如此，尽管许多人认为它的发展速度与 JavaScript 几乎不一样。 然而，诸如 CSS 变量、CSS 网格甚至 Flexbox 之类的新特性需要一些时间来掌握。

然后是浏览器支持，即使在今天仍然会造成问题。 您的网站在现代浏览器中可能看起来像一百万美元，但在旧版浏览器中则不然。 IE11 可能支持 Flexbox，但话又说回来，它可能无法按预期工作。 知道如何避免这些问题是 CSS 开发人员工作的一部分。

值得庆幸的是，社区非常有帮助，像 Flexbugs 或 Gridbugs 这样的网站可以节省大量时间。

CSS 工具、技术和原则

有时我们可以依靠任务运行程序或 Grunt、Gulp 和 webpack 等打包工具来帮助我们交付可靠的代码。 您可以使用 linter、minifiers、babel 或 PostCSS 来增强您的代码以转译代码。

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

有大量的 CSS 属性和值，一个人不可能知道一切。 幸运的是，我们的工具可以帮助我们，尤其是代码编辑器和开发工具。 但是，当您需要解决 z-index 问题时，即使是工具也无法帮助您解决问题。 失败是最好的学习方式。

我会说在使用 CSS 时尤其如此，这就是为什么：

如果您从未尝试过解决 z-index 问题，那么您将永远不会了解堆叠上下文。 如果您从未尝试过覆盖 Bootstrap 类，那么您将永远不会了解特异性。 如果您从未尝试过解决浮动问题，您将永远不会了解盒子模型。

有时，解决方案很简单，但问一个问题却很难。 与其他语言相比，您不能问为什么我的循环不起作用。 你需要完整的上下文来解决 CSS 中的问题，这通常是很多人不理解的：级联。

Cascade 是 CSS 中最好的特性，它应该对你有用，而不是对你不利。 一些开发人员通过发明 CSS-in-JS 之类的自定义方法来绕过它。 如果你将 CSS 打包在像 React 这样的封装环境中，你就不能在其他地方使用它。 我怀疑这是您在可扩展平台中想要的方法。 如果您对级联有问题，请学会接受它，然后学习如何驯服它。

在我准备这篇文章时，Max Bock 写了一篇关于 CSS 思维方式的文章，而这正是 CSS 开发人员需要做的。 CSS 开发人员在框内思考，预测内容修改，并尽可能避免使用固定数字，同时尝试编写尽可能少的代码而不覆盖默认值和上下文。

为什么需要 CSS 开发人员？

大多数前端甚至全栈开发人员都可以编写 CSS 代码。 但并不是每个人都可以修复每个 CSS 错误或实现设计，而无需复杂的 HTML 代码或在不必要的地方依赖 JavaScript。

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

CSS 编码标准

在编写任何代码之前，最好有一些关于编写代码的基本规则。 CSS 开发人员应该尊重编码标准——这对于项目的可维护性和可扩展性至关重要。

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

决定如何在 CSS 中处理缩进、选择器类型、速记属性、单位。 例如，如果编码标准建议使用 rem 单位，请避免使用像素单位。 每个人都有不同的写作/编码风格，但作为专业人士，你必须能够采用，更重要的是，理解每一个概念。

CSS 设计实现

在将设计转换为代码之前，您应该花时间了解每个页面、布局和组件。 如果可能的话，剖析每个页面，创建一个页面和组件列表，并尝试找到一个模式。

如果您注意到一个组件出现在更多页面上，您应该识别它周围的环境并尝试将其视为一个独立的组件。 如果有类似的组件，例如卡片或列表，您可以拥有相同组件的变体。 通过这种方式，您可以重用 HTML 代码并只编写一点 CSS 代码使其看起来经过修改。

尝试在其他领域寻找模式也是一个好主意，比如排版和间距。 有时这会导致拥有可用于整个项目而不是单个页面的辅助类。

组织你的 CSS 代码

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

如果需要，CSS 开发人员可以创建样式指南。 在创建新页面或决定如何处理现有页面时，样式指南可以作为参考。 我的建议是让整个团队在全球范围内都可以使用样式指南，因为在拥有视觉上下文时通常更容易做出决定。 样式指南可以包含调色板、排版规则、编码标准，甚至静态页面。 没有限制，除了预算和你的想象力。

生产中的 CSS 代码

编写 CSS 代码意味着处理跨浏览器问题、错误、动画、过渡、响应性和打印样式。 这些功能中的许多功能都不容易被全能开发人员管理。 我会说这些是总体上最不受欢迎的 CSS 任务，并不是每个开发人员都知道如何处理它们。 另一方面，专业的 CSS 开发人员知道（或至少应该知道）如何在考虑每个错误、浏览器和环境的情况下生成代码。

使用现代方法是一种方法，但也不应该忽视支持旧浏览器和尊重用户设置（如减少运动）。

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

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

CSS 开发人员可以为您做什么

以上所有内容都解释了为什么您需要专门的 CSS 开发人员。 以下是他们处理的一些关键事项：

• 确保每个项目成员都遵守编码标准
• 实施设计
• 整理代码
• 编写代码
• 修复错误
• 了解新技术
• 改进代码

包起来

长期以来，关于 CSS 开发人员角色的存在和重要性的问题鼓励的讨论并不特别有建设性和善意。 让我们尝试一劳永逸地同意并承认 CSS 开发人员是一个合适的角色。

在他的文章The Great Divide中，Chris Coyier 引用了一些技术领导者的话，他们中的大多数人都同意应该有一个分歧，应该有一个基于 CSS 的角色，而不需要现代 JavaScript 框架的知识。 如果您知道的不仅仅是“仅 CSS”，这可能会有所帮助，但角色应该存在，并且应该被接受为等同于基于 JavaScript 的角色。

毕竟，您是想将您的产品交由可以将其打磨至完美的专业人士手中，还是满足于足够好？

进一步阅读 Toptal 工程博客：

• 如何在 CSS 中处理 SVG 动画