css - 这是您构建 CSS 样式表的方式吗？

Question

撇开应该提供单个样式表还是多个样式表的问题不谈，假设您只发送一个样式表，您认为这是一种基本结构吗？

/* 结构 */

任何模板布局的东西都应该放在这里，比如页眉、页脚、正文等

/* 结构结束 */

/* 公共(public)组件*/

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

/* 公共(public)组件结束*/

/* 具体第1页 */

有些页面可能有特定的样式，可以放在此处。

/* 具体第1页结束 */

/* 具体第2页 */

如上

/* 具体第2页结束 */

/* 特定页面等 */

等等。

/* 具体页面等结束 */

Answer 1

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

/**************************** * 全局的 * ****************************/

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

/* 标题格式 */

/* 文本格式 */

/* 表单格式化 */

/* 表格格式 */

/* 等等 */

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

/* 所有的布局都在副标题下 */

/* 标题 */

/* 左侧边栏 */

/* 右侧边栏 */

/* 页脚 */

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

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

/* 主(水平)导航 */

/* 左侧导航 */

/* 右导航 */

/* 面包屑导航 */

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

/* 任何不同于通用格式的表格格式，如果有多个不同格式的表格，则使用子标题 */

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

/* 和表单一样处理 */

/**************************** * list * ****************************/

/* 与表单和表格相同 */

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

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

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

/* 等等 */

希望对您有所帮助。

不过，我通常不建议像那样在单行上书写，或者像 Adam 发布的链接中建议的那样，如果它们变长，它们将很难浏览。对于上面的示例，以这种方式输入它们会更快，因此我不必缩进每一行。

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

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

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