手动阀

CSS 约定写法（Conventional CSS）是一种编写 CSS 代码的规范，旨在提高代码的可读性、可维护性和一致性，以下是一些常见的 CSS 约定写法和最佳实践：

文件结构

reset.css: 用于重置浏览器默认样式。

base.css: 定义全局基础样式，如字体、颜色等。

layout.css: 布局相关的样式。

components.css: 组件样式。

themes.css: 主题相关样式。

命名约定

BEM (Block, Element, Modifier): 一种命名方法，用于创建可重用的组件。

Block: 独立的组件，如header、footer。

Element: 块内的元素，如header__title。

Modifier: 修改块或元素的外观，如header--large。

/* Block */
.header {
  background-color: #f8f9fa;
}
/* Element */
.header__title {
  font-size: 24px;
}
/* Modifier */
.header--large {
  font-size: 36px;
}

组织方式

按功能分组: 将相关的样式放在一起，便于查找和维护。

注释: 使用注释来解释复杂的样式或逻辑。

/* Base styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
/* Layout styles */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
/* Component styles */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-align: center;
}

格式化与缩进

缩进: 使用两个空格或四个空格进行缩进。

换行: 每条声明独占一行，以提高可读性。

空行: 使用空行分隔不同的代码块。

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

媒体查询

顺序: 从最小到最大屏幕尺寸排列媒体查询。

避免嵌套: 尽量减少媒体查询的嵌套层级。

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .container {
    padding: 0 15px;
  }
}
/* Medium devices (tablets, less than 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container {
    padding: 0 30px;
  }
}
/* Large devices (desktops, less than 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container {
    padding: 0 50px;
  }
}

变量与预处理器

Sass/Less: 使用变量和混合宏来减少重复代码。

// Sass example
$primary-color: #007bff;
$font-stack: Arial, sans-serif;
body {
  font-family: $font-stack;
  color: $primary-color;
}

响应式设计

Flexbox/Grid: 使用现代布局技术来实现响应式设计。

相对单位: 使用em、rem、百分比等相对单位。

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 1 calc(33.333% 20px); /* Three items per row */
  margin: 10px;
}

通过遵循这些约定和最佳实践，可以编写出更加清晰、可维护和高效的 CSS 代码。