CSS'架构'的方法

Question

CSS'架构'的方法

如何建立一般元素样式,嵌套元素样式和分类元素样式的CSS"模式"或层次结构.对于像我这样的排名新手,我看到的样式表中的信息量是完全压倒性的.与内联样式属性相比,创建一个良好分解的样式表或工作表时会遵循什么过程？

Answer 1

我非常喜欢用他们的内容或内容类型来命名我的CSS类,例如包含导航"tabs"的<ul>会有class ="tabs".包含日期的标题可以是class ="date",或者包含前10个列表的有序列表可以具有class ="chart".类似地,对于ID,可以给页面页脚id ="footer"或网站id ="mainLogo"的标识.我发现它不仅使类易于记忆,而且还鼓励CSS的正确级联.像ol.chart {font-weight:bold; color:blue;} #footer ol.chart {color:green;}非常易读,并考虑到CSS选择器如何通过更具体来增加权重.

适当的缩进也是一个很大的帮助.除非您想重构HTML模板,否则您的CSS可能会增长很多,因此您需要在网站中添加新的部分或想要发布新类型的内容.无论你怎么努力,你都不可避免地要添加一些你在原始模式中没有预料到的新规则(或例外).Indeting将允许您更快地扫描大型CSS文件.我个人的偏好是缩进选择器的具体和/或嵌套方式,如下所示:

    ul.tabs {
    list-style-type: none;
    }
        ul.tabs li {
        float: left;
        }
            ul.tabs li img {
            border: none;
            }

Run Code Online (Sandbox Code Playgroud)

这样,"父"总是在左边最远,因此文本被父容器分解成块.我也想将样式表分成几个部分; 首先是HTML元素的所有选择器.我认为它们非常通用,它们应该首先出现.在这里我把"body {font-size:77%;}"和"a {color:#FFCC00;}"等等.之后我会把选择器放到页面的主框架部分,例如"ul #mainMenu { float:left;}"和"div#footer {height:4em;}".然后是常见的对象类,"td.price {text-align:right;}",最后是".clear {clear:both;}"等额外的小位.现在,这就是我喜欢做的事情 - 我确信有更好的方法,但它对我有用.

最后,一些提示:

充分利用级联,不要"过度".如果您提供<ul> class ="textNav",那么您可以访问其<li>及其子项,而无需添加任何其他类分配.ul.textNav li a:hover {}

不要害怕在单个对象上使用多个类.这是完全有效的,非常有用.然后,您可以控制来自多个轴的对象组的CSS.同时为对象提供ID还会添加第三个轴.例如:

<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}

div.wide {
width: 15em; 
}

div.narrow {
width: 8em; 
}

div#oddOneOut {
float: right;
}
</style>

<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>

Run Code Online (Sandbox Code Playgroud)

为您的文档<body>标记(或ID,因为应该只有一个...)提供一个类,可以为单个页面启用一些漂亮的覆盖,例如为您当前所在页面的菜单项设置hilighting或者删除该页面登录页面上的冗余第二个登录表单,全部仅使用CSS."body.signIn div#mainMenu form.signIn {display:none;}"

我希望你至少找到我的一些实用工具,祝你项目顺利!

归档时间：	16 年，11 月前
查看次数：	3145 次
最近记录：	16 年，10 月前