这就是你构建 CSS 样式表的方式吗？

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

题

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

/* 结构 */

任何模板布局内容都应该放入此处，例如页眉、页脚、正文等。

/* 结构体结束 */

/* 常用组件*/

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

/* 公共组件结束*/

/* 具体第1页 */

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

/* 具体第1页结束 */

/* 具体页面2 */

如上

/* 具体第2页结束 */

/* 具体页面等 */

等等。

/* 具体页面等结束 */

有帮助吗？

解决方案

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

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

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

下

/ *标题格式* /

/ *文字格式* /

/ *表格格式* /

/ *表格式* /

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

其他提示

对你来说任何有意义的事情都是足够好的。坦率地说，当其他人来到您的样式表中寻找某些东西时 - 或者当您为此寻找某些东西时 - 他们不会试图弄清楚您的组织结构是什么。他们只是要搜索他们需要看到的任何类或元素。因此，只要您通常保留与之相关的内容，并通过@Matt建议的评论来解决问题，您就可以了。

事实上，即使有一个经过深思熟虑的组织结构 - 就像一个经过深思熟虑的文件系统 - 它并不总是显而易见的;所以你最好只是有点明智，不要花很多时间来保持组织有序，并依靠搜索工具找到你需要的东西。

我以与你类似的方式组织我的 CSS，但我确实从重置部分开始。主要思想是从一般到具体。所以事情是这样的：

  • 重置
  • 结构
  • html_标签
  • 导航
  • 具体部分
  • 错误消息 - 这是我的最后一部分

您呈现的结构正是我使用的结构。然而，在我看来，它仍然过于复杂，新规则显示出来并相互覆盖......也许我应该尝试坚持与Adam相关联的主题中建议的解决方案。

似乎每次我创建一个新的css文件时，我都会找到一种新的方法来组织它。而且他们比以前更好。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top