少 CSS - HTML

HTML是网页开发的基础语言，而CSS是定义网页样式的语言。在初学Web开发时，将HTML和CSS结合起来变得非常吸引人。但是，在项目变得复杂之后，CSS代码的数量就会不断增加，这可能会导致许多问题，例如：

• 可维护性：如果CSS样式存在于多个文件中，则在修复样式错误时可能会有一定的困难。
• 可重用性：有时可能需要重复使用CSS代码，但是如果样式定义在数个文件中则变得复杂。
• 代码复杂性：CSS代码变得越来越复杂，难以理解和维护。

幸运的是，有一种方法可以解决这些问题并使CSS更简单易懂： 少 CSS。将CSS集中在一个文件中，并具有清晰的规则和结构，以增加代码可维护性和可重用性。

CSS的小技巧

以下是创造简单易懂且具有可维护性的CSS代码的几个技巧：

1. 内容块分类

将CSS规则组织在一起，为相应的HTML内容块添加类名，以使CSS更具可读性。例如，如果一个HTML块包含一组按钮，则应该将CSS规则列为一个名为 '.button' 的类。随着CSS的增长，这种方式可以确保代码保持整齐和可读性。

/* 定义 button 类 */
.button {
  padding: 5px 10px;
  background-color: #4CAF50;
  border-radius: 5px;
  border: none;
  color: white;
  font-size: 16px;
}

2. 选择器精简

尽可能减少使用颜色、字体、元素或类选择器。选择器越特定，覆盖的样式越具体。

/* 将重复样式摘出，抽出公共样式 */
.btn {
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
}

/* 定义主按钮的样式 */
.primary-btn {
  background-color: #4CAF50;
  color: white;
}

/* 定义删除按钮的样式 */
.delete-btn {
  background-color: #F44336;
  color: white;
}

3. 避免新定义样式

在 CSS 文件中，避免重复定义现有的样式。这不仅会增加代码量和复杂性，还可能导致样式覆盖问题。使用现有的样式进行更改，而不是创建相同的样式。

/* 不推荐 */
.btn {
  padding: 5px 10px;
  background-color: #4CAF50;
  border-radius: 5px;
  border: none;
  color: white;
  font-size: 16px; 
}

.primary-btn {
  background-color: #F44336;
}

/* 推荐 */
.btn {
  padding: 5px 10px;
  background-color: #4CAF50;
  border-radius: 5px;
  border: none;
  color: white;
  font-size: 16px;
}

/* 使用现有的 'btn' 样式 */
.primary-btn {
  background-color: #F44336;
  color: white;
}

/* 使用现有的 'btn' 样式 */
.delete-btn {
  background-color: #F44336;
  color: white;
}

4. 代码缩进

样式规则的缩进应基于父选择器和子选择器之间的关系，以使代码结构更清晰。

.btn-wrapper {
  .btn {
    margin-right: 10px;
  }

  .primary-btn {
    background-color: #4CAF50;
  }

  .delete-btn {
    background-color: #F44336;
  }
}

结论

少 CSS 可以使我们的代码更简单易懂，便于维护并具有更好的可重用性。针对大型项目，使用'少 CSS'原则可以大大减少我们的纠结，还能让我们变得更优秀！