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

【问题标题】：Custom classes in bootstrap - Styling Design pattern引导程序中的自定义类 - 样式设计模式
【发布时间】：2016-09-14 00:47:42
【问题描述】：

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

我正在使用引导程序来开发我的网页。假设我在页面中有一个导航栏。导航栏有一个 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>

哪种方法更好，为什么？

【问题讨论】：

两者都很好，除非你没有多余的 css 规则。就像不希望有两个具有相同规则集的不同类一样，它只是浏览器渲染的额外痛苦。如果可以，请始终尝试使用现有的课程。文件大小很重要。因此 css 文件总是被最小化以用于生产。我没有少用，但我用过scss。如果你知道如何使用，scss 比 css 更好。

标签： html css twitter-bootstrap less

【解决方案1】：

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

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

.navbar ul {
    float: left;
}

希望这会有所帮助！

【讨论】：