CSS 格式化方法

这篇文章将重点介绍格式化 CSS 的不同方法，这与 组织 CSS 的不同方法不同。这当然是一个相关的概念，但我认为组织更多地与分组和排序有关，而格式化则与间距和缩进有关。

格式化与 CSS 的功能无关。这些仅仅是编码人员的审美选择。但这并不意味着格式化不重要。这就像说画布的选择对画家来说并不重要一样。它会影响编写 CSS 的感觉，阅读的难易程度，导航的难易程度，以及重新访问和重新熟悉以前编写的 CSS 的难易程度。

CSS 格式化有如此多的选择，是因为在间距和换行符方面没有硬性语法规则。例如

div        {       width:      50px         }

与

div{width:50px}

与

div

{

      width: 50px

}

多行格式

.navigation_rss_icon {
	position: absolute;
	left: 940px;
	bottom: 0px;
}
#navigation_rss {
	position: absolute;
	left: 720px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #897567;
	line-height: 2.5em;
}
#navigation_rss li {
	display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
	color: #fffffe;
	text-decoration: none;
	padding: 0px 2px;
	letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
	color: #eed2a1;
	text-decoration: none;
}

我敢说这是最常见的。对于短代码片段来说，这是最容易阅读的，这也是为什么书面教程最常使用这种格式。上面的例子在结束大括号和下一个选择器之间没有空行，但这也是相当常见的。

带缩进的多行格式

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
}
    #navigation_rss li {
        display: inline;
    }
        #navigation_rss li a:link, #navigation_rss li a:visited {
            color: #fffffe;
            text-decoration: none;
            padding: 0px 2px;
            letter-spacing: -0.05em;
        }
        #navigation_rss li a:hover {
            color: #eed2a1;
            text-decoration: none;
        }

缩进的代码块表明选择器比其上面的父选择器更具体，并针对上面选择器的子元素。

单行格式

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

这可能是最节省空间和大小的，除了完全压缩以删除所有空格和换行符之外。这种技术在编写和编辑 CSS 时需要最少的垂直和水平滚动，但可能以外观混乱，浏览和查找要查找的内容比较困难为代价。

带制表符的单行格式

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

带缩进的单行格式

#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol             { list-style: lower-alpha; }
#content-area ul                    { margin: 0 0 0 5px; list-style: none; }
    #content-area ul li             { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li     { background: none; padding: 0; }

缩进的选择器表明该选择器针对上面选择器的子元素。

主要是单行格式

我更喜欢单行格式，但我使用文本编辑器中的软换行，所以长行不会永远延伸下去，它们会在窗口边缘换行。因此，对于包含许多选择器的非常长的行，我会在属性的新行上添加硬回车并进行制表符。

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1                                    { font-size: 36px; }
h2                                    { font-size: 30px; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        text-align: left; }

变化

单行格式可以通过将开始大括号移动到它自己的行上来进一步扩展，这是我在 PHP 中经常看到的

div
{
    padding: 10px;
}

在带缩进的多行格式中，我看到开始大括号被用作一种分隔墙

#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol          {       list-style: lower-alpha; }
#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }
    #content-area ul li          {       padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li  {       background: none; padding: 0; }

组合

单行和多行的组合将仅将相关的属性分组到一行

.navigation_rss_icon {
    position: absolute;
    top: 10px; left: 10px; bottom: 10px; right: 10px;
    font-size: 12px; font-weight: bold;
}

可读性与滚动

您对格式化的选择归结为可读性。您需要能够快速浏览 CSS，找到要查找的内容，并快速进行更改。如果您发现单行格式难以阅读，因为您的眼睛很难找到要查找的属性，那么您可能应该避免使用它。

我个人发现多行格式易于阅读，但它会将长度（如实际行数）增加 5-8 倍。由于所有的垂直滚动，这实际上会让整个文档对我来说可读性降低。如果您使用的是相对较窄的显示器，单行格式可能会导致大量的水平滚动，这有时甚至更糟糕。

最适合您的格式是既能最大程度地提高可读性，又能最大程度地减少滚动的格式。此外，从更抽象的角度来看，它只需要感觉正确。