docs(styling): fix grammar + typos (#10657)

Co-authored-by: Brooks Lybrand <[email protected]>

Author: MichaelDeBoey

docs/styling/bundling.md

@@ -6,7 +6,7 @@ title: CSS Bundling
 
 <docs-warning>This documentation is only relevant when using the [Classic Remix Compiler][classic-remix-compiler]. If you're using [Remix Vite][remix-vite], you should refer to [Vite's CSS documentation][vite-css] instead.</docs-warning>
 
-Some CSS features in Remix bundle styles into a single file that you load manually into the application including:
+Some CSS features in Remix bundle styles into a single file that you load manually into the application, including:
 
 - [CSS Side Effect Imports][css-side-effect-imports]
 - [CSS Modules][css-modules]

docs/styling/css-in-js.md

@@ -4,12 +4,12 @@ title: CSS in JS
 
 # CSS in JS libraries
 
-You can use CSS-in-JS libraries like Styled Components and Emotion. Some of them require a "double render" in order to extract the styles from the component tree during the server render.
+You can use CSS-in-JS libraries like Styled Components and Emotion. Some of them require a "double render" to extract the styles from the component tree during the server render.
 
 Since each library is integrated differently, check out our [examples repo][examples] to see how to use some of the most popular CSS-in-JS libraries. If you've got a library working well that hasn't been covered, please [contribute an example][examples]!
 
 <docs-warning>
-Most CSS-in-JS approaches aren't recommended for use in Remix because they require your app to render completely before you know what the styles are. This is a performance issue and prevents streaming features like defer.
+Most CSS-in-JS approaches aren't recommended for use in Remix because they require your app to render completely before you know what the styles are. This is a performance issue and prevents streaming features like `defer`.
 </docs-warning>
 
 [examples]: https://github.com/remix-run/examples

docs/styling/css.md

@@ -6,13 +6,13 @@ title: Regular CSS
 
 Remix helps you scale an app with regular CSS with nested routes and [`links`][links].
 
-CSS Maintenance issues can creep into a web app for a few reasons. It can get difficult to know:
+CSS Maintenance issues can creep into a web app for a few reasons. It can get challenging to know:
 
 - how and when to load CSS, so it was usually all loaded on every page
 - if the class names and selectors you were using were accidentally styling other UI in the app
 - if some rules weren't even used anymore as the CSS source code grew over time
 
-Remix alleviates these issues with route-based stylesheets. Nested routes can each add their own stylesheets to the page and Remix will automatically prefetch, load, and unload them with the route. When the scope of concern is limited to just the active routes, the risks of these problems are reduced significantly. The only chances for conflicts are with the parent routes' styles (and even then, you will likely see the conflict since the parent route is also rendering).
+Remix alleviates these issues with route-based stylesheets. Nested routes can each add their own stylesheets to the page, and Remix will automatically prefetch, load, and unload them with the route. When the scope of concern is limited to just the active routes, the risks of these problems are reduced significantly. The only chances for conflicts are with the parent routes' styles (and even then, you will likely see the conflict since the parent route is also rendering).
 
 <docs-warning>If you're using the [Classic Remix Compiler][classic-remix-compiler] rather than [Remix Vite][remix-vite], you should remove `?url` from the end of your CSS import paths.</docs-warning>
 
@@ -62,11 +62,11 @@ It's subtle, but this little feature removes a lot of the difficulty when stylin
 
 ### Shared Component Styles
 
-Websites large and small usually have a set of shared components used throughout the rest of the app: buttons, form elements, layouts, etc. When using plain style sheets in Remix there are two approaches we recommend.
+Websites large and small usually have a set of shared components used throughout the rest of the app: buttons, form elements, layouts, etc. When using plain style sheets in Remix, there are two approaches we recommend.
 
 #### Shared stylesheet
 
-The first approach is very simple. Put them all in a `shared.css` file included in `app/root.tsx`. That makes it easy for the components themselves to share CSS code (and your editor to provide intellisense for things like [custom properties][custom-properties]), and each component already needs a unique module name in JavaScript anyway, so you can scope the styles to a unique class name or data attribute:
+The first approach is basic. Put them all in a `shared.css` file included in `app/root.tsx`. That makes it easy for the components themselves to share CSS code (and your editor to provide intellisense for things like [custom properties][custom-properties]). Each component already needs a unique module name in JavaScript anyway, so you can scope the styles to a unique class name or data attribute:
 
 ```css filename=app/styles/shared.css
 /* scope with class names */
@@ -101,7 +101,7 @@ This also makes it easy for routes to adjust the styles of a component without n
 
 #### Surfacing Styles
 
-A second approach is to write individual css files per component and then "surface" the styles up to the routes that use them.
+A second approach is to write individual CSS files per component and then "surface" the styles up to the routes that use them.
 
 Perhaps you have a `<Button>` in `app/components/button/index.tsx` with styles at `app/components/button/styles.css` as well as a `<PrimaryButton>` that extends it.
 
@@ -252,11 +252,11 @@ export const links: LinksFunction = () => {
 // ...
 ```
 
