1. David Wu首页
  2. web前端
  3. HTML

创建CSS样式指南时需要考虑的5件事

CSS样式指南是关于如何使用和编写CSS代码的一组标准和规则。它通常包含全局品牌定义,如颜色和排版,以及一组可重用的组件,用于构建更一致和可维护的项目。 CSS样式指南应被视为每个项目要求的平等公民。 风格指南的定义不止一个。例如,维基百科说: “风格指南(或风格手册)是一套用于文档编写和设计的标准,用于一般 WP网站建设

CSS样式指南是关于如何使用和编写CSS代码的一组标准和规则。它通常包含全局品牌定义,如颜色和排版,以及一组可重用的组件,用于构建更一致和可维护的项目。

CSS样式指南应被视为每个项目要求的平等公民。

风格指南的定义不止一个。例如,维基百科说:

“风格指南(或风格手册)是一套用于文档编写和设计的标准,用于一般用途或特定出版物,组织或领域。(……)

风格指南建立并执行风格以改善沟通。为此,它确保文档和多个文档的一致性,并在使用和语言构成,视觉合成,拼写和排版方面实施最佳实践。“

CSS指南网站/ Harry Roberts说:

“(CSS样式指南应该包含)用于编写理智,可管理,可扩展的CSS的高级建议和指南。”

Google HTML / CSS样式指南说:

“本文档定义了HTML和CSS的格式和样式规则。它旨在改善协作,代码质量和支持基础架构。“

所有这些定义都告诉我们样式指南的主要任务:帮助彼此了解如何阅读,编写和使用代码。至关重要的是要知道每个风格指南都是独一无二的,其定义,原则和结构应该是团队的努力,而不是一种有说服力的方式来遵循某人的逻辑或想法。

在使用CSS样式指南时,您应该记住以下五件事。

定义编码格式

每个样式指南都有一套规则,可以帮助项目中的每个人以相同的方式编写代码。通过遵循这些规则,开发人员可以避免日常任务中的典型问题,例如合并冲突和linting错误。您的团队可以在项目早期就空格或制表符缩进首选项达成一致。其他常见规则是选项卡宽度,在文档末尾添加新行以及使用引号。

例如,WordPress样式指南定义了编写CSS声明的结构:

例如,WordPress样式指南定义了编写CSS声明的结构:

创建CSS样式指南时需要考虑的5件事

WordPress风格指南

有喜欢的工具更漂亮或editorconfig,可以帮助你的团队产生格式良好的代码。确保在项目中包含配置文件。此外,您可能希望在README文件中添加有关如何在不同代码编辑器中设置代码格式的注释。

同意命名约定

CSS有许多不同的命名约定。最受欢迎的是BEM,SMACSS和OOCSS,仅举几例。如果您的团队决定适应命名约定,那么每个开发人员都应该了解组件的结构。代码感觉它是由一个人编写的,这将提高可读性。另外,从JS命名约定中隔离CSS命名约定总是一个好主意。

例如,Lonely Planet使用BEM作为命名约定:

创建CSS样式指南时需要考虑的5件事

孤独星球风格指南,BEM示例

“命名事情很难,但值得做对。为了使它更简单,我们在类名中使用BEM方法。BEM还帮助我们避免交叉模块冲突,并从类名中表示意图和关系。“

– 孤独星球,命名

并非每个开发人员都会同意命名约定,但只要每个开发人员都遵循它,那就重要了。这就是为什么样式指南不应该由单个开发人员负责的原因之一,而是与每个开发人员共同努力的原因。在README文件中添加关于命名约定决定的注释并不会有什么坏处。

我更喜欢在几乎每个项目上使用BEM。我也熟悉其他命名约定。值得熟悉所有命名约定,因为如果您处理多个项目或多个团队,这可能会有所帮助。

定义编码规则

编码规则应包括有关定义全局样式,变量,混合函数,函数等的决策。这些编码规则可以是任何事物,从排版到单位使用。

例如,Lonely Planet定义了排版用法。该团队决定通过不在全局范围内建立排版,而是通过将特定类应用于包装元素来避免跨项目的样式冲突。我只能猜测,但我认为团队在注意到问题后做出了这个决定,然后讨论了它,最后得到了一个协议。我可能不同意这个问题,但如果我是团队的一员,我会理解他们来自哪里。

