css - CSS 约定/代码布局模型

Question

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

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

有任何想法吗？

score 18 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

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

命名约定在这里非常主观，但要记住的是，将元素命名为它们的预期目的，而不是它们的样式含义。例如，如果您有一个公司标语，您想用一个大的红色字体名称设置 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; }

score 2 · Accepted Answer

这是我如何订购我的 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:;
    }

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

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

CSS 实际上并没有任何规定的代码结构约定。因此，归结为最适合您的方法。

score 0 · Accepted Answer

好吧，我个人不知道任何约定本身，但我知道有很多建议可以遵循，但基本上取决于你想如何实现你的 CSS 让你选择一个最适合你。

score 0 · Accepted Answer

文件应该是模块化的，所以你可以使用@imports. 我通常有一个用于基类（例如排版和颜色）的 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 模板工具时，这是我开发的最佳方法。我很想听听有关改进此方法的任何建议:)

css - CSS 约定/代码布局模型

5 回答 5

Related

Reference