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

Question

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

/*结构体*/

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

/*结构结束*/

/*通用组件*/

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

/*公共组件结束*/

/*具体的第1页*/

有些页面可能会有特定的样式.

/*具体Page 1结束*/

/*具体的第2页*/

如上

/*具体Page 2结束*/

/*特定页面等*/

等等.

/*特定页面等结束*/

Answer 1

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

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

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

/*标题格式*/

/*文字格式*/

/*表格格式*/

/*表格格式*/

/*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的结构放在顶部,然后是任何其他格式,如下面的字体等.使其快速清晰地浏览.