本文概述
CSS开发人员是网络专业人员, 其主要职责是向访问者的浏览器提供精美的样式产品。实际上, 每个网站都使用CSS, 但是在现代Web开发堆栈中, CSS通常不被视为”同等的”。不幸的是, 这种误解可能导致CSS被视为理所当然, 甚至在某种程度上被忽视。
允许非CSS开发人员处理CSS通常会导致代码中引入CSS hack和bug, 并可能给开发人员带来不必要的挫败感。在本文中, 我想让大家熟悉这份工作的内容, 以便你更好地了解每个站点为何需要可靠, 专业的CSS开发人员。
CSS开发人员做什么？
让我们从基础开始。 CSS为什么如此重要, CSS开发人员应该做什么？
CSS是一种特定的语言, 因此, 它不能单独存在。它需要HTML才有意义。因此, CSS开发人员要做的第一件事就是编写HTML代码。
编写整洁的HTML总是很重要
编写简单, 干净且组织合理的HTML是一项重大责任, 因为不起眼的HTML文档是你交付给最终用户的第一件事。
如果要编写可用于生产环境的HTML文档, 则应尝试确保在文档的开头包含所有必需和可选标记, 以充分利用你的网站。我说的是设置正确的文档类型, 语言, 元标记, 网站图标, 加载技术和SEO。
所有可以帮助你的网站提高性能, 访问性并为你的受众和搜索引擎以及其他服务和工具带来更多影响的内容。 HTML文档的正文也不应该过大。知道何时使用语义HTML标记, 如何添加必需的HTML属性以及如何避免深层嵌套或二元性, 应该从项目的一开始就予以忽略。没有专业的开发人员会在项目进行到一半时就开始遵循最佳实践, 但是即使看起来像HTML之类的基本事物也常常会出错。
总体设计通常决定我们如何组织各种HTML组件。 CSS开发人员与设计师紧密合作, 并非每个设计师都使用相同的工具来提供设计。熟悉Sketch, Photoshop, InVision或Figma并能够”切片”设计是CSS开发人员的必备技能。人们应该始终牢记如何构造组件, 以使其能够同时应用设计。使用良好的命名约定, 例如BEM或OOCSS, 应避免编写writing肿的HTML或无法维护的CSS代码。
JavaScript无处不在
有些组件应该是交互式的, 例如模态或工具提示。这通常需要对JavaScript有所了解, 而不是”深度” JavaScript, 而是JavaScript事件和DOM处理。 DOM处理可能具有挑战性, 因为你不希望耗尽用户的资源并使网站呆滞, 甚至更糟的是, 使网站崩溃并使之完全无响应。
JavaScript世界正在快速发展, 有时似乎每天都有新的框架和工具出现。由于JavaScript的广泛流行, 如果你想使用最新的最佳实践并为最终用户提供最愉快的体验, 那么保持循环至关重要。
的CSS
CSS也是如此, 尽管许多人认为CSS的发展速度与JavaScript几乎没有相同。但是, 诸如CSS变量, CSS网格甚至Flexbox之类的新功能都需要一些时间来掌握。
然后, 有浏览器支持, 即使在今天, 它仍然会带来问题。在现代浏览器中, 你的网站可能看起来像一百万美元, 而在旧版浏览器中, 你的网站看起来就不那么多了。 IE11中可能支持Flexbox, 但同样, 它可能无法按预期工作。知道如何避免这些问题是CSS开发人员的工作之一。
值得庆幸的是, 社区非常有帮助, Flexbugs或Gridbugs之类的网站可以节省大量时间。
CSS工具, 技术和原理
有时我们可以依靠诸如任务运行器之类的工具或诸如Grunt, Gulp和webpack之类的捆绑器来帮助我们交付可靠的代码。你可以用短绒棉纸, 碎纸机, babel或PostCSS来增强代码的透明度。
然后, 我们需要考虑各种字体, 版式, 图像, 图标, 图标字体, 动画, 过渡和其他抽象方面, 这些都是CSS开发人员日常工作的一部分。每个功能都有其特殊性, 局限性, 问题和解决方案。你掌握的功能和技术越多, 就越容易在项目中设置样式和实现组件。
有很多CSS属性和值, 而且一无所知。幸运的是, 我们的工具可以帮助我们, 尤其是代码编辑器和开发工具。但是, 当你需要解决z-index问题时, 即使工具也无法帮助解决头痛问题。失败是最好的学习方法。
我会说在使用CSS时尤其如此, 这就是为什么：
如果你从未尝试解决z-index问题, 那么你将永远不会了解堆栈上下文。如果你从未尝试覆盖Bootstrap类, 那么你将永远不会了解特异性。如果你从未尝试解决浮动问题, 那么你将永远不会了解盒子模型。
有时候, 解决方案很简单, 但是问一个问题却很困难。与其他语言相比, 你不能问为什么我的循环不起作用。你需要完整的上下文来解决CSS中的问题, 而这通常是许多人不了解的：级联。
级联是CSS中最好的功能, 它应该对你有用, 而不是不利于你。一些开发人员通过发明诸如CSS-in-JS之类的自定义方法来解决它。如果将CSS打包在像React这样的封装环境中, 则无法在其他地方使用它。我怀疑这是你在可扩展平台中想要的方法。如果你在级联上遇到问题, 请学习拥抱它, 然后学习如何驯服它。
当我准备本文时, MaxBöck撰写了有关CSS思维方式的文章, 而这正是CSS开发人员需要做的。 CSS开发人员会在框内进行思考, 预测内容的修改, 并在可能的情况下尽量避免使用固定数字, 同时尝试编写尽可能少的代码, 而不覆盖默认值和上下文。
为什么需要CSS开发人员？
大多数前端甚至是全栈开发人员都可以编写CSS代码。但是, 并不是每个人都可以解决每个CSS错误或实现设计, 而无需卷积HTML代码或在不需要时依赖JavaScript。
专业的CSS开发人员关心代码的最终细节, 喜欢创建布局和组件, 甚至是最复杂的布局和组件, 也知道如何解决每个问题或bug。
CSS编码标准
在编写任何代码之前, 通常要有一些关于编写代码的基本规则。 CSS开发人员应遵守编码标准, 这对于项目的可维护性和可伸缩性至关重要。
选择在整个项目中使用的命名约定。尽早建立命名约定可以帮助开发人员生成更好和更有组织的代码。它还可以通过单独阅读HTML代码来帮助项目中的每个人了解组件结构以及组件与元素之间的关系。
确定如何处理缩进, 选择器类型, 速记属性, CSS中的单位。例如, 如果编码标准建议使用rem单位, 请避免使用像素单位。每个人都有独特的写作/编码风格, 但是作为专业人士, 你必须能够采用, 更重要的是, 要理解每个概念。
CSS设计实现
在将设计转换为代码之前, 你应该花时间了解每个页面, 布局和组件。如果可能, 请剖析每个页面, 创建页面和组件列表, 然后尝试查找模式。
如果发现更多页面上存在组件, 则应识别其周围的环境, 并尝试将其视为独立组件。如果存在类似的组件, 例如卡片或清单, 则可以具有相同组件的变体。这样, 你可以重用HTML代码并只编写一点CSS代码以使其看起来已修改。
尝试在其他区域找到图案, 例如印刷和间距也是一个好主意。有时, 这导致可以在整个项目而不是单个页面中使用帮助程序类。
整理你的CSS代码
CSS开发人员应该组织他们的代码, 并为每个人创建有意义的结构。当使用CSS处理器之类的工具时, CSS开发人员应记录生成编译代码的过程。
如果需要, CSS开发人员可以创建样式指南。在创建新页面或决定如何处理现有页面时, 样式指南可以作为参考。我的建议是使样式指南在全球范围内可供整个团队使用, 因为在拥有可视上下文时通常更容易做出决定。样式指南可以包含调色板, 印刷规则, 编码标准, 甚至是静态页面。除了预算和你的想象力之外, 没有其他限制。
生产中的CSS代码
编写CSS代码意味着要处理跨浏览器的问题, 错误, 动画, 过渡, 响应度和打印样式。这些功能中的许多功能都不容易被全面的开发人员管理。我走得这么远, 说这些是总体上最不喜欢的CSS任务, 并不是每个开发人员都知道如何处理它们。另一方面, 专业的CSS开发人员知道(或至少应该知道)如何在考虑每个错误, 浏览器和环境的情况下生成代码。
使用现代方法是一种方法, 但是也不应忽略支持较旧的浏览器并尊重用户设置(例如降低动作)的情况。
CSS开发人员也编写HTML和JavaScript代码。这意味着资产交付是CSS开发人员的责任。 CSS开发人员应负责加载字体, 提取Critical CSS, 使用延迟和异步JavaScript加载以及提供响应图像。
这些技术都不容易实现, 也没有灵丹妙药。
CSS开发人员可以为你做什么
以上所有内容都说明了为什么需要专门的CSS开发人员。以下是他们处理的一些关键事项：
- 确保每个项目成员都遵守编码标准
- 实施设计
- 整理代码
- 编写代码
- 修正错误
- 了解新技术
- 完善代码
本文总结
长期以来, 关于CSS开发人员角色的存在和重要性的问题一直鼓励着不进行特别建设性和善意的讨论。让我们一劳永逸地同意并承认CSS开发人员是适当的角色。
克里斯·科耶尔(Chris Coyier)在他的文章《大鸿沟》中引用了一些技术领导者, 其中大多数人都认为应该存在鸿沟, 应该有一个基于CSS的角色, 不需要了解现代JavaScript框架。如果你不仅了解” CSS”, 它可能会有所帮助, 但是该角色应该存在, 并且应该被视为等同于基于JavaScript的角色。
毕竟, 你是否希望将产品交由专业人士处理, 以使其达到完美效果, 或者你会满足于获得足够的满足？
