logo标签列表

CSS约定/代码布局模型

csscoding-styleconventions
24

有没有尝试过创建正式的方法来组织CSS代码？在我开始制定自己的策略以保持可读性之前，我想知道还有什么其他方法。谷歌并没有提供太多帮助，因为我不确定要搜索哪些术语。

我考虑得更多的是缩进/间距，何时使用新行，命名约定等方面。

有什么想法吗？

5个回答
18

Natalie Down 是 ClearLeft 公司的知名人士，制作了一份非常好的幻灯片展示，涵盖了这个主题及更多内容 http://natbat.net/2008/Sep/28/css-systems/

请下载PDF文件，因为它包含比幻灯片展示更多的信息。我推荐这篇文章给所有技能水平的CSS开发人员。

我喜欢它。Natalie基本上阐述了我多年来一直试图实现的目标。最大的问题是让同事们跟着做... - Ryan Kinal
4
http://clearleft.s3.amazonaws.com/2008/cssSystems_notes_small.pdf - Greg Dan
4
这些都是非常主观的代码格式化问题，我不知道有任何正式的约定。
我选择的方法是使用全部小写的类和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; }
1
不是要贬低你的编码风格——它对你来说有效就是最重要的——但我一直很讨厌把所有代码都写在一行上的风格。我觉得这样非常难读懂。编程中有一个惯例，即一行代码应该只做一件事情，以使代码易读。那么把所有代码都写在一行上的风格背后的思考是什么呢？ - Paul D. Waite
@Paul D. Waite 把所有样式都放在一行上可以使文件大小更小，但仍足够清晰以便必要时进行工作。理想情况下，您应该有一些构建过程，在生产中进一步压缩它，但这种方法是两种方法之间的良好平衡（完全压缩与每行一个样式属性）。 - cowgod
4
哎呀哎呀，是的，构建过程。电脑的作用就是让人类做更少的工作，而不是更多。YUI压缩程序可以尽可能地减小您未经gzip压缩的文件的大小，而gzip压缩（您的服务器可能已经在执行了）本身就比YUI压缩程序有效率3到4倍。使代码变得难以阅读并不是减小向终端用户提供的文件大小的正确方法。 - Paul D. Waite
2
这是我排列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实际上没有任何规定的代码结构约定。所以最终还是要看你自己最适合什么样的方式。

我基本上也使用这种排序方式，尽管我将 background-color 和 color 放在一起，并将它们放在 padding 之后。有趣的是你可以养成的习惯。我听说在整个样式表中保持一致的顺序可以帮助 gzip 压缩，因为它会查找重复的字符串。如果你在不同的地方使用相同的样式，保持相同的顺序意味着它们将更好地与 gzip 压缩。 - Paul D. Waite
0

我个人并不知道有什么具体的惯例，但我知道有很多建议是非常值得遵循的，但基本上取决于你想如何实现你的CSS，所以你可以选择最适合你的那一个。

0

文件应该被模块化，这样你就可以使用@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 模板工具时，原因超出了我的控制范围。我很乐意听取任何改进此方法的建议 :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接