TheOdinProject · MaoShizhong · May 10, 2024 · Apr 27, 2024 · Apr 27, 2024 · Apr 27, 2024
diff --git a/react/the_react_ecosystem/styling_react_applications.md b/react/the_react_ecosystem/styling_react_applications.md
@@ -1,36 +1,36 @@
 ### Introduction
 
-Up until now you've been using vanilla CSS to style your React projects, but there are other options available. This lesson is intended to be more like a guide or a list of options for you to explore.  
+In the previous courses, you've learned a lot of CSS and all of those skills are still applicable to React, however there are a couple of things we'd like to highlight. As you've probably already noticed, all of the styles we write share the global scope, which means that as our application grows, it becomes increasingly difficult to manage our CSS. Some of the tools mentioned below will help solve this problem, however it's important to note that the main purpose of this lesson is to be more of a guide or a list of available options for you to explore when it comes to styling React applications.
-In the previous courses, you've learned a lot of CSS and all of those skills are still applicable to React, however there are a couple of things we'd like to highlight. As you've probably already noticed, all of the styles we write share the global scope, which means that as our application grows, it becomes increasingly difficult to manage our CSS. Some of the tools mentioned below will help solve this problem, however it's important to note that the main purpose of this lesson is to be more of a guide or a list of available options for you to explore when it comes to styling React applications.
+In the previous courses, you'll have learned a lot of CSS and all of those skills are still applicable to React. However, there are a couple of things we'd like to highlight. As you've probably already noticed, all of the styles we write share a global scope, which means that as our application grows, it will become increasingly difficult to manage our CSS. Some of the tools mentioned below are things people use to help solve this problem.
-In the previous courses, you've learned a lot of CSS and all of those skills are still applicable to React, however there are a couple of things we'd like to highlight. As you've probably already noticed, all of the styles we write share the global scope, which means that as our application grows, it becomes increasingly difficult to manage our CSS. Some of the tools mentioned below will help solve this problem, however it's important to note that the main purpose of this lesson is to be more of a guide or a list of available options for you to explore when it comes to styling React applications.
+In the previous courses, you'll have learned a lot of CSS and all of those skills are still applicable to React. However, there are a couple of things we'd like to highlight. As you've probably already noticed, all of the styles we write share a global scope, which means that as our application grows, it will become increasingly difficult to manage our CSS. Some of the tools mentioned below are things people use to help solve this problem.
 
 ### Lesson overview
 
 This section contains a general overview of topics that you will learn in this lesson.
 
-- Know about ways to style React applications 
+- Know about ways to style React applications
 
-### Vanilla CSS 
+### CSS Modules
-### CSS Modules
+### CSS modules
-### CSS Modules
+### CSS modules
 
-Vanilla CSS is the simplest way to style. In the previous courses, you've learned a lot of CSS and all of those skills are applicable to React. There are a couple of things we'd like to highlight.
+Regular CSS is the simplest way to style. CSS Modules let you write CSS style declarations that are scoped locally, which means that we finally no longer have to worry about our class names potentially conflicting with other classes in the global scope, i.e. we can now have two (or more) classes with the same name but different styles, and avoid naming your classes `.list-wrapper`, `.item-wrapper` etc. and just use `.wrapper` with its respective component.
-Regular CSS is the simplest way to style. CSS Modules let you write CSS style declarations that are scoped locally, which means that we finally no longer have to worry about our class names potentially conflicting with other classes in the global scope, i.e. we can now have two (or more) classes with the same name but different styles, and avoid naming your classes `.list-wrapper`, `.item-wrapper` etc. and just use `.wrapper` with its respective component.
+Regular CSS is the simplest way to style. CSS Modules let you write CSS style declarations that are scoped locally, which means that we finally no longer have to worry about our class names potentially conflicting with other classes in the global scope. For example, we can have several CSS module files containing a `.wrapper` class, but each module's `.wrapper` will be treated as different to each other.
-Regular CSS is the simplest way to style. CSS Modules let you write CSS style declarations that are scoped locally, which means that we finally no longer have to worry about our class names potentially conflicting with other classes in the global scope, i.e. we can now have two (or more) classes with the same name but different styles, and avoid naming your classes `.list-wrapper`, `.item-wrapper` etc. and just use `.wrapper` with its respective component.
+Regular CSS is the simplest way to style. CSS Modules let you write CSS style declarations that are scoped locally, which means that we finally no longer have to worry about our class names potentially conflicting with other classes in the global scope. For example, we can have several CSS module files containing a `.wrapper` class, but each module's `.wrapper` will be treated as different to each other.
 
