firefox推荐与个人理解的css书写顺序

当我们编写CSS样式时，书写顺序很重要，它直接关系到样式的继承和优先级。为了提高CSS代码可读性，方便后期维护，我们可以采用firefox推荐的CSS书写顺序。

1. Firefox 推荐的 CSS书写顺序

根据FireFox推荐的CSS书写顺序，我们优先编写如下部分的样式代码：

1. 布局定位属性（display、position、float、clear等）
2. 自身属性（width、height、margin、padding、border等）
3. 文本属性（font、line-height、text-align等）
4. 背景属性（background、border等）
5. 其它属性（cursor、overflow等）
6. 伪类样式（hover、visited、active等）
7. 子元素样式
8. 其它

这样的书写顺序，将有助于代码组织的清晰和优化。

2. CSS书写顺序示例

示例一：按钮样式

下面是一个应用了firefox 推荐的CSS书写顺序的按钮样式。

.button{
  /* 布局定位属性 */
  display: inline-block;
  position: relative;
  margin: 10px 0;
  padding: 8px 20px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  /* 自身属性 */
  background-color: #3498db;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;

  /* 背景属性 */
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  background-repeat: repeat-x;
  background-position: -1px -1px;

  /* 其它属性 */
  cursor: pointer;
}

.button:hover{
  /* 伪类样式 */
  background-color: #2980b9;
}

我们可以看到，这个 button 样式按照优先级分为了不同的部分，排列清晰。在我们需要调整样式的时候，轻松找到相应的部分，并进行修改。

示例二：导航样式

下面是一个应用CSS书写顺序的导航样式。

.nav{
  /* 布局定位属性 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 30px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);

  /* 自身属性 */
  font-size: 16px;
  color: #333;

  /* 伪类样式 */
  a:hover{
    color: #3498db;
  }
}

.nav .logo{
  /* 自身属性 */
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
}

.nav .menu{
  /* 布局定位属性 */
  display: flex;

}

.nav .menu a{
  /* 布局定位属性 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.nav .menu .active{
  /* 伪类样式 */
  color: #3498db;
  border-bottom: 2px solid #3498db;
}

可以看出，这个导航样式按照优先级进行了排列，排列清晰明了，便于修改和维护。

通过这两个示例的分析，我们可以看到，采用firefox推荐的CSS书写顺序能够有效的提高代码可读性，方便代码的维护和后期扩展。