html - Bootstrap 中的自定义类 - 样式设计模式

Question

我有一个关于 .less 和 .css 文件的样式设计模式问题。

我正在使用 bootstrap 开发我的网页。可以说我在页面中有一个导航栏。导航栏有一个 h1 用于某些标题，使用 ul 用于菜单。 h1 和 ul 具有自定义样式。

我可以用两种方式来做，对吧。

我可以创建一个名为 .pagetitle 和 .main-menu 的类，并相应地定义样式。

// mystyle.less
.pagetitle { 
        font-size : 36px
}
.main-menu { 
   ....
}   

// mypage.html
<div class="nav navbar"> 
<h1 class="pagetitle"> BIG TITLE </h1> 
...
<ul class="main-menu">
...
</ul> 
</div>

或者，我根据元素和类的放置位置更改它们的默认行为。

// mystyle.less
.navbar { 
    .h1, h1 {
        font-size : 36px
    }
    ul { 
        ....
    }   
}

// mypage.html
<div class="nav navbar"> 
<h1> BIG TITLE </h1> 
    ...
<ul>
    ...
</ul> 
</div>

哪种方法更好，为什么？

Answer 1

无需为 h1 创建类。所做的只是用不必要的代码使您的 html 膨胀。此外，在您的第二个示例中，您似乎将 h1 称为一个类，而您不/不应该这样做。我会这样做。

.navbar h1 { 
   font-size: 36px;
}

.navbar ul {
    float: left;
}

希望这对您有所帮助!