diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css
index 15adfdc710c..796cf766cfa 100644
--- a/packages/react-scripts/template/src/App.css
+++ b/packages/react-scripts/template/src/App.css
@@ -1,3 +1,13 @@
+/**
+ * This is a good place to put styles related to the <App /> component.
+ * We recommend that, when possible, a component CSS file only includes styles
+ * that are used by that specific component. This is why all class names start
+ * with "App" in this example. Instead of defining nested selectors for child
+ * components, we recommend passing all relevant information as props (such as
+ * <Button color="red" size="large" />) in React. Then you can have <Button />
+ * use its own Button.css file without coupling their styles together.
+ */
+
 .App {
   text-align: center;
 }
diff --git a/packages/react-scripts/template/src/index.css b/packages/react-scripts/template/src/index.css
index b4cc7250b98..b84525ec5e2 100644
--- a/packages/react-scripts/template/src/index.css
+++ b/packages/react-scripts/template/src/index.css
@@ -1,3 +1,8 @@
+/**
+ * This is a good place to put styles that apply to the whole page.
+ * We recommend to put component-specific styles into separate files.
+ */
+
 body {
   margin: 0;
   padding: 0;