# Web 前端项目开发规范和最佳实践

综合系统性复习和研究企业级项目开发的方法论，从以下几个方面进行：

CSS 发展史与 CSS 模块划分：HTML 的诞生，CSS 的诞生，CSS 的版本，CSS 的研究方向
CSS 文件划分及功能分类
CSS 方法论及样式规范
使用 Git 对项目进行版本管理
CSS 还原 UI 设计
PC 端布局和移动端布局开发等

# 一、CSS 发展史与 CSS 模块划分

TIP

从 HTML/CSS 的诞生，CSS 的版本迭代，到 CSS 的研究方向了解本质，看清方向，明确出处，方便遇到问题随时可查阅。

# 1、HTML 的诞生

TIP

1991 年 8 月 6 日，诞生了人类有史以来的第一个网站（即：http://info.cern.ch (opens new window)），作者是万维网之父蒂姆·伯纳斯·李 (opens new window)。当然网站的形态跟现在完全不一样，因为它没有样式，简单地说，它只有文字和图像两种，并没有其他的信息元素。

早期的HTML网页

# 2、CSS 的诞生

TIP

在那个遥远的年代，人们也渴望 web 网页变得更漂亮，于是在 1994 年哈肯·维姆·莱 (opens new window)和伯特·波斯 (opens new window)共同提出了层叠样式表（Cascading Style Sheets，即 CSS）的概念。

CSS 从此成为了网页开发的标准之一，对于网页排版印刷、美感以及亲和力有着深远的影响和意义。
在这两年之后，W3C (opens new window)的 CSS 工作小组(即哈肯·维姆·莱团队)推出了 CSS1.0 规范，后来陆续发布了 CSS2.1 规范和 CSS3.0 规范草案及其他迭代版本。

W3C CSS2.1规范文档

# 3、CSS 的版本

TIP

CSS2.1 规范和 CSS3.0 规范草案指导 Web 开发者写了很多年的 CSS。直到后来，大概 2015 年左右，W3C 的 CSS 工作小组发现 CSS 发展的越来越快，有关于 CSS 方面的特性增加了不少，而且不同的特性推进速度都有所不同。

也就这个时候，W3C 的 CSS 工作小组为了能更好的维护和管理 CSS 的特性，该组织决定不在以 CSS 的版本号，比如我们熟悉的 CSS1.0、CSS2.1、CSS3.0 这样的方式来管理 CSS。而是将每个 CSS 功能特性拆分成独立的功能模块，并且以 Level 1, Level2，Level 3 等方式来管理 CSS 规范中的特性。
也就是说以后不会再出现 CSS4.0 的版本，而是具体指向某个模块的 Level 版本，例如：CSS 选择器模块已经发展到 Level 4 了。
可以通过 W3C 官网查看到 CSS 模块的各种 Level 版本，或查看https://drafts.csswg.org/ (opens new window)

CSS模块的划分

# 4、CSS 的研究方向

大体上 CSS 的学习可以朝着三个方向进行研究，分别是：

特效（可以学习动画、3D、渐变等）
工程化（可以学习 sass、less、postcss 等）
布局（可以学习 flex、grid、响应式等）

本次 30 天学习计划主要围绕 CSS 布局和特效方向展开学习，从入门、精通到实战，学以致用，完成工作中大部分的需求，后期再学习工程化。

# 二、CSS 文件划分及功能分类

TIP

深入了解，中大型项目中关于文件目录的划分和功能分类

# 1、CSS 文件划分

TIP

在中大型项目中，一般会对 CSS 进行文件划分，根据文件的性质与用途，大概会分成：

公共型样式
特殊型样式
皮肤型样式

公共型样式可命名为global.css或common.css等名字，主要包括网站通用样式编写。例如：重置默认样式 reset、网站通用布局、通用模块和元件、通用响应式系统等

/* 重置样式 */
css代码...

/* 网站通用布局 */
css代码...

/* 通用模块 */
css代码...

/* 通用元件 */
css代码...

/* 通用响应式系统 */
css代码...

注：

特殊型样式主要是根据当前页面来决定的文件，只针对当前页面做出特殊处理的样式，例如只在首页中用到的样式可放置到index.css中，在登录页中用到的样式可放置到login.css中

