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

下载PDF，因为它包含的信息比幻灯片更多。我建议所有技能水平的CSS开发者这样做。

这都很主观，如常代码格式辩论，我不知道任何正式的约定。

我选择的方法是使用全部小写的类和 ID，使用下划线分隔单词（例如 #page_container）。我首先声明所有的标签样式（如 html、body、ul 等等），然后按字母顺序排序所有的类和 ID。此外，每个类、ID 或标签定义的所有样式都按字母顺序定义。使用这种约定使得更容易追踪到特定的样式。

对于格式化，我总是尽可能地压缩它，但仍然易读。我将所有内容放在一行上，留有适当的空白。如果您使用Visual Studio，您可以指定此格式，并自动将其格式化为这种方式（在工具，选项，文本编辑器，CSS，格式下设置样式为紧凑规则）。

命名约定在这里非常主观，但需要记住的是，按其预定用途命名元素，而不是它们的样式含义。例如，如果您有一个公司口号想要以大号红色字体为样式，请将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; }

这是我如何排序我的CSS属性的草稿。它大致遵循先处理定位和布局，然后再处理排版，接着是背景和其他一些次要的东西的指导方针。我尝试根据它们合理影响盒子模型的程度来排序我的属性。然而，我的排序往往会有些变化。我欢迎任何评论。

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:;
    }

就我个人而言，我更喜欢每行保留一个属性并缩进一个制表符，同时将关闭的大括号缩进一个制表符。对我来说，这样更易读，但这显然是个人观点/偏好问题。

我曾经使用制表符缩进CSS声明，以尽可能匹配我的HTML父/子关系，但我不再这样做了。 CSSEdit的分组功能有很大帮助，可以大大减少这样做的诱惑。

CSS在代码结构上并没有真正规定的约定。因此，这取决于您认为最适合自己的方式。

嗯，我个人并不知道有什么特定的规定，但我知道有很多建议是非常好的，建议大家遵循，但基本上取决于你如何实现你的CSS，你可以选择最适合你的那一个。

文件应该模块化，这样您就可以利用@import。我通常有一个base.css文件和基础类（如排版和颜色）。根据您的站点结构，还可以拥有其他CSS“部分”以在用户界面样式表中重复使用。这些后代样式表可以根据需要更细化地扩展基本样式（例如，.warn { color：red;} 可能会被p.warn { font-style：italic;} 延伸，或者h1.warn { border：5px solid red;} ），这是实现所谓“面向对象CSS”的一个很好的设计模式。

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

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

如果因为某些原因我无法使用Sass，我可能会模仿它的嵌套模式（我仍然不确定这是否有效），就像这样：

@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模板工具的情况下开发的最佳方法。我很想听听任何改进此方法的建议:)