-While that's a bit of boilerplate it enables a lot:
+While that's a bit of boilerplate, it enables a lot:
 
 - You control your network tab, and CSS dependencies are clear in the code
 - Co-located styles with your components
-- The only CSS ever loaded is the CSS that's used on the current page
+- The only CSS ever loaded is the CSS used on the current page
 - When your components aren't used by a route, their CSS is unloaded from the page
 - Remix will prefetch the CSS for the next page with [`<Link prefetch>`][link]
 - When one component's styles change, browser and CDN caches for the other components won't break because they all have their own URLs.
@@ -297,7 +297,7 @@ export const CopyToClipboard = React.forwardRef(
 CopyToClipboard.displayName = "CopyToClipboard";
 ```
 
-Not only will this make the asset high priority in the network tab, but Remix will turn that `preload` into a `prefetch` when you link to the page with [`<Link prefetch>`][link], so the SVG background is prefetched, in parallel, with the next route's data, modules, stylesheets, and any other preloads.
+Not only will this make the asset a high priority in the network tab, but Remix will turn that `preload` into a `prefetch` when you link to the page with [`<Link prefetch>`][link], so the SVG background is prefetched, in parallel, with the next route's data, modules, stylesheets, and any other preloads.
 
 ### Link Media Queries
 

docs/styling/postcss.md

@@ -46,17 +46,17 @@ You can use CSS preprocessors like LESS and SASS. Doing so requires running an a
 
 Once converted to CSS by the preprocessor, the generated CSS files can be imported into your components via the [Route Module `links` export][route-module-links] function, or included via [side effect imports][css-side-effect-imports] when using [CSS bundling][css-bundling], just like any other CSS file in Remix.
 
-To ease development with CSS preprocessors you can add npm scripts to your `package.json` that generate CSS files from your SASS or LESS files. These scripts can be run in parallel alongside any other npm scripts that you run for developing a Remix application.
+To ease development with CSS preprocessors, you can add npm scripts to your `package.json` that generate CSS files from your SASS or LESS files. These scripts can be run in parallel alongside any other npm scripts that you run for developing a Remix application.
 
 An example using SASS.
 
-1. First you'll need to install the tool your preprocess uses to generate CSS files.
+1. First, you'll need to install the tool your preprocessing uses to generate CSS files.
 
    ```shellscript nonumber
    npm add -D sass
    ```
 
-2. Add an npm script to your `package.json`'s `scripts` section that uses the installed tool to generate CSS files.
+2. Add an `npm` script to your `package.json`'s `scripts` section that uses the installed tool to generate CSS files.
 
    ```jsonc filename=package.json
    {
@@ -79,7 +79,7 @@ An example using SASS.
    npm run sass
    ```
 
-   This will start the `sass` process. Any new SASS files, or changes to existing SASS files, will be detected by the running process.
+   This will start the `sass` process. The running process will detect any new SASS files or changes to existing SASS files.
 
    You might want to use something like `concurrently` to avoid needing two terminal tabs to generate your CSS files and also run `remix dev`.
 

docs/styling/tailwind.md

@@ -4,7 +4,7 @@ title: Tailwind
 
 # Tailwind
 
-<docs-warning>This documentation is only relevant when using the [Classic Remix Compiler][classic-remix-compiler]. If you're using [Remix Vite][remix-vite], Tailwind can be integrated using [Vite's built-in PostCSS support][vite-postcss].</docs-warning>
+<docs-warning>This documentation is only relevant when using the [Classic Remix Compiler][classic-remix-compiler]. If you're using [Remix Vite][remix-vite], Tailwind CSS can be integrated using [Vite's built-in PostCSS support][vite-postcss].</docs-warning>
 
 Perhaps the most popular way to style a Remix application in the community is to use [Tailwind CSS][tailwind].
 
@@ -74,7 +74,7 @@ If you're using VS Code, it's recommended you install the [Tailwind IntelliSense
 
 It's recommended that you avoid Tailwind's `@import` syntax (e.g. `@import 'tailwindcss/base'`) in favor of Tailwind directives (e.g. `@tailwind base`).
 
-Tailwind replaces its import statements with inlined CSS but this can result in the interleaving of styles and import statements. This clashes with the restriction that all import statements must be at the start of the file.
+Tailwind replaces its import statements with inlined CSS, but this can result in the interleaving of styles and import statements. This clashes with the restriction that all import statements must be at the start of the file.
 
 Alternatively, you can use [PostCSS][built-in-post-css-support] with the [postcss-import] plugin to process imports before passing them to esbuild.