这就是你构建 CSS 样式表的方式吗？
抛开是否应该提供单个或多个样式表的问题，假设您只发送一个样式表，您认为这是一个基本结构吗？
/* 结构 */
任何模板布局内容都应该放入此处，例如页眉、页脚、正文等。
/* 结构结束 */
/* 通用组件*/
重复元素，例如注册表单、列表等
/* 通用Components End*/
/* Specific Page 1 */
某些页面可能有特定的样式，将放在此处。
/* 特定页面 1 结束 */
/* 特定页面 2 */
同上
/* 特定页面 2 结束 */
/* 特定页面等 */
依此类推。
/* 具体页面等结束 */
Leaving aside the question of whether you should serve single or multiple stylesheets, assuming you're sending just one, what do you think of this as a basic structure?
/* Structure */
Any template layout stuff should be put into here, so header, footer, body etc.
/* Structure End */
/* Common Components*/
Repeated elements, such as signup forms, lists, etc.
/* Common Components End*/
/* Specific Page 1 */
Some pages might have specific styles, that would go here.
/* Specific Page 1 End */
/* Specific Page 2 */
As above
/* Specific Page 2 End */
/* Specific Page etc */
And so on.
/* Specific Page etc End */
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这与我的结构类似，但是，我发现使用子标题是最好的方法，所以我使用这个结构：
/******************** ******
* 全球的 *
*************************/
/* 所有常见内容都位于适当的子标题下 */
/* 标题格式 */
/*文本格式化 */
/* 表单格式化 */
/* 表格格式化 */
/* 等 */
/****************************
* 布局 *
*************************/
/* 所有布局内容都在子标题下 */
/* 标题 */
/* 左侧边栏 * /
/* 右侧边栏 */
/* 页脚 */
/****************************
* 导航 *
*************************/
/* 我将导航与布局分开，因为它们的子标题下可以有许多导航点 * /
/* 主（水平）导航 */
/* 左导航 */
/* 右导航 */
/* 面包屑导航 */
/********************* ****
* 形式 *
*************************/
/* 任何与普通格式不同的表单格式，如果有多个不同格式的表单，则使用子格式标题 */
/****************************
* 表格 *
*************************/
/* 与表单相同 */
/**************** **********
* 清单 *
*************************/
/* 与表单和表格相同 */
/************* **********
* 内容 *
*************************/
/* 特定页面的任何特定格式，按页面的子标题分组，就像表单、表格一样并列出*/
/****************************
* CSS 支持 *
*************************/
/* 这适用于任何特殊格式，可以应用于任何页面上的任何元素并使其覆盖常规格式该项目的格式。 例如，这可能有这样的内容： */
/* 等 */
希望有帮助。
我一般不建议像这样写在一行上，或者像 Adam 发布的链接中建议的那样，如果它们太长，就很难浏览。 对于上面的示例，以这种方式键入它们只是更快，因此我不必缩进每一行。
对于格式化，我会推荐这种结构：
依此类推，我将类或 ID 的结构放在顶部，然后将任何其他格式（例如字体等）放在下面。 使得浏览变得非常快速和清晰。
That's similar to how I structure mine, however, I find that using sub-headings is the best way to do it, so I use this structure:
/*************************
* GLOBAL *
*************************/
/* All of the common stuff goes here under the appropriate sub headings */
/* Heading formatting */
/* Text formatting */
/* Form formatting */
/* Table formatting */
/* etc */
/*************************
* LAYOUT *
*************************/
/* All the layout things go here under sub-headings */
/* Header */
/* Left Sidebar */
/* Right Sidebar */
/* Footer */
/*************************
* NAVIGATION *
*************************/
/* I put navigation separate to the layout as there can be a number of navigation points under their sub-headings */
/* Main (horizontal) Navigation */
/* Left Navigation */
/* Right Navigation */
/* Breadcrumb Navigation */
/*************************
* FORMS *
*************************/
/* Any form formatting that varies from the common formatting, if there are multiple differently formatted forms, then use sub-headings */
/*************************
* TABLES *
*************************/
/* Same deal as forms */
/*************************
* LISTS *
*************************/
/* Same deal as forms and tables */
/*************************
* CONTENT *
*************************/
/* Any specific formatting for particular pages, grouped by sub-headings for the page the same way as forms, tables and lists */
/*************************
* CSS SUPPORT *
*************************/
/* This is for any special formatting that can be applied to any element on any page and have it override the regular formatting for that item. For example, this might have things like: */
/* etc */
Hope that helps.
I generally don't recommend writing on a single line like that though, or like suggested in the link Adam posted, they get very difficult to skim over if they get long. For the examples above, it was just quicker to type them that way so I didn't have to indent every line.
For formatting I would recommend this structure:
And so on, I put the structure of the class or ID at the top, then any other formatting, like the font etc below that. Makes it very quick and clear to skim over.
任何对你有意义的事情就足够了。 坦率地说，当其他人在您的样式表中寻找某些内容时 - 或者当您来寻找某些内容时 - 他们不会试图弄清楚您的组织结构是什么。 他们只是要搜索他们需要查看的任何类或元素。 因此，只要您通常将相关的内容放在一起，并使用 @Matt 建议的评论将内容分开，就可以了。
事实是，即使有一个经过深思熟虑的组织结构（就像一个经过深思熟虑的归档系统一样），也并不总是很明显什么东西去了哪里； 因此，您最好保持理智，不要花费大量时间来使事情井井有条，并依靠搜索工具来找到您需要的东西。
Whatever makes sense to you is good enough. Frankly, when someone else comes looking for something in your stylesheet - or when you come looking for something, for that matter - they're not going to try to figure out what your organizing structure was. They're just going to search for whatever class or element they need to see. So as long as you generally keep stuff that's related together, and section things off with comments like @Matt suggests, you're fine.
The fact of the matter is that even with a very well-thought-out organizational structure - just like with a well-thought-out filing system - it's not always obvious what goes where; so you're better off just being somewhat sensible, not devoting a lot of time to keeping things organized, and relying on search tools to find what you need.
我以与你类似的方式组织我的 CSS，但我确实从重置部分开始。 主要思想是从一般到具体。 所以这里是：
I organize my CSS in a similar way as yours but I do start with a reset section. The main idea is to go from general to specific. So here it goes:
您提供的结构正是我所使用的。 然而，在我看来，随着新规则的出现和相互覆盖，它仍然变得太复杂了……也许我应该尝试坚持 Adam 链接的主题中建议的解决方案。
The structure you presented is exactly what I use. However, it seems to me that it still got too complex with new rules showing up and overriding each other... Perhaps I should try to stick to the solution suggested in the topic linked to by Adam instead.
似乎每次我创建一个新的 css 文件时，我都会找到一种新的方式来组织它。 而且它们都比以前更好。
It seems like every time I create a new css file, I find a new way to organize it. And they are ALL better than the previous.