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

我有关于.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>

哪种方法更好，为什么？

来源

2016-05-17 raj

都是好的，除非，直到你没有多余的CSS规则。就像拥有两套不同类的规则一样，它不仅仅是浏览器渲染的额外麻烦。如果可以的话，总是尝试使用现有的类。文件大小问题。因此css文件总是最小化生产。我没有用过，但我用过scss。如果你知道如何使用它，scss会更好。 –

没有必要为h1创建一个类。所有这一切都是用不必要的代码膨胀你的HTML。另外，在你的第二个例子中，你将h1称为一个类，并且你不应该/不应该这样做。我会这样做。

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

.navbar ul { 
    float: left; 
}

希望这会有所帮助！

来源

2016-05-17 19:15:52 AndrewTheGeek

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

回答

相关问题