作为前端开发人员，我们必须考虑以下 10 个可能让项目和客户蒙受损失的错误。

1. 未优化图像

如果您使用高分辨率图像而未针对网络进行优化，则会导致页面加载缓慢。相反，请压缩图像并使用适当的格式，例如照片使用 JPEG 格式，图形使用 PNG 格式。TinyPNG 和 ImageOptim 等工具可以帮助减小文件大小而不会牺牲质量。

2. 忽略移动媒体查询

许多开发人员没有考虑网站在不同设备上的外观，这会损害移动设备上的用户体验。响应式设计至关重要。使用媒体查询根据屏幕尺寸调整布局和样式。

例如：

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
}

3. 使用内联样式

直接在 html 中（内联）编写样式似乎很快，但它会使代码变得混乱且难以维护。最好将 css 保存在单独的文件中，以便可以重复使用样式。

例如，不要这样：

<div style="color: red;">Hello</div>

在你的 CSS 文件中使用它：

.red-text {  color: red;}

<div class="red-text">Hello</div>

4. 标题标签使用不当

标题（如 <h1>、<h2>）应正确使用，以确保良好的结构和 seo。误用它们会让搜索引擎和用户感到困惑。例如，使用 <h1> 作为主标题，后续标题应符合逻辑：

<h1>Main Title</h1>
<h2>Subsection</h2>

5. 使用样式类来挂接 JavaScript 钩子

对样式和 JavaScript 函数使用同一个类是一种不好的做法。如果更改样式类，可能会破坏 JavaScript 功能。相反，请使用数据属性来挂接 JavaScript：

<button >"modal">Click Me</button>

在 JavaScript 中：

document.querySelector('[]').addEventListener('click', function() {
  // Your logic here
});

6. 留下多余的样式

随着时间的推移，当您修改网站时，未使用或重复的 CSS 可能会累积起来。这种“CSS 膨胀”会减慢加载时间。请始终清理 CSS 并删除未使用的样式。PurifyCSS 或 UnCSS 等工具可以提供帮助。

7. 嵌入字体不当

如果处理不当，字体会影响加载性能。不要导入太多字体样式或粗细；只加载您需要的字体。例如：

@font-face {
  font-family: 'Roboto';
  src: url('roboto-regular.woff2') format('woff2');
  font-weight: 400;
}

8. 未抽象元素以实现可重用性

不要为网站的每个部分硬编码元素或样式，而是创建可重用的组件和类。例如，如果您经常使用按钮，请创建一个基本按钮类：

.btn {
  padding: 10px 20px;
  border-radius: 5px;
}

然后，在需要按钮的任何地方应用此类，而不必每次都编写新样式。

9. 未充分利用 Flexbox 或 CSS Grid

许多开发人员仍然依赖过时的布局技术（如浮动或手动边距）进行布局，而不是使用 Flexbox 或 CSS Grid 等现代工具。这些工具使响应式设计和布局变得容易得多：

.container {
  display: flex;
  justify-content: space-between;
}

10. 在 HTML 中使用大写字母，而不是 CSS

不要在 HTML 中直接使用大写字母（因为以后无法轻易修改），而是使用 CSS 控制文本转换：

.uppercase-text {
  text-transform: uppercase;
}

这使得您的内容能够灵活地适应未来的变化。

通过避免这些常见错误，您可以确保您的网站更高效、更易于维护并提供更好的用户体验。

来源：web前端开发

链接: https://fly63.com/article/detial/12716