管理CSS爆炸 [英] Managing CSS Explosion

问题描述

对于我正在开发的网站，我一直严重依赖CSS。现在，所有的CSS样式都在每个标签的基础上应用，所以现在我试图将它移动到更多的外部样式，以帮助任何未来的变化。

但现在的问题是，我注意到我得到一个CSS爆炸。

我使用大量的 div

/ code>标签，从一个巨大的基于表的网站。所以我得到了很多CSS选择器，看起来像这样：

  div.title { 
 background-color：blue; 
 color：white; 
 text-align：center; 
} 
 
 div.footer {
 / *这里的样式* / 
} 
 
 div.body {
 / *样式这里* / 
} 
 
 / *还有更多* / 
  

这还不算太糟糕，但由于我是一个初学者，我想知道是否可以建议如何最好地组织CSS文件的各个部分。我不想为我的网站上的每个元素都有一个单独的CSS属性，我总是希望CSS文件相当直观，易于阅读。

我的最终目标是使其易于使用CSS文件，并展示其提高Web开发速度的能力。这样，其他可能在未来在这个网站上工作的人也将进入使用良好的编码实践的做法，而不是像我一样去选择它。

解决方案

这是一个很好的问题。在我看来，CSS文件往往会失控一段时间 - 特别是，但不仅是，当在一个团队工作。

以下是我的规则

• 提前重构，经常重构。经常清理CSS文件，将同一类的多个定义融合在一起。




• 在修正错误期间添加CSS时，请留下评论，确保框在IE< 7中左对齐）




• 避免冗余，例如在 .classname 和 .classname：hover 中定义相同的内容。




• 使用注释 / ** Head ** / 建立清晰的结构。




• 使用有助于维持固定样式的漂亮工具。我使用 Polystyle ，我非常高兴（费用为$ 15，但钱花了）。我确定也有免费的（更新：像例如 代码美化 基于 CSS Tidy （一种开源工具） ）




• 构建敏感的类。




• 使用语义，避免DIV汤 - 使用< ul> s。




• 将所有内容定义为尽可能低的级别（例如正文中的默认字体系列，颜色和大小）并在可能的地方使用继承




• 如果你有非常复杂的CSS，预编译器帮助。由于同样的原因，我计划很快调查 xCSS 。还有其他几个。




• 如果在团队中工作，也强调CSS文件的质量和标准的必要性。




• 如果在一个团队中工作， 考虑使用版本控制。它使事情更容易跟踪，和编辑冲突，更容易解决。




• 不要使用！important

  code>。不仅因为IE = 7不能处理它。在一个复杂的结构中，使用！important通常很容易改变一个不能找到源代码的行为，但是对于长期维护来说却是中毒
  。




构建敏感的类

敏感的类。

我首先应用全局设置：

  body {font-family ：.... font-size ... color ...} 
a {text-decoration：none; } 
  

然后，我确定网页布局的主要部分。顶部区域，菜单，内容和页脚。 如果我写了好的标记，这些区域将与HTML结构相同。

然后，我开始构建CSS类，尽可能接近并分组相关的类。

  div.content ul.table_of_contents 
 div。 content ul.table_of_contents li 
 div.content ul.table_of_contents li h1 
 div.content ul.table_of_contents li h2 
 div.content ul.table_of_contents li span.pagenumber 
  

将整个CSS结构视为一个树 。

例如，假设你有三个级别的导航，这些级别的数量越少越好，菜单。
这三个菜单看起来不同，但它们也具有一些特性。例如，它们都是< ul> ，它们都具有相同的字体大小，并且项目都是彼此相邻的（而不是默认呈现 ul ）。此外，没有菜单有任何项目符号（ list-style-type ）。

将特征转换为菜单：

  div.navi ul.menu {display：...; list-style-type：none; list-style-image：none; } 
 div.navi ul.menu li {float：left} 
  

三个菜单中的每一个的具体特性。 1级为40像素高; //stackoverflow.com/questions/312022/use-double-classes-in-ie6-css\">有多个类的问题 ，因此本示例使用 id 。

  div.navi ul.menu＃level1 {height：40px; } 
 div.navi ul.menu＃level2 {height：20px; } 
 div.navi ul.menu＃level3 {height：16px; } 
  

菜单的标记将如下所示：

 < ul id =level1class =menu>< li> ......< / li>< / ul> 
< ul id =level2class =menu>< li> ......< / li>< / ul> 
< ul id =level3class =menu>< li> ......< / li>< / ul> 
  

如果你在页面上有语义上相似的元素 - 就像这三个菜单 - 首先把它们放进班级;

其他HTML提示。如果您需要支持Internet Explorer 6，

如果您将这些语义添加到HTML输出中，设计人员可以稍后使用纯CSS自定义网站和/是一个很大的优点和节省时间。

• 唯一类：< body class ='contactpage'> 这使得很容易向样式表添加页面特定的调整：

    body.contactpage div.container ul.mainmenu li {color：green} 
    

  / li>
  

• 自动创建菜单时，添加尽可能多的CSS上下文以允许以后扩展样式。例如：

   < ul class =mainmenu> 
  < li class =item_first item_active item_1>第一项< / li> 
  < li class =item_2>第二项< / li> 
  < li class =item_3>第三项< / li> 
  < li class =item_last item_4>第四项< / li> 
  < / ul> 
    

  这样，每个菜单项都可以根据语义上下文访问样式：或列表中的最后一个项目;无论是当前活动项目;

  ，表示此分配对象的分配方式为：

