Blazor中的CSS隔離

半野發表於2020-11-17

1.環境

VS 2019 16.9.0 Preview 1.0

.NET SDK 5.0.100

2.前言

CSS一旦生效,就會應用於全域性,所以很容易出現衝突。為了解決這個問題CSS隔離就順勢而生。Blazor誕生於2018年,至今為止已經2年多了,然而CSS隔離直至.NET 5出現才支援。

3.Razor元件間隔離

Razor元件間CSS隔離應當是使用最為簡單,也是使用最為方便的一種CSS隔離方式。實現Razor元件間CSS隔離非常簡單,只需要在元件所在的目錄下建立同名的“.razor.css”檔案即可——若資料夾A下存在名為“Component.razor”的元件,則只需要在資料夾A下建立“Component.razor.css”,即可實現為“Component.razor”元件設定單獨的樣式而不影響其他元件。

以預設模板為例,新建“Index.razor.css”,其內容如下:

h1 {
    font-size: 48px;
    font-weight: bold;
}

新建“Counter.razor.css”,其內容如下:

h1 {
    font-size: 16px;
    font-weight: 400;
}

其效果如下:

Razor元件間css隔離.min

上面的元件CSS檔案將會被生成為“專案名.styles.css”的檔案,在.NET 5中會被預設新增到“index.html”中,如上兩個CSS檔案會被編譯為如下結果:

/* /Pages/Counter.razor.rz.scp.css */
h1[b-g5zg69lne1] {
    font-size: 16px;
    font-weight: 400;
}
/* /Pages/Index.razor.rz.scp.css */
h1[b-f3rb2cn7la] {
    font-size: 48px;
    font-weight: bold;
}

在瀏覽器中檢視DOM元素,其結果如下:

<h1 b-f3rb2cn7la>Hello, world!</h1>

<h1 b-g5zg69lne1>Counter</h1>

也就是說,這兩個元件內的DOM被新增上了一個以“b-”開頭加10個隨機字元的屬性,這似乎與Angular相似(本人沒有用過,只是在瀏覽器中見到過類似的東西)。Blazor中的CSS隔離,似乎是通過隨機屬性名來實現的。那麼,通過id和class生成styles.css是什麼樣的呢?其同樣是通過隨機屬性名來實現的。例如,下面一段元件CSS檔案,

#zxyao-a {
    font-size: 48px;
    font-weight: bold;
}

#zxyao-b {
    font-size: 24px;
    font-weight: bold;
    background-color: #ff0000;
    padding: 16px;
}

.zxyao-cls {
    font-size: 24px;
    font-weight: bold;
    background-color: #000;
    color: #fff;
    padding: 16px;
}

其會被編譯成如下結果:

/* /Pages/Index.razor.rz.scp.css */
#zxyao-a[b-f3rb2cn7la] {
    font-size: 48px;
    font-weight: bold;
}

#zxyao-b[b-f3rb2cn7la] {
    font-size: 24px;
    font-weight: bold;
    background-color: #ff0000;
    padding: 16px;
}

.zxyao-cls[b-f3rb2cn7la] {
    font-size: 24px;
    font-weight: bold;
    background-color: #000;
    color: #fff;
    padding: 16px;
}

其結果如下:

Razor元件間css隔離2.min

也就是說,無論元件CSS檔案彙總如何寫,其都會轉化為CSS選擇器[隨機屬性]的形式。

4.CSS隔離的子元件支援

預設情況下,元件CSS僅僅只會應用都當前元件。例如,有以下兩個元件:

/* Index.razor */
<div class="my-text">
    Welcome to your new app.
    <CssIsolation.Components.Child />
</div>

/* Components/Child.razor */
<h1>Child</h1>
<div class="my-text">
    這是子元件
</div>

如果在”Index.razor.css“中樣式如下,

.my-text {
    border:2px solid #000;
    padding: 16px;
}

那麼其僅僅只對”Index.razor“起作用——border出現在最外層 Index 元件上。

子元件支援1.min

如果想讓其對本元件及其子元件”.my-text“元素起作用,可以使用”::deep“進行標記:

::deep .my-text {
    border:2px solid #000;
    padding: 16px;
}

子元件支援2.min

是不是發現,本元件的“.my-text”的border沒了。如前面所講,在這裡,::deep將會被隨機屬性所替代,也就是說,其編譯結果如下:

/* /Pages/Index.razor.rz.scp.css */
[b-f3rb2cn7la] .my-text {
    border:2px solid #000;
    padding: 16px;
}

其中,b-f3rb2cn7la是指本元件根元素,如圖所示。

子元件支援3.min

如果本組間沒有唯一的父元素標籤,則本組間中的每一個原生的HTML標籤都會有相同的隨機屬性,例如下面這個元件,其“div”與“h1”都會具有相同的隨機屬性,並會用改屬性替代“::deep”標識。“Child“元件中的元素將不會出現改隨機屬性。

