的CSS

Question

好的，一个非常快速的问题 - 这是应用css样式的最佳方法：

1 - 使用许多不同的类来应用该风格的不同部分，即class ='font-1 red-bkg border-1'等等。

或者

2 - 单独设置网站的各个部分

Answer 1

例如，你应该为font做些什么，将它变成body，背景颜色，字体颜色等......

body{font: Verdana 38px; color: #000; background: #fff;}

然后对于单个特征（例如边距，填充，边框等），它们应该按照每个类的方式定义。

.classname {
    margin: 0px 5px 10px 5px;
    padding: 10px 5px 10px 6px;
 }

它更易于维护，并使您的HTML不那么混乱。

我相信为共享类证明你应该拥有多个属性，否则你无法使用CSS的模块化。

即。这样的事情不是好主意：

.bold { font-weight: bold; }

Answer 2

单独设置网站的各个部分。另一种解决方案会将其背后的意图搞砸 - 将内容与造型分开。

Answer 3

好像你会喜欢这个读物，我当然这样做了：

http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/

Answer 4

您应该在逻辑上命名类，因为当您更改布局时，目前您的风格类似于

.bold .5px-brd .red.bg

然后将其更改为另一种颜色和样式将包括grep'ing整个应用程序代码以纠正css样式。

您可能会注意到

之类的方法

.bold .5px-brd .red.bg

这很好，而且不符合CSS的理念。

名称类似的类。胆大应该用作辅助风格。永远不要作为基本的建筑块。

Answer 5

http://jsfiddle.net/sheriffderek/RMfEn/

HTML

<section class='container blocks'>
    <h2>Blocks of content</h2>
    <div class='block highlight-theme'>
        <p>None of the styling should be done in the html.</p>
    </div>

    <div class='block base-theme'>
        <p>You can use modular classes to style common pieces of the layout and then modify them with more specific classes.</p>
    </div>

    <div class='block contrast-theme'>
       <p>So the stuff in this box could be a dark-theme with .contrast-theme or something</p>
    </div>
</section>

的CSS

.container, .block { /* structural elements */
    width: 100%;
    float; left;
    padding: .5rem;
    overflow: hidden; /* use a clear-fix instead */
}

/* mini themes /// mix and match */

.base-theme {
    background: lightgray;
    color: black;
}

.highlight-theme {
    background: yellow;
    color: red;
}

.contrast-theme {
    background: gray;
    color: white;
}

CSS最佳实践/新手问题

5 个答案:

HTML

的CSS