这是你如何构建CSS样式表?

时间:2008-10-08 12:42:31

标签: css stylesheet markup

撇开是否应该提供单个或多个样式表的问题,假设您只发送一个样式表,您认为这是一个基本结构?

/ *结构* /

任何模板布局都应该放在这里,所以页眉,页脚,正文等等。

/ *结构结束* /

/ * Common Components * /

重复元素,例如注册表单,列表等

/ * Common Components End * /

/ *具体的第1页* /

有些页面可能会有特定的样式,可以在这里找到。

/ *具体Page 1结束* /

/ *具体的第2页* /

如上所述

/ *具体Page 2结束* /

/ *特定页面等* /

等等。

/ *特定页面等结束* /

5 个答案:

答案 0 :(得分:9)

这与我的结构类似,但是,我发现使用子标题是最好的方法,所以我使用这个结构:

/ ********  *全球*  ******** /

/ *所有常见的东西都在适当的子标题* /

/ *标题格式* /

/ *文字格式* /

/ *表格格式* /

/ *表格式* /

/ * etc * /

/ ********  *布局*  ******** /

/ *所有布局都在子标题* /

/ *标题* /

/ *左侧边栏* /

/ *右侧边栏* /

/ *页脚* /

/ ********  *导航*  ******** /

/ *我将导航与布局分开,因为在他们的小标题下可以有许多导航点* /

/ *主要(水平)导航* /

/ *左导航* /

/ *右导航* /

/ *面包屑导航* /

/ ********  * 形式 *  ******** /

/ *任何格式与常见格式不同,如果有多种格式不同的格式,则使用子标题* /

/ ********  *表格*  ******** /

/ *与表格相同的交易* /

/ ********  * LISTS *  ******** /

/ *与表格和表格相同的交易* /

/ ********  *内容*  ******** /

/ *特定页面的任何特定格式,按页面的子标题分组,与表格,表格和列表相同* /

/ ********  * CSS支持*  ******** /

/ *这适用于任何特殊格式,可以应用于任何页面上的任何元素,并使其覆盖该项目的常规格式。例如,这可能包含:* /

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/ * etc * /

希望有所帮助。

我一般不建议像这样写一行,或者像Adam发布的链接中建议的那样,如果他们变长,他们就很难略过。对于上面的例子,以这种方式输入它只是更快,所以我不必缩进每一行。

对于格式化,我会推荐这种结构:

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

依此类推,我将类或ID的结构放在顶部,然后是任何其他格式,如下面的字体等。使其快速清晰地浏览。

答案 1 :(得分:1)

对你来说任何有意义的事情都是足够好的。坦率地说,当其他人来到您的样式表中寻找某些东西时 - 或者当您为此寻找某些东西时 - 他们不会试图弄清楚您的组织结构是什么。他们只是要搜索他们需要看到的任何类或元素。因此,只要您通常保留与之相关的内容,并通过@Matt建议的评论来解决问题,您就可以了。

事实上,即使有一个经过深思熟虑的组织结构 - 就像一个经过深思熟虑的文件系统 - 它并不总是显而易见的;所以你最好只是有点明智,不要花很多时间来保持组织有序,并依靠搜索工具找到你需要的东西。

答案 2 :(得分:1)

我以与你类似的方式组织我的CSS但我确实从重置部分开始。主要思想是从一般到具体。所以这就是:

  • 重置
  • 结构
  • html_tags
  • 导航
  • 具体部分
  • 错误消息 - 这是我的上一节

答案 3 :(得分:0)

您呈现的结构正是我使用的结构。然而,在我看来,它仍然过于复杂,新规则显示出来并相互覆盖......也许我应该尝试坚持与Adam相关联的主题中建议的解决方案。

答案 4 :(得分:0)

似乎每次我创建一个新的css文件时,我都会找到一种新的方法来组织它。而且他们比以前更好。