CSS Naming

Each Blazor component I create will contain a CSS class name that is the same as the components name. A component named Modal will have a CSS class named Modal and one named Button will have a CSS class named Button.

In most CSS libraries like Bootstrap class names are all lower case. Component names must start with an uppercase letter. This is how we identify a component name from an HTML element. The old reason for using only lowercase CSS names was to avoid case errors. CSS is case sensitive, so a CSS class named modal is not the same as one named Modal.

In the previous lesson we described how you can split an application into multiple assemblies. Each of these assemblies has an associated CSS file that contains default CSS definitions for the components in the assembly. The main app must load these component assembly CSS files before the apps specific CSS so you can override the component CSS defaults in the app CSS file.

Blazor has the CSS isolation feature which allows you to isolate a components CSS, meaning it can’t be overridden in a CSS file. On the right we have the isolated CSS for the Modal component.

We did not isolate the background property we set its default in the component’s assembly CSS file.

.Modal {

   background-color: rgba(0, 0, 0, 0.51);

}

The application developer can override the value in an application CSS file that is loaded after the component assembly CSS file.

.Modal {

    background-color: rgba(0, 0, 0, 0.70);

}

Structural properties are often isolated but theme properties like color and font are in CSS files.

Component Parts

If you were to create a Modal component you might start with the following

@inherits ComponentBase;
<div class="Modal"  tabindex="-1" aria-modal="true" role="dialog">
    <div class="Modal-Dialog">
       <div class="Modal-Content">

You will notice we have added class names to the other HTML elements. This allows us to define CSS filters for the component parts. When you see a CSS filter in a CSS file with an uppercase name, you know it is a Component CSS filter. If the name is followed by a single dash, it is a component part filter.

Global Modifiers

If the CSS filter has all lower case in its name, then the filter is not associated with a component. CSS filter with all lowercase letters in its name is a global modifier that can be used in many different components. You could have a class named red-black that sets the background to red and the color to black. Which can be used on many different components.

Component Modifiers

CSS can completely alter the appearance of a component. It can make a button appear as a simple block or a slider. You don’t need to change the html or the code, just the css. So you can create a CSS filter to override the CSS for a ToggleButton to make it appear as a slider. The name of the filter would be ToggleButton—Slider. The fact it has two dashes after the component name means it is not a component part it is a CSS filter that is intended to be used on the component.

Modifiers are often passed to the components as a parameter.

<ToggleButton class=”ToggleButton--Slider”/>

The default layout of the button is as a simple box, but the CSS changes it into a slider. By default Blazor components do not accept parameters. This is covered in the next lesson.

Modal filter isolated in the Modal.razor.css file