GitHub倡导的CSS编写风格及文件目录部署指南

GitHub倡导的CSS编写风格及文件目录部署指南主要是指在编写CSS时应该遵循一些规范和约定俗成的标准，以便于代码的维护和可读性的提高。同时，对于文件目录的部署也需要有一些规则，以便于后期的管理和扩展。

CSS编写风格：

1. 缩进

在CSS中一般使用2或4个空格进行缩进，而不是使用Tab键。

1. 样式规则

样式规则中一般每行只包含一条属性值对，属性和值之间应该用一个空格隔开。每个属性值对之间一般用一个空行隔开。

例子：

.selector {
  background-color: red;
  color: white;
  font-size: 12px;
}

1. 选择器

选择器和样式规则之间一般要空一行。

例子：

.selector {
  background-color: red;
  color: white;
}

1. 命名

命名应该简单明了，使用小写字母和短横线分隔的方式，而不是驼峰命名法。

例子：

.site-header {
  background-color: black;
}

1. 预处理器

如果使用预处理器，可以使用嵌套规则进行编写。

例子：

.selector {
  background-color: red;

  &:hover {
    background-color: blue;
  }
}

文件目录部署指南：

1. 目录结构

一般应该把所有的CSS文件都放在同一个目录下，而不是分散在多个目录下。在CSS文件根目录下，一般会分成如下的几个目录：

• base：基础样式
• layout：布局相关样式，比如网格系统
• modules：模块相关样式

• utils：工具类样式，比如清除浮动

• 文件命名

文件命名应该简明易懂，和目录对应。一般可以在目录名前加上“_”来表示这是一个样式文件。

1. 嵌套

如果有多个不同的页面，可以在每个页面的HTML文件中单独引入对应的CSS文件。而在CSS的文件中，可以使用嵌套规则来避免样式的重复。

例子：

// base/_typography.scss
h1 {
  font-size: 24px;
}

// layout/_header.scss
.site-header {
  background-color: black;
}

// home.scss
@import "base/typography";
@import "layout/header";

.home-page {
  h1 {
    color: red;
  }

  .site-header {
    height: 100px;
  }
}

以上就是GitHub倡导的CSS编写风格及文件目录部署指南的完整攻略，下面有两个示例说明：

示例一：一个简单的按钮样式

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: white;
  background-color: blue;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: red;
  }
}

示例二：一个简单的布局样式

.layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .layout-item {
    flex: 1;
    margin: 10px;
  }
}