2

抛开应该提供单个样式表还是多个样式表的问题不谈,假设您只发送一个样式表,您认为这是什么基本结构?

/* 结构 */

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

/* 结构结束 */

/* 通用组件*/

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

/* 常用组件结束*/

/* 特定页面 1 */

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

/* 具体第 1 页结束 */

/* 特定页面 2 */

如上

/* 具体的第 2 页结束 */

/* 特定页面等 */

等等。

/* 特定页面等结束 */

4

5 回答 5

9

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

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

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

/* 标题格式 */

/* 文本格式 */

/* 表格格式 */

/* 表格格式 */

/* ETC */

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

/* 所有布局的东西都放在小标题下 */

/* 标题 */

/* 左侧边栏 */

/* 右侧边栏 */

/* 页脚 */

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

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

/* 主(水平)导航 */

/* 左侧导航 */

/* 右导航 */

/* 面包屑导航 */

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

/* 任何与普通格式不同的表单格式,如果有多个不同格式的表单,则使用子标题 */

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

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

/************************* * 列表 * ********************* ****/

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

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

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

/************************* * 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 */

希望有帮助。

不过,我通常不建议像那样写在一行上,或者像亚当发布的链接中建议的那样,如果它们太长,它们很难略读。对于上面的示例,以这种方式键入它们会更快,因此我不必缩进每一行。

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

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

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

于 2008-10-08T15:15:39.507 回答
1

任何对你有意义的东西都足够好。坦率地说,当其他人在你的样式表中寻找某些东西时——或者当你来寻找某些东西时——他们不会试图弄清楚你的组织结构是什么。他们只是要搜索他们需要查看的任何类或元素。因此,只要您通常将相关的东西放在一起,并用@Matt 建议的评论将它们分开,就可以了。

事实是,即使有一个经过深思熟虑的组织结构——就像一个经过深思熟虑的文件系统一样——它的去向并不总是很明显。所以你最好还是有点理智,不要花很多时间来整理东西,而是依靠搜索工具来找到你需要的东西。

于 2008-10-08T18:27:24.050 回答
1

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

  • 重启
  • 结构体
  • html_tags
  • 导航
  • 具体部分
  • 错误消息 - 这是我的最后一部分
于 2008-10-09T08:26:43.543 回答
0

你提出的结构正是我使用的。但是,在我看来,它仍然变得过于复杂,新规则的出现和相互覆盖......也许我应该尝试坚持亚当链接的主题中建议的解决方案。

于 2008-10-08T12:50:16.633 回答
0

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

于 2008-10-08T15:30:17.247 回答