引导程序中的自定义类 - 样式设计模式

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;
}

希望这有帮助！