大型项目的 CSS

大型项目的 CSS

大型项目的 CSS

这是我为我的 YouTube 频道的视频准备的内容。

这是链接

议程：

1. 为什么 CSS 架构很重要？

2. 有哪些选择

3. 如何决定？

4. 解释

为什么 CSS 架构很重要？

大多数开发人员只关注 JavaScript 或其相关语言。结果，他们忽略了应用程序的样式。没错，逻辑很重要，但外观和感觉也同样重要。结果，开发人员最终只能编写出混乱的 CSS 代码，既难以维护，又不可扩展。

有哪些选择？

• CSS

• 顺风

• 引导程序

• SCSS

• CSS 模块

• 样式化组件

• 情感

等等。

如何决定？

最后，所有上述选项都会在构建时生成 CSS。为了解释如何为更大的项目构建 CSS，我将跳过所有框架和库，例如 tailwind、bootstrap 等，否则我会冒犯到某些人 :)。

为了理解架构，我将使用 SCSS（因为开发人员可以在 HTML/JS、Angular、React、Vue 等任何地方使用 SCSS。）

那么，该如何决定该走哪条路呢？寻找：

1）可维护性

2）可扩展性

3）可重用性

4）易于学习和设置（基本上是 DX）

在编写一行代码（或清单）之前的准备工作：

[ ] 要遵循哪些命名约定？

[ ] 浏览器及其版本、操作系统、移动设备和平板电脑及其支持的操作系统列表

[ ] 断点列表

[ ] 应遵循哪些字体单位：rem、em、px？

[ ] 遵循的颜色代码格式

[ ] 是否要使用任何第三方样式：base.css，或任何其他模块？

[ ] 使用什么——flex、grids、float？

[ ] 类名应该有多长？

[ ] SCSS 嵌套应该有多深？

[ ] 什么是调色板

[ ] 什么是字体比例

[ ] 什么是空间尺度

[ ] 识别常见的模式/组件/模块。例如：有两种类型的按钮

[ ] 识别可重用的模式/组件/模块

[ ] 识别页面

每个决策都应该记录在案，并将其纳入团队入职流程。这将有助于新开发人员轻松上手并理解代码规范。

这也将使您清楚地了解项目的用户体验，并为项目带来一致性。

例如：如果在一个页面上标题的字体大小是，24px但在另一个页面上同一级标题的字体大小是，14px那么这是不一致的。

将此问题报告给 UX 团队以纠正。

通过一致性，开发人员可以轻松实现可重用性。

怎么做？让我们再次回到标题示例。

由于应用程序中同级标题的字体大小和样式保持一致，开发​​人员只需编写一次代码即可重复使用。此外，将来，如果任何开发人员添加同级标题，则无需添加任何样式代码，因为样式已经编写好了。

CSS 的结构

务必将样式文件保存到专用文件夹 - style/css。不要直接放在根目录。我发现这是 ReactJS 开发者中一个非常常见的错误。原因是 CRA 会这样做 😊

接下来，要了解如何组织你的代码风格。重要的是，不要把整个项目的代码写在一个文件中。我们应该根据需求，将其组织成多个文件。

为什么要这么做？将项目代码分成多个有意义的独立文件夹和文件将有助于您遵循 SOLID 编程原则。

现在，我们将讨论细节：

1）基础

2）变量

3）混合

4）断点

5）布局

3）通用组件/模块

4）页面

5）主题

6）供应商

使用哪个框架？

嗯，这很大程度上取决于项目（我知道你会被这个答案烦到，但这是事实）。但在选择框架/库时需要考虑以下几点：

1）CSS知识

你的团队或你自己是否精通 CSS？如果是，那么你有很多选择。但如果你不懂 CSS，那么你可以选择任何 CSS 库。它们会非常有帮助。

PS：还有许多后端开发人员负责制作 UI，对他们来说使用 CSS 库非常有用。

2）项目时间表

如果时间太紧，并且您不确定编写的 CSS 表单结果会如何，那么无论如何都要使用 CSS 库。

（如果您有信心可以在紧迫的时间内从头开始编写项目的 CSS，那么就继续吧。）

但请务必考虑时间表。

3）项目的复杂性

如果项目很复杂，您需要评估从头开始编写样式还是使用 CSS 库。

一些开发人员更喜欢自己编写 CSS 以获得完全控制权，而不是使用库/框架。而另一些开发人员则倾向于将复杂性转移给库/框架。

这是在编写代码之前需要考虑的一点，因为在项目开发生命周期的后期更改这一点会给您的团队和项目带来巨大的成本。

4）可扩展性

您要选择的解决方案是否可扩展，以及在其上启动项目或扩展到其他技术堆栈的难易程度如何？

开发人员能多快添加新功能？

例如：如果您使用 CSS 库/框架，它多久会采用 CSS 的新版本属性？

这些是在选择解决方案时需要询问和考虑的问题。

5）可维护性

接下来，需要考虑可维护性。开发人员修复一个错误或添加新代码行需要花费多少时间？例如，添加一个主题，开发人员需要修改多少文件？

此外，如果您要使用 lib/framework，请考虑创建者未来的升级。

6）兼容性

什么是浏览器、操作系统、设备、库和框架的支持。

呼！！我希望现在你知道为你的项目选择一种样式解决方案并不像你想象的那么容易。

你可以在Twitter上关注我

学习愉快！！