<div class="my-text">
    Welcome to your new app.
</div>
<h1>
    Welcome to your new app.
</h1>
<CssIsolation.Components.Child />

一些元件庫會提供”Template“之類的元件,例如Ant Design Blazor,如果使用元件包裹所有的元素,如:

<AntDesign.Template>
    <div class="my-text">
        Welcome to your new app.
        <CssIsolation.Components.Child />
    </div>
</AntDesign.Template>

則Blazor會忽略外層的元件,直至在本組間內找到第一個原生的html元素為止,然後為該層所有原生的html元素新增上隨機屬性。

因此,當本元件的根元素與子元件需要設定樣式的元素CSS選擇器相同時,如果想要隔離樣式在本元件與子元件都生效,有兩種方式:一是為本組間和子元件同時寫CSS樣式,二是再用一個元素包裹所有的元件和元素,即換個根元素。

5.CSS前處理器的支援

很多時候,我們可能會使用SCSS或LESS來編寫樣式檔案,Blazor原生並不支援這些前處理器,我們可以使用任務執行程式資源管理器來在專案生成前編譯SCSS或LESS,或者是使用一些第三方的庫來支援,比如微軟官方所提到的Delegate.SassBuilder。我試用了下Delegate.SassBuilder,可能由於我的使用方式不對,CSS檔案的生成貌似是晚於專案生成的,無法在第一次生成程式時對CSS檔案進行編譯,接下來我將分享另外一種方式,即使用”任務執行程式資源管理器“。

這裡我簡單使用了下”node-sass“,直接通過命令列編譯,並未使用Gulp或Webpack之類的高階工具,解決方案步驟如下(node-sass的安裝這裡就不再講了):

  1. 下載並按照擴充套件”Command Task Runner“

SCSS編譯1.min

  1. 編寫SCSS檔案編譯命令列程式”scss.bat“

在專案的根目錄下新建scss.bat檔案:

SCSS編譯2.min

並寫入如下命令。

node-sass -r ./ -o ./ --source-map true --source-map-contents sass --output-style compressed

該命令將會編譯SCSS檔案,並生成壓縮後的CSS檔案和相應的source map檔案。

  1. 新增bat檔案到Task Runner

scss.bat檔案上右鍵,選擇”Add to Task Runner“選項。

SCSS編譯3.min

  1. 繫結執行任務

開啟檢視|其他視窗|任務執行程式資源管理器,在找到scss命令,然後右鍵,選擇繫結|生成前,繫結後可在右側繫結視窗下生成前下看到該命令。

SCSS編譯4.min

啟用任務執行程式後,會在解決方案目錄下生成”commands.json“檔案,我的此檔案內容如下,”-vs-binding“選項表明了任務繫結的執行時間的位置。

{
  "commands": {
    "scss": {
      "fileName": "cmd.exe",
      "workingDirectory": ".",
      "arguments": "/c scss.bat"
    }
  },
  "-vs-binding": { "BeforeBuild": [ "scss" ] }
}

接下來,只需要直接執行程式,即可以看下效果。

當然在SCSS中,我們也可以使用”::deep“標記,其也能正確的顯示,例如:

/* Pages/Index.razor.scss */
.my-text {
    border: 2px solid #000;
    padding: 16px;

    ::deep {
           .my-text {
            border: 2px solid #ff0000;
            background-color: #000;
            color: #fff;
        }
    }
}

/* Components/Child.razor.scss */
h1 {
    background-color: #efefef;
    font-weight: 700;
}

對應的Razor元件如下:

/* Pages/Index.razor */
@page "/"

<div class="my-text">
    Welcome to your new app.
    <CssIsolation.Components.Child />
</div>

/* Components/Child.razor */
<h1>Child</h1>
<div class="my-text">
    這是子元件
</div>

其執行效果如下:

SCSS編譯5.min

但是,個人感覺,在SCSS中使用”::deep“標記可能會有點混亂,建議要麼不使用”::deep“標記,要麼將”::deep“標記放在最外層,即如下的形式。

// 一些SCSS樣式程式碼
...


::deep {
	// 子元件的一些SCSS樣式程式碼
	...
}


// 一些SCSS樣式程式碼
...

6.修改隨機屬性標識

前面有提到,Blazor預設生成隨機屬性名的形式是以“b-”開頭加10個隨機字元,在微軟的官方文件中顯示這個是可以更改的。這對於自家的應用來說,是比較友好的,比如小米可以定義隨機屬性形式是以”mi“開頭,淘寶可以定義隨機屬性形式是以”tb“開頭等等。但是,此功能似乎還存在有問題,有人已經在Github提出了issue——Custom CSS Scope Identifier not working,希望Blazor能夠越來與完善。

相關文章