[分享]css不要直接写ul吗

CSS中不要直接写ul？ 在CSS编写中，很多人会直接使用ul标签，例如： html 菜单项1 菜单项2 菜单项3 然后通过CSS来控制ul的样式，例如： css ul { liststyle: ...

CSS中不要直接写ul？
在CSS编写中，很多人会直接使用ul标签，例如：

html
<ul>
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul> 

然后通过CSS来控制ul的样式，例如：

css
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
<br>
ul li {
  display: inline-block;
  padding: 5px 10px;
  background-color: #ccc;
  border-radius: 5px;
  margin-right: 10px;
} 

这样写确实可以快速实现一个菜单，但是，这种写法有一个缺点，那就是可重用性不够强，如果要在别的区域也要使用菜单，就需要再次将HTML结构和CSS样式复制一遍，这样增加了代码量同时也会出现维护困难的情况。
那么，如何避免这种情况呢？
我们可以使用类（class）来定义我们想要的样式，例如：

html
<ul class="menu">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul> 

css
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
<br>
.menu li {
  display: inline-block;
  padding: 5px 10px;
  background-color: #ccc;
  border-radius: 5px;
  margin-right: 10px;
} 

这样，在别的区域需要使用这种菜单时，只需要添加一个menu类就可以了，不需要再次复制HTML结构和CSS样式。

html
<div class="header">
  <ul class="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div> 

css
.header {
  background-color: #f5f5f5;
  padding: 10px;
}
<br>
/* 上面的.menu类已经定义，这里不需要再定义 */ 

总之，在CSS编写中，避免直接写ul标签，而是使用类来定义样式，这样可以提升代码的可重用性和维护性，同时也符合语义化的规范。