我的CSS是否正确?
我正在为我的网站制作一组按钮,而且我需要一些专业见解。我的CSS是否正确?
为了减少CSS膨胀,我想子类化我的按钮不同的颜色,ex .button.blue。
未来会出现以下问题吗? (假设我不做一个只有.blue的类) 我必须使用类似.button.button-blue的东西吗?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
你想在你那里与多类将正常工作假设是什么他们像这样工作:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
谢谢,这真的让我想到了......上面我的代码的真正意义在于,如果另一个开发者创建.blue类,它会破坏整个网站。 .btn-blue只能包含在“模块”中。 – SkinnyG33k 2012-02-09 15:38:28
没错。如果创建独立的.blue,肯定会导致一些问题。 – 2012-02-09 15:39:27
像.button.blue选择器实际上选择用于与具有这两个“蓝色”和“键”作为类,而不是一个称为.button.blue类的元件。见http://www.w3.org/TR/CSS21/selector.html#class-html。
您可以使用您列出的.button.blue样式规则,但您需要重新排列HTML,以便您有类似<button type="button" class="button blue"/>
的内容。然而,你并不需要有一个按钮类,因为它是一个按钮(或者<input type="submit">
等)就足够在你的选择器中使用了。你可以编写一个简单的CSS规则button.blue, input[type=submit].blue{}
很酷,我没有考虑添加输入[type = submit]就像那样=) – SkinnyG33k 2012-02-09 15:39:46
看起来像button.blue
就足够了。
两者之间的唯一区别是如果您使用<button class="button blue">
或<button class="button button-blue">
。如果添加的蓝色类每个人
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
当然:
你甚至不需要复制画蓝色......你可以做这样的事情。 (<div class="header blue">
和<button class="button blue">
)
联合应用要主题颜色的类。
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}
有没有在CSS * *子类的概念。你可以*添加*额外的类。 – 2012-02-09 15:04:45