You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: contents/tutorials/component-overview/v1/index.html
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@
9
9
<h1>What is a Component?</h1>
10
10
<p>A component in Blazor is a reusable building block that defines a part of a webpage's UI and behavior. It is written using Razor syntax, which combines C# and HTML. Each component can have its own logic, styling, and interactions, making it an essential unit for developing Blazor applications. Components can be as simple as a button or as complex as an entire form. They can also communicate with each other and manage data efficiently, allowing for a modular and maintainable architecture.</p>
11
11
<p>You can see in the image below that we have broken down the UI of Blazor School's homepage into individual components.</p>
<blockquote>A Razor Component (.razor) is different from a Razor Page (.cshtml). While both use Razor syntax, they serve distinct purposes in different contexts. A Razor Page is used in ASP.NET MVC, whereas a Razor Component is designed for building reusable UI elements in Blazor. Additionally, Blazor does not use Razor Pages as components.</blockquote>
14
14
<hrclass="my-4" />
15
15
<h1>Basic Structure</h1>
@@ -19,7 +19,7 @@ <h1>Basic Structure</h1>
19
19
<li><strong>UI Section</strong>: Defines the user interface of the component, containing both C# code and HTML.</li>
20
20
<li><strong>Code Section</strong>: Contains methods, properties, and other logic for the component.</li>
<p>Styling isn't just about making things look good - it's about creating maintainable and reusable UI components. Blazor offers several ways to apply CSS, each suited for different needs and scenarios. In this tutorial, you will explore:</p>
3
+
<ul>
4
+
<li>An overview of styling approaches.</li>
5
+
<li>Understanding CSS Class Name Pollution.</li>
6
+
<li>Global styles.</li>
7
+
<li>Scoped styles.</li>
8
+
<li>Internal styles.</li>
9
+
<li>External styles.</li>
10
+
<li>Inline styles</li>
11
+
</ul>
12
+
<hrclass="my-4" />
13
+
<h1>An Overview of Styling Approaches</h1>
14
+
<p>In Blazor, you can style components in several ways, depending on your needs:</p>
15
+
<ul>
16
+
<li><strong>Global styles</strong> apply to the entire application and are usually defined in files like <code>app.css</code>.</li>
17
+
<li><strong>Scoped styles</strong> are specific to a single component, helping prevent accidental style overrides.</li>
18
+
<li><strong>Internal styles</strong> are written inside the component itself using the <code><style></code> tag.</li>
19
+
<li><strong>External styles</strong> live in a separate <code>.css</code> file and linked to the component.</li>
20
+
<li><strong>Inline styles</strong> are added directly on an element via the <code>style</code> attribute, useful for quick or dynamic styling.</li>
21
+
</ul>
22
+
<hrclass="my-4" />
23
+
<h1>Understanding CSS Class Name Pollution</h1>
24
+
<p>CSS class name pollution occurs when the same class name is used in multiple parts of an app, but with different styling intentions. For example, you might define a <code>.card</code> class for one component, only to find that another part of the app already uses <code>.card</code> with different styles. As a result, your styles get overridden or mixed, creating bugs that are hard to trace.</p>
25
+
<p>This issue forces developers to come up with overly specific or redundant class names - like <code>.card-product</code>, <code>.card-user</code>, and so on - just to avoid conflict.</p>
26
+
<p>Blazor addresses this issue through CSS isolation, a feature that scopes styles to specific components. When using scoped styles with <code>.razor.css</code> files, Blazor rewrites CSS selectors at build time to include a unique scope identifier, such as <code>.card[b-tjvd9khfp8]</code>. This ensures that the <code>.warning</code> class in one component does not affect another. Even if other components use the same class name, the styles won’t conflict. This keeps your CSS cleaner, safer, and easier to manage in large applications.</p>
27
+
<hrclass="my-4" />
28
+
<h1>Global Styles</h1>
29
+
<p>In Blazor, global styles are CSS rules that apply to the entire application. They’re usually written in a shared file like <code>app.css</code> and included via <code>index.html</code>.</p>
30
+
<p>Global styles are helpful for defining consistent visual rules across your app - like base font settings, color themes, spacing, and common layouts. For example:</p>
31
+
<prelanguage="css">body {
32
+
font-family: Arial, sans-serif;
33
+
}
34
+
</pre>
35
+
<p>This rule will apply to every component unless specifically overridden. Global styles are perfect for shared UI elements such as headers, footers, buttons, or utility classes. However, since they are not scoped to any single component, they can unintentionally affect other parts of your app - a problem known as CSS class name pollution. As your app grows, this can make debugging styles more difficult, especially when class names collide.</p>
36
+
<hrclass="my-4" />
37
+
<h1>Scoped Styles</h1>
38
+
<p>We have mentioned the CSS class name pollution problem above and briefly noted that Blazor can resolve this issue gracefully with scoped styles.</p>
39
+
<h3>The Under-the-Hood Technique</h3>
40
+
<p>Delving deeper into the technology that helps Blazor achieve this, we can see that it uses the <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" target="_blank">Attribute selectors</a> technique behind the scenes.</p>
41
+
<p>Blazor generates a unique attribute tag along with the CSS class name on the fly. For example, with the following code in your Razor file:</p>
42
+
<prelanguage="razor"><span class="scoped">
43
+
The "scoped" CSS class is isolated to this component. Even if another component defines a class with the same name, it won’t interfere with or override the styles used here.
44
+
</span>
45
+
</pre>
46
+
<p>And the CSS in your <code>.razor.css</code> file:</p>
47
+
<prelanguage="css">.scoped {
48
+
color: blue;
49
+
}</pre>
50
+
<p>Blazor then compiles it into something like this:</p>
<li>Enable the scoped CSS feature in <code>index.html</code>. In some projects, you might find the line for scoped CSS commented out. Look for a line like this in your <code>index.html</code>:</li>
<li>Blazor uses a naming convention: if your component is <code>ScopedComponentExample.razor</code>, create a file named <code>ScopedComponentExample.razor.css</code>. Place all the CSS rules you want scoped to that component inside this file.</li>
62
+
</ol>
63
+
<h3>Overriding Scoped Styles</h3>
64
+
<p>Scoped CSS is designed to prevent unintended overrides, not to completely lock down styles. Developers can still override scoped styles when necessary.</p>
65
+
<p>Suppose you are using <code>ScopedComponentExample</code> inside another component called <code>OverridingScopedComponentExample</code>, and you want the inner component to use different styles.</p>
66
+
<ol>
67
+
<li>Add a scoped CSS file for <code>OverridingScopedComponentExample</code>. Name it <code>OverridingScopedComponentExample.razor.css</code>, and place it in the same folder as the component.</li>
68
+
<li>Define the CSS rule with an outer selector, followed by <code>::deep</code>, ending with the scoped class you want to override. For example:</li>
69
+
</ol>
70
+
<prelanguage="css">.override ::deep .scoped
71
+
{
72
+
color: yellow;
73
+
background-color: red;
74
+
}
75
+
</pre>
76
+
<p>Here:</p>
77
+
<ul>
78
+
<li><code>.override</code> is the <strong>outer selector</strong>.</li>
79
+
<li><code>::deep</code> is the required syntax for overriding styles of nested components.</li>
80
+
<li><code>.scoped</code> is the scoped CSS class you want to override.</li>
81
+
</ul>
82
+
<olstart="3">
83
+
<li>Apply the outer selector in your markup:</li>
84
+
</ol>
85
+
<prelanguage="razor"><div class="override">
86
+
<ScopedComponentExample />
87
+
</div></pre>
88
+
<hrclass="my-4" />
89
+
<h1>Internal Styles</h1>
90
+
<p>While putting CSS in <code>app.css</code> or creating a scoped CSS file is better for long-term maintenance, sometimes testing things out during development requires a simpler approach. Internal styles are perfect for this scenario because they allow you to write minimal CSS directly alongside your component and remove it quickly when no longer needed.</p>
91
+
<p>Internal styles work by placing a <code><style></code> block directly inside your component, next to the elements it affects. For example:</p>
<p>This approach is quick and requires no additional boilerplate. However, it comes with notable disadvantages and should generally only be used in a development environment:</p>
101
+
<ol>
102
+
<li>Every time the component is rendered, it generates duplicated style code, making the site heavier than necessary.</li>
103
+
<li>
104
+
CSS rules can unintentionally override others, causing strange bugs such as:
105
+
<ul>
106
+
<li>A component not rendering correctly.</li>
107
+
<li>The UI breaking when a component is removed.</li>
108
+
</ul>
109
+
</li>
110
+
</ol>
111
+
<hrclass="my-4" />
112
+
<h1>External Styles</h1>
113
+
<p>External styles are a common technique that can help reduce the initial loading size of a website by grouping related CSS into a separate file and fetching it only when the component is rendered. The trade-off is a potential layout shift when the CSS file is being loaded.</p>
114
+
<p>In the component, you include a <code><link></code> tag that points to the external CSS file. For example:</p>
<li>Clear separation of concerns between HTML structure and presentation.</li>
120
+
<li>Reduced initial loading time by delaying CSS loading until it’s needed.</li>
121
+
</ul>
122
+
<p>However, developers should use this technique carefully, as it comes with drawbacks:</p>
123
+
<ol>
124
+
<li>Duplicated <code><link></code> tags may be generated when a component is rendered multiple times.</li>
125
+
<li>Layout shifts can occur if styles are applied too late during rendering.</li>
126
+
</ol>
127
+
<hrclass="my-4" />
128
+
<h1>Inline Styles</h1>
129
+
<p>When you need to apply something dynamic - such as changing text color based on a user's selection - the best approach is often to use inline styles. This technique applies styles directly to an element, giving them the highest priority.</p>
130
+
<p>For example, you can set the text color for a specific paragraph like this:</p>
0 commit comments