撇开是否应该提供单个或多个样式表的问题,假设您只发送一个样式表,您认为这是一个基本结构?
/ *结构* /
任何模板布局都应该放在这里,所以页眉,页脚,正文等等。
/ *结构结束* /
/ * Common Components * /
重复元素,例如注册表单,列表等
/ * Common Components End * /
/ *具体的第1页* /
有些页面可能会有特定的样式,可以在这里找到。
/ *具体Page 1结束* /
/ *具体的第2页* /
如上所述
/ *具体Page 2结束* /
/ *特定页面等* /
等等。
/ *特定页面等结束* /
答案 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但我确实从重置部分开始。主要思想是从一般到具体。所以这就是:
答案 3 :(得分:0)
您呈现的结构正是我使用的结构。然而,在我看来,它仍然过于复杂,新规则显示出来并相互覆盖......也许我应该尝试坚持与Adam相关联的主题中建议的解决方案。
答案 4 :(得分:0)
似乎每次我创建一个新的css文件时,我都会找到一种新的方法来组织它。而且他们比以前更好。