具有多种视图的前端项目的最佳实践

Question

我们是一个小型前端开发团队，拥有18个月的工作经验，最近我们接触到了第一个重大项目，即。一个中等复杂的后台网络应用程序，但有很多很多的意见。

由于在这个项目中每天都会遇到一些新的问题，如果我们能得到一些关于最佳实践的指导，我们的生活就会轻松得多。

怀疑

• 如果我们有100个不同的视图，我们是为普通样式创建100个css文件(每个视图一个css )和一个基本/默认css文件，还是只创建一个为所有视图提供样式的大css文件？
• 如果我们希望将样式表作为单个文件加载，这是否只能使用预处理程序来导入和合并不同的css文件？
• 如何跟踪合并多个css文件时的唯一类？
• 如果我们在页面A中的div中加载一个B页，那么在A页或B页中我们应该在哪里保存css呢？页B仅用作A页中的模态
• 由于显然有许多图标、图像、javascript等，所以我们是根据视图来分隔内容文件夹，比如内容/view 1、内容/view 2，还是将所有内容放在一个目录中？

我们希望得到关于最佳实践的任何答案！

Answer 1

海事组织，这方面的大部分问题可以通过以下方式解决：

• CSS预处理程序，比如SASS或更少
• 某种类型的CSS标准，无论是边界元、其他东西，还是您内部想出的东西，只要确保它是一致的，并且每个人都知道它(并且参与其中)。
• 此外，如果您确实有很多资产(JS文件等)从拥有一个/assets目录(或/resources等)开始并将CSS文件放置在/assets/css JS文件中的/assets/js中，或者，您也可以使用类似于鲍尔的内容。

当然，这都取决于后台应用程序的基础是什么，以及你的同事/公司所熟悉或熟悉的东西。

Answer 2

由于这个问题似乎主要是关于一个网站/应用程序的CSS，所以我将介绍我看待这个问题的基本方法。

以下是一个经验法则，总会有例外--但不是主要的例外。

CSS用于网站的样式，而不是单独的网页。

浏览最糟糕的网站将是那些每一页的布局，大小或颜色与其他网页不同.

一个网站中的所有页面都应该有一个标准的样式。

说到，并不是所有的页面都是一样的，所以设计应该从确定您需要的布局开始：

母版页、导航、旁页、页脚等。您可能会使用几个布局，但不是每个页面都使用一个布局。这些布局中的内容将发生变化，但这不需要单独的样式表。

接下来，还有标题、标签、输入控件、div、span、表等的单独样式，它们应该是根据用户正在访问的区域跨站点区域的标准样式。管理区域的布局可能与注册区域不同，如果真的需要的话，它们的控制大小和颜色也可能不同。

样式应该针对单个控件设置为一个基础--所有div、表、文本框等都带有标准填充、边距、颜色等。然后，您可以定义类，以便在需要时应用于控件；例如，如果需要修复或更改div的显示方式，则只需在一个地方更改样式--使用该类的所有div都会相应地更改。

如果您需要一个特定的页面来以与标准样式不同的方式显示，那么将替换样式放在页面本身并没有什么错--因为它只适用于该页面，而不用于其他任何地方。只有当页面是唯一有差异的页面时，这才适用。如果它在其他地方使用，并且您需要更改它，您将不得不找到所有有相同差异的页面，并单独修改它们--这不是一项很好的任务。

如果您需要将部分加载到另一个页面中，则通常应该将其样式与页面的其余部分相同。但是，如果您需要它是不同的(但是标准化了，因为有许多类似样式的部分)，那么继续创建一个样式表供它们使用，并在分部中放置到样式表的链接。

由于CSS (级联样式表)级联，最后声明的样式将覆盖先前声明的所有其他样式。因此，如果为一个名为“重要”的类声明了一个样式，定义了粗体，而红色定义了字体，那么您可以再次声明“重要”，因为它只将蓝色定义为颜色。原来的粗体仍然适用，但颜色将被新的蓝色定义所覆盖。

因此，

的基本结构是：

• 网站所有网页的主样式表
• 覆盖特定领域的样式表
• 重写页的单个样式(样式表或页本身)

关于您的内容文件夹:样式表应该根据它们提供的样式来创建和命名，而不是用于将在其中使用的视图或页面。

• Javascript文件应该放在“脚本”中，并且应该根据包含在其中的函数来命名，而不是在其中使用视图或页面。
• 图标和其他图像应该放在“图像”文件夹中，并应根据图像的内容进行分组--而不是使用它们的位置(除非网站中的每个区域都有许多图像，否则您可以将它们重新归类为该区域的名称)。

基本上，尝试将焦点从“此样式表用于页”转移到“此页使用此样式表”，并将样式表保持在最低限度。

Answer 3

如果我们有100个不同的视图，我们是为普通样式创建100个css文件(每个视图一个css )和一个基本/默认css文件，还是只创建一个为所有视图提供样式的大css文件？

除非你期望你的观点的样式可以彼此独立地改变，而且在频繁的基础上，你应该尽量保持尽可能少的CSS。

您可能有几个用于框架的CSS (例如，如果您有一个依赖于某些样式定义的数据报警器，或者如果您决定使用引导 CSS，我建议这样做)。除此之外，你真的只需要一个CSS文件。

如果我们希望将样式表作为单个文件加载，这是否只能使用预处理程序来导入和合并不同的css文件？如何跟踪合并多个css文件时的唯一类？如果我们在页面A中的div中加载一个B页，那么在A页或B页中我们应该在哪里保存css呢？页B仅用作A页中的模态

一个给定的网页应该直接引用它所需要的所有CSS。CSS不需要相互引用。它们将在浏览器上下文中合并(级联)。

由于显然有许多图标、图像、javascript等，所以我们是根据视图来分隔内容文件夹，比如内容/view 1、内容/view 2，还是将所有内容放在一个目录中？

单文件夹。或者更好的是，使用精灵的单一图像。