如上例所示的多个类别 在IE6中无法正常工作 。有一个 解决方法 使IE6能够处理有多个类;我没有尝试过，但看起来很有前途，来自爱德华兹。在此之前，您必须设置对您最重要的类（项目编号，活动或第一/最后）或使用ID。 （booo IE6！）

I have been heavily relying on CSS for a website that I am working on. Right now, all the CSS styles are being applied on a per tag basis, and so now I am trying to move it to more of an external styling to help with any future changes.

But now the problem is that I have noticed I am getting a "CSS Explosion". It is becoming difficult for me to decide how to best organize and abstract data within the CSS file.

I am using a large number of div tags within the website, moving from a heavily table-based website. So I'm getting a lot of CSS selectors that look like this:

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

It's not too bad yet, but as I am a beginner, I was wondering if recommendations could be made on how best to organize the various parts of a CSS file. I don't want to have a separate CSS attribute for every element on my website, and I always want the CSS file to be fairly intuitive and easy to read.

My ultimate goal is to make it easy to use the CSS files and demonstrate their power to increase the speed of web development. This way, other individuals that may work on this site in the future will also get into the practice of using good coding practices, rather than having to pick it up the way I did.

解决方案

This is a very good question. Everywhere I look, CSS files tend to get out of control after a while - especially, but not only, when working in a team.

The following are the rules I am myself trying to adhere to (not that I always manage to.)

• Refactor early, refactor often. Frequently clean up CSS files, fuse together multiple definitions of the same class. Remove obsolete definitions immediately.

• When adding CSS during fixing bugs, leave a comment as to what the change does ("This is to make sure the box is left aligned in IE < 7")

• Avoid redundancies, e.g. defining the same thing in .classname and .classname:hover.

• Use comments /** Head **/ to build a clear structure.

• Use a prettifier tool that helps maintain a constant style. I use Polystyle, with which I'm quite happy (costs $15 but is money well spent). I'm sure there are free ones around as well (Update: like for example Code Beautifier based on CSS Tidy, an open-source tool I've not used myself yet but looks very interesting.)

• Build sensible classes. See below for a few notes on this.

• Use semantics, avoid DIV soup - use <ul>s for menus, for example.

• Define everything on as low a level as possible (e.g. a default font family, colour and size in the body) and use inherit where possible

• If you have very complex CSS, maybe a CSS pre-compiler helps. I'm planning to look into xCSS for the very same reason soon. There are several others around.

• If working in a team, highlight the necessity of quality and standards for CSS files as well. Everybody's big on coding standards in their programming language(s), but there is little awareness that this is necessary for CSS too.

• If working in a team, do consider using Version Control. It makes things that much easier to track, and editing conflicts that much easier to solve. It's really worth it, even if you're "just" into HTML and CSS.

• Do not work with !important. Not only because IE =< 7 can't deal with it. In a complex structure, the use of !important is often tempting to change a behaviour whose source can't be found, but it's poison for long-term maintenance.

Building sensible classes

This is how I like to build sensible classes.

I apply global settings first:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

Then, I identify the main sections of the page's layout - e.g. the top area, the menu, the content, and the footer. If I wrote good markup, these areas will be identical with the HTML structure.

Then, I start building CSS classes, specifying as much ancestry as possible and sensible, and grouping related classes as closely as possible.

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

Think of the whole CSS structure as a tree with increasingly specific definitions the further away from the root you are. You want to keep the number of classes as low as possible, and you want to repeat yourself as seldom as possible.

For example, let's say you have three levels of navigational menus. These three menus look different, but they also share certain characteristics. For example, they are all <ul>, they all have the same font size, and the items are all next to each other (as opposed to the default rendering of an ul). Also, none of the menus has any bullet points (list-style-type).

First, define the common characteristics into a class named menu:

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

then, define the specific characteristics of each of the three menus. Level 1 is 40 pixels tall; levels 2 and 3 20 pixels.

Note: you could also use multiple classes for this but Internet Explorer 6 has problems with multiple classes, so this example uses ids.

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

The markup for the menu will look like this:

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

If you have semantically similar elements on the page - like these three menus - try to work out the commonalities first and put them into a class; then, work out the specific properties and apply them to classes or, if you have to support Internet Explorer 6, ID's.

Miscellaneous HTML tips

If you add these semantics into your HTML output, designers can later customize the look of web sites and/or apps using pure CSS, which is a great advantage and time-saver.

• If possible, give every page's body a unique class: <body class='contactpage'> this makes it very easy to add page-specific tweaks to the style sheet:

  body.contactpage div.container ul.mainmenu li { color: green }
  

• When building menus automatically, add as much CSS context as possible to allow extensive styling later. For example:

  <ul class="mainmenu">
   <li class="item_first item_active item_1"> First item </li> 
   <li class="item_2"> Second item </li> 
   <li class="item_3"> Third item </li> 
   <li class="item_last item_4"> Fourth item </li> 
  </ul>
  

  This way, every menu item can be accessed for styling according to its semantic context: Whether it's the first or last item in the list; Whether it's the currently active item; and by number.

Note that this assigning of multiple classes as outlined in the example above does not work properly in IE6. There is a workaround to make IE6 able to deal with multiple classes; I haven't tried it yet but looks very promising, coming from Dean Edwards. Until then, you will have to set the class that is most important to you (item number, active or first/last) or resort to using IDs. (booo IE6!)

这篇关于管理CSS爆炸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！