创建CSS样式指南时需要考虑的5件事

孤独的星球风格指南,排版部分

一旦团队对每条规则达成一致,你就应该坚持下去。不需要进一步讨论这个问题。这可以为你的团队节省很多时间。它还应该防止团队成员之间可能出现的分歧和争论。

例如,Primer定义了四个主要断点。通过识别这些断点,创意团队可以在这些限制内设计页面和组件,开发团队可以更轻松地设置这些页面和元素的样式,而无需进一步猜测或讨论断点。

创建CSS样式指南时需要考虑的5件事

入门样式指南,断点部分

我更喜欢将颜色,排版和断点定义为全局变量。这有助于我建立一个更加一致,可识别和可发现的品牌。

定义可重用组件(如果它们是样式指南的一部分)

一些样式指南包括可重用组件,有些则不包括。只要有助于团队构建更好,可维护的产品,您在样式指南中保留的内容并不重要。

当组件是样式指南的一部分时,您应该考虑以下一些问题:

  • 如果将组件放在站点/应用程序的不同部分,组件的行为如何?
  • 如果将组件放在另一个元素中,组件的行为如何?
  • 你能将组件拆分成更小的可重复使用的物品吗?

样式指南组件应始终是产品的隔离颗粒。通过解决此标准,您可以更有效地维护,更新甚至替换组件。

例如,Primer定义了一个popover组件。弹出气泡的内容可能是另一个组件,如按钮。如果主按钮发生更改,则会在每个组件(包括弹出窗口)上进行更新。

创建CSS样式指南时需要考虑的5件事

Primer Style Guide,Popover部分

一个好的做法是为组件添加变体。您也应该隔离变体。如果需要具有不同文本大小和对齐的元素,请考虑为此特定组件使用两个单独的变体类。

当相同的变体出现在多个组件上时,您可以考虑添加实用程序类。实用程序类通常可以解决对齐,填充和边距等问题。

例如,Primer定义了用于填充的实用程序类。弹出框组件使用实用程序类来实现与其他组件的一致间距。

我不喜欢将实用程序类添加到项目中,但是如果你可以证明添加它们的决定是合理的,那就去吧。

考虑使用工具进行样式指南

某些工具(如KSS或mdcss或Stylemark或Nucleus)可以帮助您直接从代码生成样式指南。所有这些工具都遵循相同的原则,即一种文档语法,它将解析代码中的注释并将其编译为静态页面。

一些工具,如Stylemark和mdcss,支持Markdown语法,如果您熟悉它,这可能很有用。

创建CSS样式指南时需要考虑的5件事

Stylemark样式指南示例

作为一个全局规则,除了提供示例之外,建议编写组件的用途,如何使用它以及可以应用哪些修饰符。

创建CSS样式指南时需要考虑的5件事

Stylemark样式指南,Bootstrap示例

如果您不想自动生成样式指南,可以手动创建。任何方法都可以,只要不花太多时间。

我更喜欢使用KSS和Stylemark,因为我可以在几分钟内设置和配置新的样式指南。到目前为止,我没有偶然发现任何问题。我发现这些工具具有创建健壮且易于使用的文档的所有要求。

结论

每个样式指南都具有或应该具有相同的目标 – 以提高一致性和可用性。通过标准化您的代码,并应用统一的设计原则,您可以创建一个独特的烹饪书,其中包含“注意事项”,可以帮助您的团队更有效,更一致地构建产品。

插件:LogRocket,一个用于网络应用的DVR

创建CSS样式指南时需要考虑的5件事

https://logrocket.com/signup/

LogRocket是一个前端日志记录工具,可让您像在自己的浏览器中一样重放问题。LogRocket不是猜测错误发生的原因,也不是要求用户提供屏幕截图和日志转储,而是让您重播会话以快速了解出现了什么问题。它适用于任何应用程序,无论框架如何,并且具有从Redux,Vuex和@ngrx / store记录其他上下文的插件。

除了记录Redux操作和状态之外,LogRocket还记录控制台日志,JavaScript错误,堆栈跟踪,带有标题+正文的网络请求/响应,浏览器元数据和自定义日志。它还使用DOM来记录页面上的HTML和CSS,重新创建即使是最复杂的单页应用程序的像素完美视频。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/11865

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注