CSS约定/代码布局模型[关闭]答案

【问题标题】：CSS Conventions / Code Layout Models [closed]CSS约定/代码布局模型[关闭]
【发布时间】：2010-09-23 12:21:25
【问题描述】：

是否有任何尝试并创建了一种形式化的方法来组织 CSS 代码？在我开始制定自己的保持可读性的策略之前，我想知道还有什么。 Google 的帮助不大，因为我不完全确定要搜索哪些字词。

我更多地考虑缩进/间距、何时使用新行、命名约定等。

有什么想法吗？

【问题讨论】：

标签： css coding-style conventions

【解决方案1】：

好吧，我个人并不知道任何约定本身，但我知道有很多建议非常值得遵循，但基本上取决于您希望如何实现 CSS 供您选择最适合你的那一款。

【讨论】：

【解决方案2】：

ClearLeft 的 Natalie Down 制作了一个非常棒的幻灯片，涵盖了这个主题以及更多内容http://natbat.net/2008/Sep/28/css-systems/

下载 PDF，因为它包含比幻灯片放映更多的信息。我会向所有技能水平的 CSS 开发人员推荐这个。

【讨论】：

我喜欢。娜塔莉基本上列出了我多年来一直在努力实现的目标。最大的问题是让同事同意...
clearleft.s3.amazonaws.com/2008/cssSystems_notes_small.pdf

【解决方案3】：

根据通常的代码格式辩论，这都是非常主观的，我不知道任何正式的约定。

我选择的方法是使用所有小写的类和 id，并用下划线分隔单词（例如#page_container）。我首先声明我所有的 tag 样式（html、body、ul 等），然后是所有类和 ID，按字母顺序排序。此外，每个类、id 或标签中定义的所有样式也是按字母顺序定义的。使用此约定可以更轻松地跟踪特定样式。

对于格式化，我总是将其压缩得尽可能小，但仍然清晰易读。我将所有内容放在一条带有适当空白的行上。如果您有 Visual Studio，则可以指定此格式并自动为您设置这种格式（在 Tools、Options、Text Editor、CSS、Format下将 Style 设置为 Compact rules >)。

这里的命名约定非常主观，但要记住的是，将元素命名为它们的预期目的，而不是它们的样式含义。例如，如果您有一个公司标语，您想用一个大的红色字体名称设置 id #slogan 而不是 #red_bold。

这里有一个完整的例子来给你一个想法：

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em;  margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }

【讨论】：

不要侮辱你的编码风格——它适合你，这是主要的——但我一直讨厌全线上的风格。我觉得它真的难以阅读。编程中有一个约定，一行代码应该做一件事，使事情变得可读。 all-on-one 风格背后的想法是什么？
@Paul D. Waite 将样式全部放在一行中可以减小文件大小，但仍然足够清晰，可以在必要时进行处理。理想情况下，您应该有一些构建过程，可以在生产中进一步压缩它，但这种方法是两种方法之间的良好平衡（完全压缩与每行一个样式属性）。
天啊，是的，构建过程。计算机的存在是为了让人类做更少的工作，而不是更多。 YUI Compressor 使您的非 gzip 压缩文件尽可能小，并且 gzip 压缩（您的服务器可能已经在做）本身比 YUI Compressor 的效率高 3 或 4 倍。降低代码的可读性并不是减小交付给最终用户的文件大小的正确方法。

【解决方案4】：

这是我如何订购我的 CSS 属性的草稿。它大致遵循先做定位和布局的指导方针，然后是排版，然后是背景和其他小事。我尝试根据它们对盒子模型的影响来尽可能合理地对我的属性进行排序。但是，我的订单往往会有所变化。我会很感激这方面的任何 cmets。

el {
    display:;
    float:;
    clear:;
    visibility:;
    position:;
    top:;
    right:;
    bottom:;
    left:;
    z-index:;
    width:;
    min-width:;
    height:;
    min-height:;
    overflow:;
    margin:;
    padding:;
    border:;
    border-top:;
    border-right:;
    border-bottom:;
    border-left:;
    border-width:;
    border-top-width:;
    border-right-width:;
    border-bottom-width:;
    border-left-width:;
    border-color:;
    border-top-color:;
    border-right-color:;
    border-bottom-color:;
    border-left-color:;
    border-style:;
    border-top-style:;
    border-right-style:;
    border-bottom-style:;
    border-left-style:;
    border-collapse:;
    border-spacing:;
    outline:;
    list-style:;
    font:;
    font-family:;
    font-size:;
    line-height:;
    font-weight:;
    text-align:;
    text-indent:;
    text-transform:;
    text-decoration:;
    white-space:;
    vertical-align:;
    color:;
    opacity:;
    background:;
    background-color:;
    background-image:;
    background-position:;
    background-repeat:;
    cursor:;
    }

我个人更喜欢让每行一个属性缩进一个制表符，而右花括号缩进一个制表符。对我来说，这种方式更易读，但这绝对是意见/偏好问题。

我曾经使用 tab 缩进 css 声明以尽可能匹配我的 html 父/子关系，但我不再这样做了。 CSSEdit 的分组功能有助于大大减少这样做的诱惑。

CSS 对代码结构实际上并没有任何规定的约定。因此，归根结底是最适合您的。

【讨论】：

我也经常使用这种排序方式，尽管我将background-color 和color 并排放置，并且我将它们放在填充之后。你可以养成的习惯很有趣。我听说在整个样式表中保持一致的顺序有助于 gzip 压缩，它会查找重复的字符串。如果您在不同的地方使用了相同的样式，请保持顺序相同，这意味着使用 gzip 可以更好地压缩它们。

【解决方案5】：

文件应该是模块化的，所以你可以使用@imports。我通常有一个用于基类（例如排版和颜色）的 base.css 文件。根据您的站点结构，在面向用户的样式表中重用其他 CSS“部分”可能是有利的。这些后代样式表可以根据需要以更细的粒度扩展基本样式（例如，.warn {color:red;} 可能会被p.warn {font-style:italic;} 或h1.warn {border:5px solid red;} 扩展），这是实现所谓的object-oriented CSS 的绝佳设计模式。

在文件本身中，我喜欢按字母顺序排列我的选择器和属性列表。我尝试为不同类型的选择器维护单独的列表（首先是 id 列表，然后是我的类列表，然后是我的元素选择器列表），但我发现这不必要地困难，所以我所有的选择器都按字母顺序排列列表。这样我就可以快速找到所有复杂选择器的根或赋予简单选择器的任何样式。

在复杂的选择器中，我按字母顺序列出每个选择器。

如果由于某种原因我不能使用 Sass，我可能会模仿它的 nesting 模式（我仍然不确定这是否可行），如下所示：

@import url('/css/base.css');

a {
  color:#369;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underscore; }
  a img {
    border: 0; }

blockquote, .nav, p {
  margin-bottom: 10px; }
blockquote {
  background: #eee;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: Georgia, serif; }
h1.warning {
  border: 5px solid red; }

.nav a {
  font-size: 150%;
  padding: 10px; }
.nav li {
  display: inline-block; }

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

不幸的是，您可能会寻找p 的边距，却没有意识到它是blockquote, .nav, p 的一部分。这也不是非常“面向对象”的设计，但可以说它比在几乎每个需要样式的元素上放置类字符串要好。

因此，这种方法并不完美，也不能完全让您免于有时不得不在文件中查找，但当我因无法控制的原因无法使用 CSS 模板工具时，这是我开发的最佳方法。我很想听听有关改进此方法的任何建议:)

【讨论】：