CSS 'schema' 操作方法

Question

如何建立通用元素样式、嵌套元素样式和分类元素样式的 CSS“架构”或层次结构。对于像我这样的等级新手，我查看的样式表中的信息量完全是压倒性的。与内联样式属性相比，在创建一个或多个结构良好的样式表时遵循什么过程？

Answer 1

我非常喜欢通过内容或内容类型来命名我的 CSS 类，例如包含导航“选项卡”的

将具有 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 选择器如何通过更具体来增加权重。

适当的缩进也是一个很大的帮助。您的 CSS 可能会增长很多，除非您每次向站点添加新部分或想要发布新类型的内容时都想重构 HTML 模板。无论您多么努力地尝试，您都不可避免地需要添加一些您在原始模式中没有预料到的新规则(或异常(exception))。 Indeting 可以让你更快地扫描一个大的 CSS 文件。我个人的偏好是缩进选择器的具体程度和/或嵌套程度，如下所示:

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

这样“父”总是在最左边，所以文本被父容器分解成 block 。我还喜欢将样式表分成几个部分；首先是 HTML 元素的所有选择器。我认为这些非常通用，所以它们应该放在第一位。在这里，我放置了“body { font-size: 77%; }”和“a { color: #FFCC00; }”等。之后，我将为页面的主要框架部分放置选择器，例如“ul#mainMenu { float :左；}”和“div#footer {高度:4em；}”。然后是常见的对象类，“td.price { text-align: right; }”，最后是额外的小部分，如“.clear { clear: both; }”。这就是我喜欢的方式 - 我相信有更好的方法，但它对我有用。

最后，有两个小提示:

1. 充分利用级联，不要“过度分类”。如果你给一个
   class="textNav"那么你可以访问它的
   • 和他们的 child ，而不需要添加任何额外的类分配。 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>
     

   • 为您的文档 标记(或 ID，因为应该只有一个...)赋予一个类，可以对单个页面启用一些漂亮的覆盖，例如突出显示您当前所在页面的菜单项在登录页面上打开或删除冗余的第二个登录表单，全部仅使用 CSS。 "body.signIn div#mainMenu form.signIn { display: none; }"

我希望至少我的一些漫谈对您有用，并希望您的元素取得最好的成绩!