css写的思路很乱 |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，不仅可读性好，而且可维护性强，修改起来也比较方便。