外郭CSS是指被應用于整個網站的CSS樣式表。它可以使網站在整體外觀上保持一致性。外郭CSS通常包括文本字體、顏色、背景、邊框、布局、按鈕等等，它們是被多個頁面所共享的。

為了使代碼更加結構化且易于維護，外郭CSS通常被分為多個不同的文件。例如，網站的布局和導航可能包含在一個名為“layout.css”的文件中，而按鈕和表單元素則可能包含在名為“forms.css”的文件中。

/*文件名：layout.css*/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#header {
height: 80px;
background-color: #333;
color: #fff;
}
#main {
display: flex;
flex-wrap: wrap;
}
#sidebar {
width: 200px;
background-color: #eee;
}
#content {
flex-grow: 1;
padding: 20px;
}
/*文件名：forms.css*/
.button {
background-color: #f00;
color: #fff;
border: none;
padding: 5px 10px;
}

外郭CSS尤其適用于大型網站，因為它可以為網站的所有頁面提供一致的外觀和用戶體驗。它也可以使網站的維護更加容易，因為對于相同的樣式，只需在一個地方進行更改即可反映到多個頁面上。

然而，需要注意的是，當外郭CSS過于復雜或臃腫時，會導致網站加載速度變慢。因此，在編寫外郭CSS時，應該盡量保持簡潔和優化。