相同的类名称为不同的部分 [英] Same class names for different sections

查看:122
本文介绍了相同的类名称为不同的部分的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我为语法编写标记 - Corpora - 商业主题





并以这种方式将其划分为主要部分:

 < header> 
< div class =roof>< / div>
< nav>< / nav>
< div class =slides>< / div>
< / header>
< div class =content>
< div class =roof>< / div>
< aside>< / aside>
< div class =main>< / div>
< / div>
< footer>
< div class =roof>< / div>
< div class =credit>< / div>
< / footer>

可以使用相同的类名命名页面的不同部分 .roof


因此,考虑到我的 .roof 我有不同的风格写作

 < header> 
< div class =roofHeader>< / div>
< nav>< / nav>
< div class =slides>< / div>
< / header>
< div class =content>
< div class =roofContent>< / div>
< aside>< / aside>
< div class =main>< / div>
< / div>
< footer>
< div class =roofFooter>< / div>
< div class =credit>< / div>
< / footer>

解决方案 div>

在你想让它们以相同的方式对它们进行样式设置或使它们看起来相同的方式之前,没有问题用同样的名称命名不同的部分,就像在你的例子(屋顶)中一样。例如

 < header> 
< div class =roof>< / div>
< nav>< / nav>
< div class =slides>< / div>
< / header>
< div class =content>
< div class =roof>< / div>
< aside>< / aside>
< div class =main>< / div>


在上面的代码中,标题部分的div看起来与a相同div中的内容部分。



添加更多内容 - 如果您正在编写主题标记 - 最佳做法是 -


  1. 编写全局样式类


  2. 段样式类


例如: -
部分特定样式
.header {
width:100%;
font-family:Ariel;
font-size:12px;
}
全局样式
.float-right {
float:right;
}



现在.header类将用于标题部分,并且它将为我们提供maximun控制,以更改那里的任何内容并且不会影响除非我们在标记中的其他地方使用它。



.float-right类可以用于任何想要漂浮在右侧的html div或部分。


Im writing a markup for Corpora - A Business Theme



And have divided it into main sections in this way:

<header>
    <div class="roof"></div>
    <nav></nav>
    <div class="slides"></div>
</header>
<div class="content">
    <div class="roof"></div>
    <aside></aside>
    <div class="main"></div>
</div>
<footer>
    <div class="roof"></div>
    <div class="credit"></div>
</footer>

Is that okay to name different sections of the page with the same class name .roof?
[Edit] So, considering my .roof's have different styling I have to write

<header>
    <div class="roofHeader"></div>
    <nav></nav>
    <div class="slides"></div>
</header>
<div class="content">
    <div class="roofContent"></div>
    <aside></aside>
    <div class="main"></div>
</div>
<footer>
    <div class="roofFooter"></div>
    <div class="credit"></div>
</footer>

?

解决方案

No issues naming different section with same Name like in your example(roof) until you want them to style them the same way or make them look the same way .

for example

<header>
<div class="roof"></div>
<nav></nav>
<div class="slides"></div>
</header>
<div class="content">
<div class="roof"></div>
<aside></aside>
<div class="main"></div>

IN the above code the div in the header section will look exactly the same as a div in the content section .

To add more into this - If you are writing a markup for a theme - The best practice would be to -

  1. write global style classes

  2. section specific style classes

for example :- Section specific styling .header{ width:100%; font-family:Ariel; font-size:12px; } Global styling .float-right{ float:right; }

Now the .header class will be used specific for the header section .And it will provide us with maximun control to change anything in there and wont effect other section until and unless we use it somewhere else in our markup .

The .float-right class can be used anywhere in the html divs or section which you want to floated to the right side .

这篇关于相同的类名称为不同的部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