-1. `CSS Modules` let you write CSS style declarations that are scoped locally.
-1. `CSS Utility Frameworks` are a popular choice for styling React applications. They provide a set of pre-defined classes that you can directly use in your HTML, or JSX in our case. [Tailwind CSS](https://tailwindcss.com) is by far the most popular choice. 
+### CSS in JS
 
+Why even write CSS in CSS when you can write it in JavaScript? Just kidding, of course!
 
-### CSS in JS
+CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion i.e. based on state, and also supports modular CSS in the same way that CSS Modules do. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/).
-CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion i.e. based on state, and also supports modular CSS in the same way that CSS Modules do. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/).
+CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion, e.g. based on state, and also supports modular CSS in the same way that CSS Modules do. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/).
-CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion i.e. based on state, and also supports modular CSS in the same way that CSS Modules do. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/).
+CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion, e.g. based on state, and also supports modular CSS in the same way that CSS Modules do. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/).
 
-Why even write CSS in CSS when you can write it in JavaScript? Just kidding, of course! 
+### CSS Utility Frameworks
 
-CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion i.e. based on state. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/).
+CSS Utility Frameworks are a popular choice for styling React applications. They provide a set of pre-defined classes that you can directly use in your HTML, or JSX in our case. [Tailwind CSS](https://tailwindcss.com) is by far the most popular choice.
 
 ### Component libraries
 
-What if everything's already done for you? Styling, behavior, and accessibility are taken care of for you in component libraries. As the name suggests, these libraries provide adaptable and reusable components that you can use directly in your project. These components include, but are not limited to, dropdowns, drawers, calendars, toggles, tabs, and all other components you can think of. 
+What if everything's already done for you? Styling, behavior, and accessibility are taken care of for you in component libraries. As the name suggests, these libraries provide adaptable and reusable components that you can use directly in your project. These components include, but are not limited to, dropdowns, drawers, calendars, toggles, tabs, and all other components you can think of.
 
 [Material UI](https://mui.com/), [Radix](https://www.radix-ui.com/), and [Chakra UI](https://chakra-ui.com/) are worth a mention when talking about component libraries.
 
 <div class="lesson-note lesson-note--tip" markdown="1" >
 
-For learning purposes throughout this course, we advise you to implement your component's styling from scratch i.e. use vanilla CSS or a CSS-in-JS option. 
+For learning purposes throughout this course, we recommend that you avoid using CSS frameworks or component libraries, and instead implement your component's styling from scratch i.e. use [CSS Modules](#css-modules) or a [CSS-in-JS](#css-in-js) option.
 
 </div>
 
@@ -48,15 +48,14 @@ For learning purposes throughout this course, we advise you to implement your co
 
 ### Knowledge check
 
-This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
+The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
 
 - [How can you use CSS Modules in your React app?](https://www.makeuseof.com/react-components-css-modules-style/)
 - [What does CSS-in-JS mean?](#css-in-js)
 - [What are component libraries?](#component-libraries)
 
 ### Additional resources
 
-This section contains helpful links to related content. It isn’t required, so consider it supplemental.
+This section contains helpful links to related content. It isn't required, so consider it supplemental.
 
-- [Tailwind CSS documentation](https://tailwindcss.com/).
-- Josh Comeau has a nice article on [getting the most out of styled-components](https://www.joshwcomeau.com/css/styled-components/). 
+- Josh Comeau has a nice article on [getting the most out of styled-components](https://www.joshwcomeau.com/css/styled-components/).