我們在開發網站或者應用的時候，通常都會使用各種組件來實現不同的功能。而這些組件每一個都會有自己的 CSS，這些 CSS 可能不止涉及到這個組件本身，也有可能影響到其他組件的樣式。那么有沒有一種方法，我們能夠單獨提取某一個組件的 CSS，而不會影響其他組件的樣式呢？ 其實，可以通過 Chrome 的開發者工具來實現這一目標。在 Chrome 瀏覽器的開發者工具中，我們可以看到一個叫做 Styles 的面板，它顯示了當前頁面上所有元素的樣式。我們可以通過點擊這個面板，來查看當前選中元素的樣式，并且可以單獨提取這些 CSS。 下面以一個例子來說明具體的操作步驟。假設我們的網站有一個叫做 Button 的交互組件，我們需要單獨提取這個組件的 CSS。 第一步，打開 Chrome 瀏覽器，并打開我們要提取 CSS 的頁面。 第二步，按下快捷鍵 Ctrl + Shift + I（Windows）或者 Cmd + Opt + I（Mac）來打開開發者工具。 第三步，點擊開發者工具頂部的 Elements 選項卡，然后使用工具欄工具選取要提取的組件，這里以 button 元素為例。 第四步，右側的 Styles 面板中會呈現出該組件的樣式。我們可以看到列表中的樣式名稱旁邊有一個復選框。 第五步，勾選需要提取的 CSS 樣式名稱旁的復選框。例如，我們只需要提取該組件的樣式中的 font-size 和 background-color。我們勾選這兩個樣式的復選框，然后右擊這兩個樣式名稱，選擇 Copy Rule（復制規則），然后再選擇 Copy Rule（僅選擇此樣式）。 第六步，打開我們要存放這些 CSS 的文件，在該文件中，開頭添加一個類名并以大括號括起來。例如，我們將該組件的樣式存儲在 button.css 文件中，該文件內容如下：

.button {
font-size: 14px;
background-color: #eee;
}

這樣，我們就成功地提取出了該組件的樣式，并且可以無需影響其他組件的樣式來使用該組件的 CSS。