CSS开发人员 web专业人员 谁的主要责任是向访问者的浏览器交付一个精致和有风格的产品. 几乎每个网站都使用CSS, 但在现代web开发堆栈中，CSS通常不被认为是“平等的”. 不幸的是, 这种误解会导致CSS被认为是理所当然的, 甚至在某种程度上被忽视了.

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

CSS开发者都做些什么?

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

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

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

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

如果您正在编写一个生产就绪的HTML文档, 你应该确保在文档的头部包含所有必需的和可选的标签，以充分利用你的网站. 我说的是设置正确的文档类型, 语言, 元标记, 网站图标, 加载技术, 和搜索引擎优化.

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

总体设计通常决定了我们如何组织各种HTML组件. CSS开发人员与设计人员密切合作, 并不是每个设计师都使用相同的工具来提供设计. 熟悉Sketch, Photoshop, InVision, 或Figma, 并且能够“切片”设计, CSS开发人员必须具备哪些技能. 应该始终牢记如何构建组件以使其能够同时应用设计. 使用良好的命名约定，比如 本 or 允许，应该防止编写臃肿的HTML或不可维护的CSS代码.

JavaScript无处不在

有些组件应该是交互式的，比如模态或工具提示. 这通常需要很好地掌握JavaScript，不是“深度”JavaScript，而是 JavaScript事件和DOM处理. DOM处理可能是具有挑战性的，因为您不想耗尽用户的资源，使您的网站运行缓慢或运行缓慢, 更糟糕的是, 让它崩溃，让它完全没有反应.

JavaScript世界正在快速发展, 有时似乎每天都有新的框架和工具出现. 由于JavaScript的巨大流行, 如果您希望使用最新的最佳实践并向最终用户交付最愉快的体验，那么保持在循环中是至关重要的.

CSS

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

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

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

CSS工具，技术和原则

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

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

有大量的CSS属性和值，一个人不可能知道所有的东西. 幸运的是, 我们的工具在这方面帮助了我们，尤其是代码编辑器和开发工具. 然而，当您需要解决一个问题时，即使是工具也不能帮助解决头痛 z - index问题. 失败是最好的学习方式.

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

如果你从来没有尝试过解决z指数问题, 那么你就永远学不到堆叠上下文. 如果您从未尝试过重写Bootstrap类, 那你就永远学不到什么是特异性. 如果您从未尝试解决浮动问题，那么您将永远不会了解盒模型.

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

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

在我准备这篇文章的时候，马克斯Böck 关于CSS思维的文章，这正是CSS开发人员需要做的. CSS开发人员在盒子里思考, 预测内容修改, 尽可能避免固定的数字，同时尽可能少地编写代码，而不重写默认值和上下文.

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

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

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

CSS编码标准

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

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

决定如何处理CSS中的缩进、选择器类型、简写属性和单元. 例如，如果编码标准建议使用rem单位，则避免使用像素单位. 每个人都有自己独特的写作/编码风格, 但是作为一名专业人士, 你必须有能力领养, 更重要的是, 理解每一个概念.

CSS设计实现

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

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

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

组织CSS代码

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

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

生产中的CSS代码

编写CSS代码意味着处理跨浏览器问题, 错误, 动画, 转换, 反应性, 还有打印样式. 对于全能的开发人员来说，这些特性中的许多都不容易管理. 我想说的是，这些是最不受欢迎的CSS任务, 并不是每个开发人员都知道如何处理它们. 另一方面, 专业的CSS开发人员知道(或者至少应该知道)如何生成包含每个bug的代码, 浏览器, 考虑到环境.

使用现代方法是一种方法, 但支持旧的浏览器和尊重用户的设置，如减少运动不应该被忽视, 要么.

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

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

CSS开发者能为你做什么

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

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

结束

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

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

毕竟, 你想把你的产品交给专业人士，让他们把它打磨得完美吗, 或者你会满足于 足够好?