皮肤型样式是针对网站需要皮肤功能时，把颜色、背景等抽离出来放到文件中的形式，例如theme-orange.css、theme-skyblue.css等。

CSS 文件的引入顺序如下：

<link href="./assets/css/global.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/index.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/theme.css" rel="stylesheet" type="text/css" />

# 2、CSS 功能分类

TIP

上面提到了公共型样式，在文件中具体包括哪些常见的功能呢？大概可分为如下几类：

重置样式
网站通用布局
通用模块
通用元件
通用响应式系统

# 3、重置样式

TIP

重置样式，主要是去除默认样式和统一不同设备下的表现形态。通常为Reset CSS代码和Normalize CSS代码的结合版本。

我们将在接下来的项目开发中把二者结合成为了一个reset.css文件，并在项目中进行使用。

后边会有章节详细解读

# 4、网站通用布局

TIP

网站通用布局主要指的是对网站中出现的大块结构进行排版

如： PC 端中的菜单、内容的左右布局方案；移动端中的头部、列表、尾部的上中下布局方案等。

菜单、内容的左右布局

头部、列表、尾部的上中下布局

注：

点击查看，实现 CSS 布局的几种策略 👆 (opens new window)

# 5、通用模块

TIP

通用模块指的是网页中可以重复使用的较大的整体。比如：

导航
登录
注册
各种列表
评论
搜索等

# 6、通用原件

TIP

通用原件指的是不可再分的较为小巧的个体，通常被重复用于各种模块中。比如：

按钮
输入框
loading
图标等

# 7、通用响应式系统

TIP

通用响应式系统指的是在不同设备下要实现响应式布局，当满足了某个断点设定后调用的相应变化样式。比如：

浮动添加
栅格生效
显示隐藏
版心宽度等

# 三、标签默认样式及清除

TIP

深入了解目前全球大厂 Web 开发者常用的清除默认样式不同解决方案及最佳实践。

# 1、标签默认样式

TIP

一些 HTML 标签在浏览器中会有默认样式。例如：

body 标签会有margin: 8px;
ul 标签会有margin: 16px 0;及 padding-left: 40px

当我们在切图软件中进行尺寸或位置测量的时候，把测量出来的数值设置到对应的标签上时，可能会受到当前标签默认样式的影响，从而页面显示效果跟设计图效果不符。

开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。
“覆盖”浏览器的 CSS 默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉，这就是 CSS reset

* {
  margin: 0;
  padding: 0;
}

注：

以上这也是一种 CSS Reset 的方法，让所有的选择器的 padding、margin 都设置成 0

这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费。

但如果是像淘宝，YouTube 这种架构非常大的网站，刚需要有选择地进行 CSS 重设，以减少资源浪费。推荐以下 3 种 Reset CSS 学习：

# 2、清除默认样式 - YUI Reset CSS

TIP

雅虎 Yui Reset CSS，可参考 Yui Reset CSS (opens new window)

点击查看完整源代码

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html {
  color: #000;
  background: #fff;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before,
q:after {
  content: "";
}
abbr,
acronym {
  border: 0;
  font-variant: normal;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  *font-size: 100%;
}
legend {
  color: #000;
}

# 3、清除默认样式 - CSS Tools: Reset CSS

TIP

通常在网页开发中，要去掉这些影响尺寸和位置的默认样式及其他影响布局的默认值。可以参考 CSS Tools: Reset CSS (opens new window)方案

点击查看完整源代码

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

# 4、清除默认样式 - Normalize CSS

TIP

由于 Reset CSS 相对“暴力”，不管你有没有用，统统重置成一样的效果，且影响的范围很大，所以更加“平和”的一种方式 Normalize CSS (opens new window)诞生了。

Normalize CSS 可以看成是一种 Reset CSS 的替代方案，创造 Normalize CSS 有下面这几个目的：

保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分 HTML 元素提供
修复浏览器自身的 bug 并保证各浏览器的一致性
优化 CSS 可用性：用一些小技巧
解释代码：用注释和详细的文档来

点击查看完整源代码

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
button,
input {
  /* 1 */
  overflow: visible;
}
button,
select {
  /* 1 */
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}

# 5、CSS 重置样式最佳实践

TIP

在接下来的项目开发中，我们会采用Normalize CSS和Reset CSS结合代码，形成一个更加强大的方案。

点击查看完整源代码

@charset "utf-8";

/* --------------------重置样式-------------------------------- */

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}

