From bb77903de599a211a9b30cf7edd554f8814b1d17 Mon Sep 17 00:00:00 2001
From: "Jack Reimers [SSW]" <10693364+jackreimers@users.noreply.github.com>
Date: Fri, 29 Sep 2023 17:35:02 +1000
Subject: [PATCH] Update rule.md

---
 rules/scoped-css/rule.md | 38 ++++++++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/rules/scoped-css/rule.md b/rules/scoped-css/rule.md
index 0cfff8a1b13..e634ccbccc8 100644
--- a/rules/scoped-css/rule.md
+++ b/rules/scoped-css/rule.md
@@ -1,6 +1,6 @@
 ---
 type: rule
-title: Do you use scoped CSS?
+title: Do you know when to use scoped CSS?
 uri: scoped-css
 authors:
   - title: Jack Reimers
@@ -12,21 +12,45 @@ guid:
 ---
 
 On large frontend projects with lots of components it's common to have issues with your CSS classes overwriting eachother or conflicting. 
-Most frontend frameworks such as Blazor, Angular and React support scoped CSS, allowing you set CSS classes on a component level.
+There are a few different ways to solve this.
 
 <!--endintro-->
 
+### Utility Classes
+
+One solution to this problem is using a CSS framework such as [Tailwind](https://tailwindcss.com).
+
+#### Benefits
+* Faster setup
+* Simple to use
+* Faster development speed once devs are familiar with it
+
+#### Disadvantages
+* Poor readability as you add more classes
+* Learning curve for class names
+
+### Scoped CSS
+
+Most frontend frameworks such as Blazor, Angular and React support scoped CSS, allowing you set CSS classes on a component level.
+
 When you create a scoped CSS file, those classes are only accessible to the component that the CSS file is associated with.  
 
 This is useful as you don't need to worry about class names or CSS values conflicting with eachother like you would if all the classes are set at the root level.
 It also makes it much easier to change styling on individual components without breaking the styling on other classes.
 
-### Blazor
+#### Benefits
+* Can reuse class names in each component without conflicts
+* 
+
+#### Disadvantages
+* Styles have to be manually written
+
+#### Blazor
 
 In Blazor scoped CSS files are associated with components with dot syntax.  
 For example, if I have a component called `MyComponent.razor`, I can create a file called `MyComponent.razor.css` and the classes set in that file will only apply to `MyComponent`.
 
-#### Inheritance
+##### Inheritance
 
 Blazor supports having scoped CSS classes inherited by child components.
 
@@ -46,7 +70,7 @@ In `MyComponent.razor.cs`, if I use the `::deep` psuedo selector on a class, it
 
 [Blazor CSS Isolation - Microsoft Docs](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-7.0)
 
-### Angular
+#### Angular
 
 When you create a component in Angular, a scoped CSS file is automatically created for it along with the HTML and TypeScript files.
 
@@ -58,11 +82,13 @@ myComponent
 |- myComponent.component.ts
 ```
 
+##### Inheritance
+
 Angular also offers the `::ng-deep` pseudo selector, but there are [some considerations](https://angular.io/guide/component-styles) when using this.
 
 [Component Styles - Angular Docs](https://angular.io/guide/component-styles)
 
-### React
+#### React
 
 We can achieve local, component-level styles in React by using importing from a file ending in `module.css`: