这与我的结构类似,但是,我发现使用子标题是最好的方法,所以我使用这种结构:
/************************* * 全球的 * ********************* ****/
/*所有常见的东西都放在适当的子标题下*/
/* 标题格式 */
/* 文本格式 */
/* 表格格式 */
/* 表格格式 */
/* 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 的结构放在顶部,然后是任何其他格式,例如字体等。使浏览变得非常快速和清晰。