/* 设置默认字体 */
body {
  font-size: 14px;
  font-style: normal;
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica
      neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe
      ui symbol, noto color emoji;
}

/* 字体太小用户体检不好，让small恢复12px */
small {
  font-size: 12px;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 14px;
}

h4,
h5,
h6 {
  font-size: 100%;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  background-color: transparent;
}

a:hover,
a:active {
  outline-width: 0;
  text-decoration: none;
}

/* 重置表格 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 重置hr */
hr {
  border: 0;
  height: 1px;
}

/* 图形图片 */
img {
  border-style: none;
}

img:not([src]) {
  display: none;
}

svg:not(:root) {
  overflow: hidden;
}

/* 下面的操作是针对于html5页面布局准备的，不支持ie6~8以及其他低版本的浏览器 */
html {
  /* 禁用系统默认菜单 */
  -webkit-touch-callout: none;
  /* 关闭iphone & Android的浏览器纵向和横向模式中自动调整字体大小的功能 */
  -webkit-text-size-adjust: 100%;
}

input,
textarea,
button,
a {
  /* 表单或者a标签在手机点击时会出现边框或彩色的背景区域，意思是去除点击背景框 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 重置html5元素的默认样式 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
}

audio:not([controls]),
video:not([controls]) {
  display: none;
  height: 0;
}

progress {
  vertical-align: baseline;
}

mark {
  background-color: #ff0;
  color: #000;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

button,
input,
select,
textarea {
  font-size: 100%;
  outline: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

textarea {
  overflow: auto;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

# 四、CSS 方法论及样式规范

TIP

深入研究和学习 CSS 方法论和规范

# 1、CSS 方法论

TIP

方法论是一个哲学术语，会对一系列具体的方法进行分析研究、系统总结并最终提出较为一般性的原则。

CSS 方法论是一种面向 CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。
这些方法论都会涉及结构化的命名约定，并且在组织 CSS 时可提供相应的指南，从而提升代码的性能、可读性以及可维护性。

# 2、常见的 CSS 方法论

TIP

OOCSS
BEM
SMACSS
Atomic CSS

# 3、OOCSS

TIP

OOCSS (opens new window)（Object-Oriented CSS）是指面向对象的 CSS，由 Nicole Sullivan 在 2009 年提出，借鉴了面向对象编程的抽象思维。

其核心概念是采用模块化的实现方式，将 CSS 分解成可复用和继承的对象，也就是将关注点从页面转移到页面内的组件。
OOCSS 包含两条核心原则，如下所列，每条原则下都给出了相应的示例。

① 结构与皮肤分离，即不要将位置、尺寸等结构属性和字体、颜色等皮肤属性写在一个选择器中。

<style>
  .col {
    float: left;
    width: 200px;
  }
  .line {
    background: #f60;
  }
</style>
<div class="line col"></div>

② 内容与容器分离，即让对象的行为可预测，避免对位置的依赖，子元素即使离开了容器也应该能正确显示。

<style>
  .line {
    background: #f60;
  }
  .unit {
    width: 50%;
  }
</style>
<div class="line">
  <div class="unit"></div>
</div>

命名约定

在 OOCSS 中，类名既要能传递对象的用途，也要有通用性，例如 mod、complex、pop 等。

如果将 CSS 类命名的太语义化，例如 navigation-bar，那么就会将其限制在导航栏，无法应用到网页的其它位置。

缺点

OOCSS 的缺点也很明显，如下所列：

（1）虽然样式的粒度变小了，但同时会产生许多充满类的 HTML 元素。
（2）在避免特殊性冲突时，OOCSS 选择的方案是放弃层叠，这样就无法最大程度地利用关系选择器的优势。
（3）为了让类能更通用，在命名时就得弱化语义。

# 4、BEM

TIP

国内的很多大厂主要采用 BEM + SMACSS 这两种方法论的结合命名约定，所以下面对这两种方法论进行简单介绍（天猫、京东 ....）

BEM（Block Element Modifier）是指块级元素修饰符，BEM 分为三部分：

块（Block）是一个独立实体，最高级抽象，例如菜单、文本框等
元素（Element）是块的组成部分，被包含在块中，无法自成一体，例如菜单项、标题等
修饰符（Modifier）是块或元素的状态，可更改它们的外观或行为，例如高亮、选中等

BEM 中的块、元素和修饰符需要全部小写

名称中的单词用连字符（-）分隔
元素由双下划线（__）分隔
修饰符由双连字符（--）分隔
注意，块和元素都既不能是 HTML 元素名或 ID，也不依赖其它块或元素。

<style>
  .form {
  }
  .form--theme-xmas {
  }
  .form__input {
  }
  .form__submit {
  }
  .form__submit--disabled {
  }
</style>
<form class="form form--theme-xmas">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

上面代码中

.form 是块，表示一个独立实体
.form__input 和 .form__submit 是其元素
.form--theme-xmas 是其修饰符
而 .form__submit--disabled 是 .form__submit 的修饰符

BEM 的核心思想就是用这种命名约定来清晰的表达出类的含义以及与其它类之间的关系。

BEM 的缺点如下：

（1）BEM 与 OOCSS 一样，也抛弃了层叠，因此也不能完全挖掘出关系选择器的潜力。
（2）CSS 类名可能会比较长而且复杂。
（3）需要完善规则说明文档，否则 HTML 结构将难以阅读。

# 5、SMACSS

TIP

SMACSS（Scalable and Modular Architecture for CSS）是指可伸缩及模块化的 CSS 架构

由 Jonathan Snook 在 2011 年雅虎工作时提出。他在 OOCSS 和 BEM 的基础上添加了五种类别的组件的处理规则，具体如下所列：

1、基础（Base） 是为 HTML 元素定义默认样式，可以包含属性、伪类等选择器
2、布局（Layout） 会将页面分为几部分，可作为高级容器包含一个或多个模块，例如左右分栏、栅格系统等
3、模块（Module） 又名对象或块，是可重用的模块化部分，例如导航栏、产品列表等
4、状态（State） 描述的是任一模块或布局在特定状态下的外观，例如隐藏、激活等
5、主题（Theme） 也就是换肤，描述了页面的外观，它可修改前面四个类别的样式，例如链接颜色、布局方式等

命名约定：推荐使用前缀来区分布局、模块、状态和主题，如下所列

l-或layout-用作布局的前缀，例如：.l-inline、.layout-grid等；
m-或模块自身的命名用作其前缀，例如：.m-profile、.field等；
is-用作状态的前缀，例如：.is-collapsed、.is-active等；
theme-用作主题的前缀，例如：.theme-a-background、.theme-l-grid等。
注意，由于基础规则是直接作用于元素的，因此不需要前缀

共享

在实际工作中，不需要局限于某一个 CSS 方法论，很多时候可以结合使用，共享模块化 CSS 的规则。例如遵循 OOCSS 的第一条分离原则，BEM 的命名约定，以及 SMACSS 的分类前缀，具体如下所列:

（1）基础仍旧沿用 SMACSS 的规则，布局和模块使用 SMACSS 的前缀。
（2）子元素用双下划线（__）分隔，其状态前缀沿用“is-”。
（3）修饰符也以“is-”为前缀，与模块组合时用双连字符（--）分隔。
（4）适当层叠，最好保持在一层。

在下面的示例中，.m-notice__img 和 .m-notice__content是模块的子元素，.is-important是子元素 h6 的状态，.m-notice--is-active是模块的修饰符。

<style>
  .l-notice {
  }
  .m-notice {
  }
  .m-notice--is-active {
  }
  .m-notice__img {
  }
  .m-notice__content h6 {
  }
  .is-important {
  }
</style>
<div class="m-notice l-notice">
  <img class="m-notice__img" />
  <div class="m-notice__content">
    <h6>......</h6>
    <h6 class="is-important">......</h6>
  </div>
</div>

注：

任何软件设计都存在不完美的地方，CSS 方法论也是一样。比如：命名过长不易维护，HTML 不够简洁等。
但是它带来的巨大优势也是非常明显的，比如：样式不容易冲突，尤其是复杂的样式结构；
清晰的 CSS 架构，对大型 CSS 项目管理维护非常重要等。

# 五、样式规范

TIP

使用类选择器，放弃 ID 选择器： ID 在一个页面中的唯一性导致了如果以 ID 为选择器来写 CSS，就无法重用。
命名应简约而不失语义： 反对过长命名和没有语义的命名，如：.m-navigation、.m-abc，推荐.m-nav。
相同语义的不同类命名： 直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。
防止污染和被污染： 为了防止后代选择器污染，尽量采用 > 方式，例如：-m-nav>li，而不是-m-nav li。
最后一个值也以分号结尾： 通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。
省略值为 0 时的单位： 为节省不必要的字节同时也使阅读方便，我们将 0px、0em、0%等值缩写为 0。
根据属性的重要性按顺序书写： 先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。例如：

.m-box {
  position: relative;
  width: 600px;
  margin: 0 auto 10px;
  text-align: center;
  color: #000;
}

CSS 需要进行格式化和对齐处理： 推荐 vsCode 插件：formate: CSS/LESS/SCSS formatter

注：

# 六、CSS 命名规范

TIP

点击查看，CSS 样式命名规则和规范 (opens new window) 👆

# 七、Git 初始化项目

TIP

此次项目实战，我们将使用 Git 进行项目代码的管理

# 1、Git 的基础配置

Git 的安装配置

Git 各平台安装包下载地址为：http://git-scm.com/downloads (opens new window)
当安装完 Git 该做的第一件事就是设置你的用户名称与邮件地址。
这样做很重要，因为每一个 Git 的提交都会使用这些信息，并且它会写入到你的每一次提交中，不可更改：

# 设置提交代码时的用户信息，开始前我们需要先设置提交的用户信息，包括用户名和邮箱：
# 如果去掉 --global 参数只对当前仓库有效。

git config --global user.name "你的名字（一定要是英文的）"
git config --global user.email "你的邮箱"

# 查看用用户名和邮箱信息是否配置成功
git config --global --list

因为 Git 是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和 Email 地址。
你也许会担心，如果有人故意冒充别人怎么办？这个不必担心，首先我们相信大家都是善良的群众，其次，真的有冒充的也是有办法可查的。

注意：

git config 命令的 --global 参数，用了这个参数，表示你这台机器上所有的 Git 仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和 Email 地址

# 2、创建 Git 本地版本库

TIP

首先，选择一个合适的地方，创建一个空目录（确保目录名和父目录，不能包含中文）：

# 3、获取 Git 仓库

TIP

有两种取得 Git 项目仓库的方法

第一种是在现有项目或目录下导入所有文件到 Git 中；
第二种是从一个服务器克隆一个现有的 Git 仓库。

在现有目录中初始化仓库

使用 Git 来对现有的项目进行管理，你只需要进入该项目目录并输入：

# 通过git init命令把这个目录变成Git可以管理的仓库：
git init

生成的.git 隐藏文件夹，即：Git 本地仓库

瞬间 Git 就把仓库建好了，而且告诉你是一个空的仓库（empty Git repository），细心的你可以发现当前目录下多了一个 .git 的目录

这个目录是 Git 来跟踪管理版本库的，没事千万不要手动修改这个目录里面的文件，不然改乱了，就把 Git 仓库给破坏了。
如果你没有看到 .git 目录，那是因为这个目录默认是隐藏的，用ls -ah命令就可以看见。

# 4、初始化项目基础配置

TIP

在 vscode 新建 .gitignore 文件

.gitignore 文件用于过滤需要上传的文件

创建 README.md 文件

用于编写项目说明文档

# 5、新建远程仓库，使用 Gitee

创建远程仓库，成功后如下：

# 6、添加远程仓库提交地址

# 在vscode的控制台输入以上复制的命令：运行命令，即可添加远程仓库提交地址
git remote add origin https://gitee.com/aicodingedu/icoding.git

# 7、Git 提交、创建分支

TIP

在 vscode 中提交项目文件到本地仓库

TIP

推送 Git 主分支 master 至远程仓库

如果是第一次提交，需要输入 Gitee 的用户名和密码

创建 Git 分支

添加 Git 分支备注信息

推送 Git 分支至远程仓库

SUCCESS

远程仓库推送成功后，查看效果

查看远程仓库的分支

# 8、关于 Git 详细图文版教程

TIP

点击查看，完整系统版 Git 快速入门教程 👆 (opens new window)

CSS 还原 UI 设计，前端项目开发的必备工具 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料