App 组件本质上是基于 React 的应用程序中最顶层的组件，所有其他组件都是其子组件。所以在 create-react-app 中，之所以有 App.css 和 index.css 只是为了让 create-react-app 可以有一个非常简单的目录结构，并且“App.css”和“index”之间没有命名冲突.css”，因此您可以花更少的时间删除通用内容，而将更多时间用于构建您的内容。构建基于 React 的应用程序的最佳实践是将每个组件放在它自己的单独目录中，其中包含自己的 index.js 文件、index.css 文件和类似 index.test.js 的内容，或者您​​想构建测试文件. “Index.js”是当您为该目录调用 ES6 导入语句时在该目录中查找的第一个文件，因此您可以编写：

import HUD from './HUD'

代替：

import HUD from './HUD/HUD.js'

所以使用 index.css 只是有助于明确这个index.css 文件是针对这个组件的，因为这个index.js 只引用这个组件

这是一个基本的 React 应用程序目录结构：

src
├── App
│   ├── HUD
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   ├── index.css
│   ├── index.js
│   ├── index.test.js
│   ├── Maze
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   ├── Tile
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   └── TouchControl
│       ├── index.css
│       ├── index.js
│       └── index.test.js
├── index.css
└── index.js

src 级别的 index.css 文件将是放置顶级容器 DOM 元素 CSS 样式规则的好地方，因为 src 级别的 index.js 是基于 React 的应用程序中的初始位置，您可以在其中告诉 React 物理挂载应用程序实际 HTML DOM 的组件，在容器元素上，类似这样，并说“root”是 JavaScript 加载之前页面上已经存在的元素的 ID：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

ReactDOM.render( <App />, document.getElementById('root'))