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

来源

2012-02-09 SkinnyG33k

有没有在CSS * *子类的概念。你可以*添加*额外的类。 – 2012-02-09 15:04:45

你想在你那里与多类将正常工作假设是什么他们像这样工作：

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

来源

2012-02-09 15:00:21

谢谢，这真的让我想到了......上面我的代码的真正意义在于，如果另一个开发者创建.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{}

来源

2012-02-09 14:51:00 Grant

很酷，我没有考虑添加输入[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">）

来源

2012-02-09 14:55:12 ParPar

联合应用要主题颜色的类。

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 
}

来源

2012-02-09 15:08:34 falsarella

我的CSS是否正确？

回答

相关问题