最近在學習CSS，發現自己寫的思路很亂。每次寫樣式時，總是想到什么就寫什么，沒有一個清晰的思路和組織結構。導致代碼難以維護和修改。

/* 以下是一段無組織的CSS代碼 */
h1{
font-size: 30px;
color: blue;
margin: 50px 0;
text-align: center;
}
.nav{
background-color: #333;
color: #fff;
padding: 10px;
}
.nav li{
display: inline-block;
margin-right: 20px;
padding: 5px;
border: 1px solid #fff;
}
.nav a{
color: #fff;
text-decoration: none;
}
.box{
width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px #ccc;
}
.box h2{
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
.box p{
font-size: 16px;
line-height: 1.5;
text-indent: 2em;
margin-bottom: 20px;
}
.box img{
max-width: 100%;
}

以上是一段典型的無組織CSS代碼，除了基本的選擇器和屬性外，沒有任何可讀性和可維護性。比如，我們看到.nav li中，還有一個padding屬性，是否可以提取出來，變成.nav中的通用屬性呢？

為了改善這種情況，我們可以先將樣式分成幾個大的塊，比如header, nav, content等，每個塊再細分成若干個小的塊。然后，按照塊的順序，依次書寫。這樣，代碼可讀性和可維護性都會有所提高。

/* 以下是按照塊書寫的CSS代碼 */
/* header塊 */
header{
text-align: center;
margin: 50px 0;
}
header h1{
font-size: 30px;
color: blue;
}
/* nav塊 */
nav{
background-color: #333;
color: #fff;
padding: 10px;
}
nav li{
display: inline-block;
margin-right: 20px;
border: 1px solid #fff;
padding: 5px;
}
nav a{
color: #fff;
text-decoration: none;
}
/* content塊 */
.container{
width: 600px;
margin: 0 auto;
}
.box{
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px #ccc;
}
.box h2{
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
.box p{
font-size: 16px;
line-height: 1.5;
text-indent: 2em;
margin-bottom: 20px;
}
.box img{
max-width: 100%;
}

通過以上修改，我們可以清晰地看到每個塊的樣式，而且樣式之間不會相互干擾。這樣寫出的CSS，不僅可讀性好，而且可維護性強，修改起來也比較方便。