# 记录一个令人血压飙升的前端项目

- Link: https://www.ixiqin.com/2022/05/30/record-a-blood-pressure-surge-the-front-end-of-the-project/
- Published: 2022-05-30T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/05/30/record-a-blood-pressure-surge-the-front-end-of-the-project/#)

 * [1. 尽可能使用常规的指标](https://www.ixiqin.com/2022/05/30/record-a-blood-pressure-surge-the-front-end-of-the-project/#1_%e5%b0%bd%e5%8f%af%e8%83%bd%e4%bd%bf%e7%94%a8%e5%b8%b8%e8%a7%84%e7%9a%84%e6%8c%87%e6%a0%87)
 * [2. 文件放置符合规范](https://www.ixiqin.com/2022/05/30/record-a-blood-pressure-surge-the-front-end-of-the-project/#2_%e6%96%87%e4%bb%b6%e6%94%be%e7%bd%ae%e7%ac%a6%e5%90%88%e8%a7%84%e8%8c%83)
 * [3. 一个项目中混用多个不同的尺寸单位](https://www.ixiqin.com/2022/05/30/record-a-blood-pressure-surge-the-front-end-of-the-project/#3_%e4%b8%80%e4%b8%aa%e9%a1%b9%e7%9b%ae%e4%b8%ad%e6%b7%b7%e7%94%a8%e5%a4%9a%e4%b8%aa%e4%b8%8d%e5%90%8c%e7%9a%84%e5%b0%ba%e5%af%b8%e5%8d%95%e4%bd%8d)
    - [4. 放弃 Bootstrap 的样式类，转而改用手动撰写每一行样式](https://www.ixiqin.com/2022/05/30/record-a-blood-pressure-surge-the-front-end-of-the-project/#4_%e6%94%be%e5%bc%83_bootstrap_%e7%9a%84%e6%a0%b7%e5%bc%8f%e7%b1%bb%ef%bc%8c%e8%bd%ac%e8%80%8c%e6%94%b9%e7%94%a8%e6%89%8b%e5%8a%a8%e6%92%b0%e5%86%99%e6%af%8f%e4%b8%80%e8%a1%8c%e6%a0%b7%e5%bc%8f)
 * [总结](https://www.ixiqin.com/2022/05/30/record-a-blood-pressure-surge-the-front-end-of-the-project/#%e6%80%bb%e7%bb%93)

最近在看一个前端项目，里面出现了一些令人血压暴涨的骚操作。虽然可以用，但对我来说，
确实是让我看到血压飙升。

## 1. 尽可能使用常规的指标

项目的诉求是实现**页面的自适应化**，在不同尺寸的屏幕上尽可能保持一致的显示。

为了实现这个诉求，我给他们的建议是使用 Bootstrap 之类的框架，在不同的屏幕上尽可能
保持一致。使用 Bootstrap 之类的框架来完成。

最后研发团队选择采用了一个有用，但我看起来非常头疼的方法 —— 根据屏幕宽度计算 rem。
通过这样的方式，实现了在不同的屏幕宽度下，都可以和设计稿的尺寸一比一。

但这样带来的问题是，rem 计算出的结果也是一个非常的大的值（当然也可以非常小），但
依然不是一个常规的结果，需要你常常使用诸如 `0.03` 这样的数值来指定宽度和高度。

![](https://files.ixiqin.com/2022/05/23091448/d2b5ca33bd970f64a6301fa75ae2eb22-38.
png)

我觉得，这样的写法并不是说不行，只是这样的写法其实会降低整个项目的可维护性。

## 2. 文件放置符合规范

其次，这个项目中还出现了一个问题是 —— 文件到处乱丢。在一些项目中，大家往往会有一些
明确的文件路径的规范，比如样式文件应该放在哪里。在这个项目中，就出现了样式乱丢的
情况。

![](https://files.ixiqin.com/2022/05/23091448/d2b5ca33bd970f64a6301fa75ae2eb22-39.
png)

和 Component 放在一起

![](https://files.ixiqin.com/2022/05/23091448/d2b5ca33bd970f64a6301fa75ae2eb22-40.
png)

符合规范统一放在 scss 文件中

这样的混乱的写法则会导致在实际开发的时候，如果想要调整样式，可能会出现调试失效，
修改起来较为混乱的问题。

## 3. 一个项目中混用多个不同的尺寸单位

![](https://files.ixiqin.com/2022/05/23091448/d2b5ca33bd970f64a6301fa75ae2eb22-41.
png)

另外一个文件采用 px 作为单位

刚刚有用 rem 的单位，另外就有一个文件采用的是 px 为单位，我非常担心在不同尺寸屏幕
下出现的错位问题。

### 4. 放弃 Bootstrap 的样式类，转而改用手动撰写每一行样式

![](https://files.ixiqin.com/2022/05/23091448/d2b5ca33bd970f64a6301fa75ae2eb22-42.
png)

其实完全可以用 position-absolute d-flex 等方法来覆盖

## 总结

这个项目从我目前的视角来看，依然还有很大的改进空间。且留下了不少的坑。在我看来，
长期来看，这些代码将会留下不可维护的问题。希望他们后续慢慢修改和调整吧。唉。