最新投票：你如何格式化你的 CSS？

lukas

# 2009年11月4日

对于超过 3 个参数，我使用这种方式
#id{
[tab]color: #333;
height: 20px
}

对于 3 个或更少，我使用
.class{ color: #220000; text-decoration: underline; }

Kieran Bowler

评论永久链接# 2009年11月4日

赞同！所有其他方法完全浪费了视觉空间，尤其是在大量的 CSS 上。

我发现如果以任何其他方式格式化，这些天我就会感到恼火。我知道很可悲，但这是真的。
jakesyl

评论永久链接# 2009年11月24日

像这样

document.write(“hello world);
jakesyl

评论永久链接# 2009年11月24日

哎呀，它实际上使用了 HTML

document.write(“hello world);
Gappa

评论永久链接# 2009年11月4日

是的，我正在做类似的事情 - 效果很好。我的方法唯一的区别是我尝试将声明的开头 { 缩进到相同的位置。
此外 - 对于更多参数，我倾向于稍微缩进它们。

例如

div.menu {..} div.menu ul {..} div.menu li {..} div.menu a { ... ... ... ... }

它有效，至少对我来说 - 我可以轻松地在 CSS 中定位。

CSS 最终会被压缩，所以我可以随意更改它在编辑器中的外观 :)
Gappa

评论永久链接# 2009年11月4日

哎呀，它弄乱了，希望你无论如何都能明白。

lawrencek

# 2009年11月4日

我几乎总是使用多行格式化和缩进来格式化我的 CSS，并将其按预定义的 HTML 标签、ID 或类进行分段，然后按字母顺序排列其中的样式（尽可能地！）。

例如

@charset "UTF-8";
/* CSS Document */


/* The following code styles pre-defined HTML tags */
h1 {
	font-size: 27px;
}
h2 {
	font-size: 22px;
}


/* The following code styles custom ID's */
#container {
	margin: auto;
	min-width: 960px;
	width: 960px;
}


/* The following code styles custom classes */
.attraction {
	font-size: 25px;
	margin: 0% 8% 4% 8%;

}

最后，我通常将网站的任何大型方面（图像滑块、弹出窗口等）作为单独的元素按字母顺序排列在最后！

st

# 2009年11月4日

总是这样，对我来说它更紧凑，也更易读。

.style { font-size:100%; font-weight:900; … }

Dustan

评论永久链接# 2009年11月4日

兄弟，我赞同！
JB

评论永久链接# 2009年11月4日

对我来说也是同样的方式，它在文件中更紧凑（我不喜欢过多地滚动）并且 Firebug 可以很好地组织它，因此我可以轻松地操作它。
Yuri Goytacaz

评论永久链接# 2009年11月4日

赞同！
CoryMathews

评论永久链接# 2009年11月4日

相同。我无法忍受在巨大的文件中上下滚动。
mattvot

评论永久链接# 2009年11月4日

是的！单行比大多数多行 CSS 编码人员认为的更容易阅读。
Vernon

评论永久链接# 2009年11月5日

我完全同意。几年前我还是一个多行 CSS 的用户，但现在我大多使用单行。如果有很多选择器，我就会将它们分成多行。
Jeremy

评论永久链接# 2009年11月4日

对我来说也是一样，没有 { 之前的空格，但它更容易阅读，我将属性按字母顺序排列（以避免重复）。
ySchaub

评论永久链接# 2009年11月4日

我不明白为什么单行应该更易读……尤其是在你有超过 10 个属性的情况下。这太令人困惑了……多行使它易于阅读。
我同意 lukas 和 Kieran 的观点。对于 3 个或更少的属性，没有必要编写多行。但一旦它变得更多，我就不得不花费很长时间来搜索所有内容。

但也许有一天我会改变……还不知道 :D

对于我的英语，我表示歉意，希望你能理解。

Karl Roos

# 2009年11月4日

/* 此部分的名称 */

选择器
{属性}

/* 下一部分…

这很简单，因为你在文档中查找特定属性时花费的大部分时间是在查找正确的选择器。通过最小化选择器之间的空间，以这种方式维护 CSS 的速度会快得多，至少对我来说是这样。

我也尝试将属性按字母顺序排列以达到相同目的。

Silver Firefly

# 2009年11月4日

我使用带缩进的多行。当站点上线时，我会将其压缩成单行，并且没有不必要的空格。我也会按字母顺序排列。

Kristina

# 2009年11月4日

p {
font-size: 1.25em;
}

我为所有内容缩进。

daulex

# 2009年11月4日

.class_name{property:value;other-property:other(val.ue) no-repeat)

没有空格，长行。我在一个大型宽屏显示器上工作，并且喜欢让它充满代码。

哦，我如何应对混乱？CMD+F

Ben

# 2009年11月4日

我通常对除单一规则之外的所有内容都使用多行。


/*	Content blocks
	Control main text flow
	------------------------------ */

#primaryContent
{
	float:left;
	padding:5px;
	background:#ebebeb;
	width:590px;
}

#primaryContent + * { clear:both; }

#primaryContent h1
{
	color:red;
	font-size:xx-large;
}

我认为更重要的是 CSS 文档的结构以及是否使用了注释。就像我上面示例中那样，我会在特定部分之前做一个大的注释块，指示那里的元素是做什么的。

Kristaps Karlsons

评论永久链接# 2009年11月4日

+1m
Ben

评论永久链接# 2009年11月4日

我也是 :)
Tim

评论永久链接# 2009年11月4日

一样一样
Michael Dymny

评论永久链接# 2009年11月6日

我用的是相同的方式
/*** 内容开始页面 ***/
#header-pic { margin-bottom: 20px; height: 130px; overflow: hidden; } #header-pic-start { margin-bottom: 10px; }
#main-area { float: left; width: 710px; margin-bottom: 10px; }
Eliza

评论永久链接# 2009年11月11日

对我来说也是如此。我更喜欢这种方法
Felipe Theossi

评论永久链接# 2009年11月6日

我更喜欢这个！…
Christopher Hein

评论永久链接# 2009年11月10日

绝对用相同的方式，我不喜欢拥挤。=）事物应该井井有条。

Danny

# 2009年11月4日

我同时使用带缩进的多行和单行格式。取决于具体情况。例如，如果规则包含少于三个选择器。我也使用了很多注释，如果我非常在意的一件事是避免使用填充。Ugh。
即使我不需要 ID 或类的特定样式，我仍然会在样式表中列出它们。
如果我使用浮动，我通常还会列出组合浮动的总宽度，以便于计算。
最重要的是，我尽量尽可能多地使用 CSS 速记。

* { padding: 0; margin: 0; }
/******** LAYOUT *********/
body { 
	background: #eee;
	}
	#PageWrap { /* 1. level */
		width: 750px;
		margin: 50px auto;
		background: #fff;
		}
		#PageHeader { height: 150px; }
		#ContentWrap { margin: 30px; } 	/* 750 - (2x30) =  690 */
		#col1, #col2, #col3 { 			/* 690 / 3 = 230 */
			width: 230px;
			float: left;
			display: inline;
			} 

/******* TYPOGRAPHY ********/
body { font: Arial,Helvetica,sans-serif; }
#ContentWrap { font-size: 11px; }

Steveoismynameo

评论永久链接# 2009年11月4日

我同意 Danny 的观点。这与我格式化我的方式非常相似。通过缩进子级，层次结构变得更加清晰和井然有序。

Davide Benini

# 2009年11月4日

我使用 compass，它帮我完成了所有格式化工作 :)

Kevin Zurawel

评论永久链接# 2009年11月4日

我读了标题，立刻想到“我不担心这个问题，因为我用 Sass” :)

David Walsh

# 2009年11月4日

始终使用单行格式。多行 CSS 格式会使您的样式表过长，最终您需要花费很长时间才能找到内容。

Eric Wendelin

评论永久链接# 2009年11月4日

Walsh 完全让我转向了带缩进（而不是制表符）的单行方法。;)

Jack

# 2009年11月4日

这是我实际网站上的一些 CSS。

/* Style */
	
			
header, nav, footer, section				{ display: block; }	
*											{ font-family: "Lucida Grande", Arial, sans-serif; }
body										{ background-color: #333; }
header.main									{ background-color: #757575; height: 450px; }
.center										{ width: 700px; margin: 0 auto; }
h1											{ font-size: 125px; color: #333; padding: 45px 0 0; font-weight: normal; }
h2											{ font-size: 48px; color: #444; padding: 15px 0 0; font-weight: normal; } 
h2 span										{ color: #639; }
h2 strong									{ font-weight: normal; color: #A30; }
h3											{ font-size: 20px; color: #555; line-height: 1.4em; padding: 15px 0 0; 
											  font-weight: normal; }
a											{ color: #666; text-decoration: none; }
section p a									{ text-decoration: underline; }
a:hover										{ color: #999; text-decoration: none; }
.mainnav									{ background-color: #252525; padding: 5px 0; text-align: center; }
.mainnav ul li								{ display: inline; color: #757575; font-size: 18px; }
.mainnav ul li:after						{ content: " - "; }
.mainnav ul li:last-child:after				{ content: ""; }
.mainnav ul li:first-child:after			{ content: ""; }
.mainnav ul li a							{ color: #777; text-decoration: none; }
.mainnav ul li a:hover						{ color: #777; }
h3 a										{ color: #444; text-decoration: none; }
h3 a:hover									{ color: #A33; }

我确信其中有很多错误，但它可以工作，所以就我而言，一切都很好。

Mike

# 2009年11月4日

我过去使用多行格式，但对于长 CSS 文件，滚动变得太多。尤其是在 CMS 中内置的小窗口中编辑 CSS 时。

始终使用带缩进/制表符的单行格式！

Jack

评论永久链接# 2009年11月4日

是的，我也从多行开始。当我切换到 Coda 时，我进行了切换，然后切换回 Dreamweaver 后，这个习惯就保留了下来。

mienflying

# 2009年11月4日

我使用单行格式。

Ricardo Zea

# 2009年11月4日

我首先在记事本中写了这条消息，所以我不知道发布后它是否会看起来不错，因为无法预览。

—

在参加了几次 Web Design World 会议后，我尝试使用 Dan Rubin 的单行 CSS 书写方法，我一直都以常规方式编写 CSS，也就是多行格式。

我喜欢它，但最重要的是，它使管理 CSS 规则变得容易得多。

我告诉每个人的，也告诉 Dan 的是，在当今时代，显示器更宽更大，因此用单行书写可以利用显示器的宽度，这意味着您可以在一个屏幕上看到更多规则。

我比 Dan 的单行书写更进一步，并在编写属性时实现了自己的方法。

以下是一个示例（来自一个真实的项目）

/****HEADER****/
#header { padding-top:20px; }
#header img { float:left; }
#header div.address-header ul { float:right; width:960px; height:100px; text-align:right; margin-top:25px; color:#003247; font:italic 1.2em/1.4em Georgia, "Times New Roman", Times, serif; }
#header div.address-header ul li + li { padding-left:27px; font-weight:bold; color:#000 ; }
#header div.address-header ul li.email { background:url(../images/bg-sprites.png) 0 -605px no-repeat; }

我把长的声明放在最后，比如“background:”和“font:”。
我在第一个“{”之后和最后一个“}”之前留一个空格。
如果声明中需要，“float:”始终放在第一位。
“width:”放在第一位，“height:”放在第二位。这是因为来自印刷行业，当您引用文档的尺寸时，您所说的第一个尺寸是宽度。
我总是从最简单的选择器开始，随着我需要更多与相同选择器相关的规则，我将它们分组。当需要选择器的新规则集时，我开始一个新组。
每个组都有一个描述它的注释。

尝试用单行编写，我没想到在多年以常规方式编写 CSS 后，我会改变我的习惯。

回头见。

Ricardo Zea

评论永久链接# 2009年11月4日

那个没起作用，再试一次

1. 我把长的声明放在最后，比如“background:”和“font:”。

2. 我在第一个“{”之后和最后一个“}”之前留一个空格。

3. 如果声明中需要，“float:”始终放在第一位。

4. “width:”放在第一位，“height:”放在第二位。这是因为来自印刷行业，当您引用文档的尺寸时，您所说的第一个尺寸是宽度。

5. 我总是从最简单的选择器开始，随着我需要更多与相同选择器相关的规则，我将它们分组。当需要选择器的新规则集时，我开始一个新组。

6. 每个组都有一个描述它的注释。
Chris Coyier

评论永久链接# 2009年11月4日

这就是我的做法。
Jon Kokke

评论永久链接# 2009年11月6日

我也是！

pepelsbey

# 2009年11月4日

E { ....property:value; ....} ....E>E { ........property:value; ........}

Krinkle

# 2009年11月4日

我过去使用“多行格式”，但现在将近两年了，自从我看到 Chris 那样做以来，我一直使用“主要是单行格式”，我觉得它确实在某种程度上提高了我的 CSS 技能。

这种单行格式使我的 CSS 文件相对较短，这使我能够快速浏览并找到我想要的内容。

单行的一个缺点是制表符在不同浏览器/编辑器中的解释可能不同。但那又怎样 :) - 只要在我的编辑器中很好就行。

tim

# 2009年11月4日

#div
{
…..property:value;
}

不在单独一行的花括号让我感到不适。不知道为什么。

Chris Coyier

评论永久链接# 2009年11月4日

很有趣，当我看到那样的时候，我感觉有点不舒服。完全只是奇怪的个人偏好。

Ahmed

# 2009年11月4日

我使用多行格式，但我在完成项目后对其进行压缩，并保留两个副本，同时仅加载压缩的副本。我还使用 mod_deflate，所以我觉得我很好。

Douglas Neiner

评论永久链接# 2009年11月4日

+1 同意这一点，使用多行格式查找声明的速度要快得多。然后，当您将其压缩以用于生产时，它会处理所有其他事情。
Scott

评论永久链接# 2009年11月6日

我们也这样做；基本上使用不带制表符/缩进的多行格式，并在构建时利用压缩。我们还构建了一个实用程序，可以在浏览器中直接使用未压缩的原始文件以进行更轻松的调试。

Boris Strahija

# 2009年11月4日

单行对我来说最有效。

当我在使用 CodeIgniter 时，我正在使用一个资产库，它将我的所有 CSS 文件合并到一个文件中，并且它还使用 cssmin 缩小代码。

silvers

# 2009年11月4日

一个很棒的投票想法。自从我开始网页设计以来，我一直想知道我应该如何格式化 CSS。它已经改变了几次，所以我希望有一个有充分理由的“最佳实践”。这个投票将很有趣，并且可能会影响我将来如何使用 CSS。

Lee Smith

# 2009年11月4日

单行很棒。CSS 不是编程语言……更像是一个属性文件。你浪费太多时间进行所有格式化。

Daniel Groves

# 2009年11月4日

这是我最近重新设计的博客中的一个小片段。

#nav {
	position: absolute;
	top: 25px;
	left: 430px;
}

		#nav ul {
			width: 100%;
			list-style: none;
			float: left;
		}
		
		#nav ul li {
			float: left;
			display: inline;
			width: 135px;
			padding-right: 20px;
		}
		
		#nav ul li a {
			color: #fff;
			font-size: 100%;
			text-decoration: none;
		}
		
		#nav ul li a span {
			font-size: 80%;
			color: #ccc;
			text-transform: lowercase;
		}
		
		#nav ul li a:hover {
		}
		
		#nav ul li a:hover span {
		}
		


#mainBody {
	clear: both;
        }

		#post {
			width: 690px;
			float: left;
			border: 1px solid red;
		}
		

		#content {
			padding: 0 0 0 30px;
			width: 510px;
			border: 1px solid red;
		}
		
				h2 {
					margin: 30px 0 10px 0;
					border-bottom: 2px solid #333;
					color: #B52A0A;
					font-family: Georgia, "Times New Roman", Times, serif;
					font-weight: 100;
					font-size: 175%;
				}
				
				h2 a {
					color: #B52A0A;
					text-decoration: none;
				}
				
				p {
					font-size: 90%;
					line-height: 150%;
					padding: 20px 0 0 10px;
				}
				
				img {
					margin: 0 auto;
					display: block;
				}
				
		
		#meta {
			float: right;
			width: 135px;
			border: 1px solid red;
		}
		
				#meta ul {
					list-style: none;
				}
					
						
		#sidebar {
			width: 150px;
			float: right;
		}

Daniel Groves

评论永久链接# 2009年11月4日

抱歉这么长，这是展示我真正操作方式的唯一方法，除了格式化中缺少一些内容。我想尝试（尽管失败了）发布它，因为大多数人说我的操作方式非常独特！

Karl

# 2009年11月4日

SASS（或 LESS）。

太简单了！

我一开始有点挣扎，我不得不说我失去了我最喜欢的 CSS 编辑器（CSSEdit）的使用权。但使用 SASS 带来的好处是巨大的。

现在，我会发现回到过去使用原始 CSS 的日子既痛苦又乏味。

EVula

# 2009年11月4日

多行格式，尽管我会对非常具体的规则（例如精灵图）使用单行格式。

teylor feliz

# 2009年11月4日

对于内联元素
elem{ color:blue; text-decoration:underline;}
对于块级元素
.class{ width:300px; height:344px; background:red; }

Atom Groom

# 2009年11月4日

终身使用单行格式

#singleline { color:blue; text-decoration:underline;}

/*------------------------------ */
/*      Comment Banners to Separate!  */
/*------------------------------ */

Douglas Neiner

# 2009年11月4日

对于那些不使用 TextMate 的人，我理解为什么您可能认为一种方式比另一种方式更快。但是对于 TextMate 用户，CMD+Shift+T 允许您只需键入选择器名称的一部分即可跳转到该选择器。

因此……在我看来，多行格式最易于阅读，因为您不必根据眼睛在滚动时捕捉它们来查找声明。

Mathew Piccinato

# 2009年11月4日

带缩进的多行格式。缩进主要是编程的习惯，但它们也感觉更简洁。

还要注意，选择器中的所有样式都按字母顺序排列。

Giacomo Ratta [ITA]

# 2009年11月4日

一行代码并缩进，并使用注释分隔 HTML 页面中最大的区域。

此外，我总是按照逻辑顺序编写 CSS 属性…… :-)

例如，我首先编写诸如 margin、position、float、padding 之类的属性，最后编写字体属性。

精彩的比赛！;-)

José Mota

# 2009年11月4日

如果我不使用 SASS 或 Less：几周前开始使用一行代码并缩进。缩进让我更好地了解元素嵌套并更好地扫描。

至于排序：基本元素、然后是类、然后是基本布局，最后是特定的 ID。

Dan Cameron

# 2009年11月4日

我的示例太长，无法在此粘贴，因此我将发布一个指向我领导初始主题的近期项目的链接。

http://gist.github.com/226212

使用它的网站：http://kysdc.com/

Dan Cameron

评论永久链接# 2009年11月4日

如您所见，我创建了

索引
样式索引
组内的多行规则。

Damian Web

# 2009年11月4日

始终使用带有注释的单行代码来分隔某些部分，单行代码使您可以快速滚动浏览较长的 CSS 样式表，并使用注释可以轻松找到某些部分。此外，使用这种方法，我通常可以拥有一个样式表，并且几乎可以将其再次用于另一个站点，例如页脚样式和链接通常保持不变，可能只是颜色选择不同！归根结底，每个人都有自己的方法，一旦你学会了一种方法，就很难适应另一种方法。

RussellUresti

# 2009年11月4日

多行代码并缩进。

因此我的样式将显示如下

#container {
     
}

    #header {

    }

    #content {

    }

        #primary-content {

        }

        #secondary-content {

        }

    #footer {

    }

这样可以显示层次结构。此外，我以类似于以下结构的方式进行组织

/* General Tag Styles */

body {

}

h1 {

}

p {

}

/* Custom Class Styles */

.sup {

}

.clearfix {

}

/* Layout Styles */

#container {

}

我知道很多人喜欢按字母顺序组织样式，但我更喜欢以依赖关系的方式进行组织……例如

#header h1 a {
    display: block;
    height: 50px;
    width: 50px;
}

或

#header h1 {
    position: absolute;
    top: 100px;
    left: 300px;
}

在第一个中，高度和宽度是依赖于 display: block 的尺寸。第二个中，top 和 left 依赖于 position: absolute。对我来说，这比按字母顺序排列更有意义。

我也不会省略最后一个分号。有些人这样做是为了节省文件大小，但我认为，如果我必须添加更多样式，我必须在开始之前添加最后一个分号，所以我一开始就保留它。

Martin

# 2009年11月4日

我更喜欢多行代码，因为它看起来更专业，并且可以更轻松地复制和粘贴单个属性并快速重构 CSS。

但是，如果有一系列具有非常相似属性的规则（如果使用精灵图，通常会在 background-position 中发生），则使用单行代码看起来更整洁。

Brian Smith

# 2009年11月4日

多行格式。绝对的。

Pawel P.

# 2009年11月4日

#MOTHER
.CHILD
…

//来自 SASS + COMPASS

Soh Tanaka

# 2009年11月4日

我个人不喜欢缩进。

带良好注释的多行代码总是让我微笑:-)

Greg McAusland

# 2009年11月4日

最近我开始使用缩进，并采用了一种单行/多行混合方式。

我总是使用简单的单行代码，但我总是想在其中注入更多结构。当 CSS 文件变大时，我很难找到我想要的内容。

我之前确实为此创建了一个帖子，68 次查看 0 次回复，我想你们不喜欢我提出的样式 :P

https://css-tricks.org.cn/forums/viewtopic.php?f=4&t=4756

easisell.com

# 2009年11月4日

我是一个使用多行代码并缩进的人，但我正在认真考虑转向使用一行代码并缩进，因为我想节省滚动空间。

Mark McDonnell

# 2009年11月4日

我用两行写代码……

#selector
{ 按字母顺序排列的声明 }

……确实需要习惯按字母顺序编写规则，但在几个月后重新回到项目进行更改时，处理起来要容易得多。

我的声明与我的 HTML 文件的核心结构相匹配（页面中永远不会改变的部分——例如我的 header > main content > footer）。

然后，任何超出该结构的样式（例如主页和子页面的内容）都放在核心声明下方。

对我来说很有效，但我可以理解，对于 CSS 忍者来说，这是一个非常私人的话题，对我们中的一人有效的并不一定是我们所有人的最佳方法。

Maxwell

# 2009年11月4日

有趣的是，我完全是从你这里 Chris 学会 CSS 的，所以我一开始使用多行代码，因为我在你的一个屏幕录像中看到了这种方式，然后根据你在屏幕录像中的做法改成了“大部分单行代码格式”！

感谢你成为一位**很棒**的老师！

mibrt

# 2009年11月4日

.body-container {
       ......
       ..........
}
       .container-top {
               ...........
       }
                .container-top a {
                         ..............
                }
       .container-middle {
               ......
       }

Jillian

# 2009年11月4日

我使用带制表符的单行格式——我很惊讶它在投票中目前只占 4%，因为我相信这是 Chris Coyier 偏好的方法。我的旧站点使用多行格式，当我回去更新它们时，我惊叹/恼怒于它们之间的间隔之大！

Eduardo

# 2009年11月4日

我使用带缩进的多行格式，但一些参数在同一行——即
div#something {
[TAB]width:Xpx; height:Ypx;
[TAB]margin:0; padding:0;
[TAB]font:style weight size/height family;
[TAB]color:#xxxxxx; background-color:#yyyyyy;
[TAB]}

Tommy M

# 2009年11月4日

#menu { display:block; float:left; } .active { color: #f1f2fa; font-weight: bold; }

在这种情况下，我的“active”类位于菜单 div 标记内。

senshikaze

# 2009年11月4日

我妈妈总是说，整洁的代码是接近神圣的。

所以
#id
{
缩进：内容；
}

对我来说

Jeff Starr

# 2009年11月4日

你知道我怎么做——我在一年多前写了一篇关于这个主题的完整系列文章。

David Millar

# 2009年11月4日

我对不同的用例有两种不同的样式。

我的标准编码风格
#blargh { color:black; background:white; } ..#blargh a { color:#9c0; text-decoration:none; } ....#blargh a:hover { color:#900; }

在某些项目中，我将为 hack 或特定于浏览器的代码创建单独的文件
#blargh { border-radius: 1em; ..-moz-border-radius: 1em; ..-webkit-border-radius: 1em; }

Norman

# 2009年11月4日

多行代码，不缩进，属性和值之间没有空格，并且按字母顺序排列；)

body { background:#222; color:#444; font-size:14px; font-family:Georgia,"Times New Roman",sans; text-align:center; }

xk2

# 2009年11月4日

带缩进的多行代码格式万岁！

Jason

# 2009年11月4日

#parent {attr: value;}
  (#parent) ./#child{attr: value; attr2: value;}

#other_elm {a: v}
  (#other_elm) ./#child {a: v;}

Eric B.

# 2009年11月4日

我喜欢使用唯一大括号样式，并将属性按其功能分组。

Devin

# 2009年11月4日

如果选择器具有 2 个以上属性，我使用带缩进的多行代码，如果只有一个属性，则使用单行代码。
示例

ul {float: right;}

ul li a {
	float: left;
	margin: 0 20px 0 0;
	text-decoration: none;
	
}

KT

# 2009年11月4日

我使用组合方式，多行代码但对相关属性进行分组。我发现这可以在不必太多滚动、类等易于扫描以及每个属性易于快速挑选之间取得平衡。我还使用注释来帮助我找到样式表中的内容。

示例

.class {
     height: 100px; width: 200px; padding: 10px 0;
     background: black; color: white;}

Rex Sacayan

# 2009年11月4日

body {
color:#333;
margin:0 auto;
font-family:Verdana, Arial, Helvetica, sans-serif
font-size:12px;
}

Anthalus

# 2009年11月4日

我倾向于使其易于我阅读，一旦我将所有内容都放在我想要的位置，我就会通过压缩器处理 CSS 并将其用于网站。只要我有原始文件，我就有一个更易于人类阅读的版本。

Steve

# 2009年11月4日

我像这样为 CSS 设置样式

#selectorID
..........{
.......... background:url(' valid url ');
.......... height:100px;
.......... width:100px;
..........}

...........#selectorID li
.....................{
..................... color:#ffffff;
..................... font-size:14px
.....................}

senshikaze

评论永久链接# 2009年11月5日

先生，您是一位模范的 CSS 编码员。我向您的耐心致敬。

Sunny Singh

# 2009年11月4日

除了 gzip 之外，我不进行压缩，因此考虑到我使用的 CSS 量，使用单行代码非常重要。

这是我的主要 CSS 文件，是的，我可以很好地阅读它
http://cdn.myunv.com/css/uecore.css

我没有使用“按字母顺序排列的属性”，而是有自己的顺序，比如块属性和定位优先（边距、宽度），然后是颜色，然后是字体、文本阴影、边框等。

Josh

# 2009年11月4日

我通常将代码块分成类似的部分

/* 页面布局 */

body {
…
}

#pagewrap {
…
}

/* 菜单 */

#ul.nav {
…
}

等等。

我使用以下方法而不是一行 - 我只是不喜欢任何编辑器换行时它的外观，并且我讨厌滚动查找它。所以这种方法在我看来更干净

#pagewrap {
background;
color:#ccc;
padding: 5px 0;
border:1px solid #000;
}

Bilal Çınarlı

# 2009年11月5日

属性按字母顺序排列在一行。

我也尝试在我的 html 顺序中使用相同的排序结构。

– 重置
– 页面骨架按顺序（包装器、标题、导航、内容、侧边栏、页脚）
然后根据骨架中的相同顺序进行块特定声明
– 标题元素声明
– 导航元素声明
– 内容
– 侧边栏
– 页脚

最后
表单元素和错误

Ross

# 2009年11月5日

.class{
border:1px solid;
ass:big;
eyes:blue;
}

易于识别。

但是，需要大量滚动。

我已经习惯了。

Xander

# 2009年11月5日

在开发时，我使我的代码尽可能易读，因为我总可以在最后将其压缩并删除换行符。括号与对象一起使用，并且每个样式之前都有一个制表符。

#div {
_____margin: 0 0 10px 0;
_____padding: 5px;
}

#div2 {
_____position: absolute;
_____top: 0px;
}

等等。

Martin

# 2009年11月5日

单行，一直都是，将来也一直会是。苹果也这样做。大多数大公司都这样做:) 为我节省了缩进和滚动的时间。不介意一个可以为我整理的工具（按字母顺序排列属性），但通过一些自我训练，我可以做到同样的事情。

Justin

# 2009年11月5日

带缩进的单行格式，没有制表符，通常带有变体

/*  -------------------------------------------------------- */
/* - SECTION NAME ------------------------------ */
.container {height:520px; overflow:auto; margin:10px; min-width:980px;}
	.content {background:#fff; padding:4px;}
	.footer {background:#fff; padding:12px 8px;}
.longset {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; width:100%;
	background:#000 url(/images/global/bg_blugrad.gif) repeat-x top; font-size:12px;
	line-height:1.5em; color:#000; padding-top:6px;}

最后一个选择器显示了如何处理非常长的属性集。

我经常使用的另一种变体，通常是在处理其他人使用多行格式创建的 CSS 时

body {
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	background:#000;
	font-size:12px;
	line-height:1.5em;
	color:#000;
	}
	.container {
		padding:6px;
		margin:10px;
		background:#fff;
		}

Kit MacAllister

评论永久链接# 2009年11月5日

我通常像第二个示例一样使用制表符

#id{ color: red; } .class{ font-size: 1.4em; } .class2{ text-transform: lowercase; }

Dusan

# 2009年11月5日

带缩进的单行。多行 css 文件占据监视器宽度的约 1/5，此外，您还必须上下滚动您的屁股。但是，最终，这只是一个个人偏好的问题。

Mark Seymour

# 2009年11月5日

在编写 CSS 时，我倾向于将选择器等放在一行上，然后将属性放在它们自己的缩进行上，除非声明了大约四个或更少的属性。我也喜欢在第一个声明和最后一个声明的开头加上大括号。

.toggle.button
	{ width: 24px; height: 24px;
	position: absolute; z-index: 2;
	top: -12px;
	left: -12px;
	overflow: hidden;
	background: url('images/toggle_normal.png') center no-repeat; }

	.toggle.button a { display: block; width: 100%; height: 100%; text-indent: -9000em; } 


.active { background: url('images/toggle_active.png') center no-repeat; }

Greg

# 2009年11月5日

哇，我惊讶于那里仍然有这么多多行用户。

我主要使用单行，仅在最合理的情况下（具有大量声明的自定义类）使用多行。

docmiller

# 2009年11月5日

我主要使用多行模型。
/* 命名该部分 ------------------------------*/


h1 {
color: black; /* 说明我为什么这样做 */

	...

}
对于一两个值，我使用单行。
.test {
color: red;
margin: 0 0 1em 1em; /* 查看部分 x */

	...

}

/* 下一部分 -------------------------------------*/

cjbates

# 2009年11月5日

有些人对此感到激动，这很荒谬。无论什么能帮助您阅读代码，都可以使用它。但是，如果您花费与编写代码一样多的时间来格式化代码，则可能需要重新考虑您的生活。

记录在案，我通常使用单行，除非我有很多声明。然后我将使用多行。我还添加了一些注释块来划分主要部分。

Arch Focus

# 2009年11月5日

我结合使用多行和单行。
主要是单行，但我真的很不喜欢水平滚动，所以如果超过大约 5 个参数，我会将它们换行。

此外，我通常对位置和大小有许多参数，并且对背景属性有许多参数，因此我将像那样将它们分解，将位置/大小参数放在一行上，将背景属性放在另一行上。

它更加紧凑，并且比完全多行需要更少的滚动。它也不会导致水平滚动（我认为这比垂直滚动更糟糕）。如果您使用单行但打开自动换行以避免水平滚动，那么您最终会得到与我使用的方法大致相同的东西，但您对换行符的确切位置没有那么多的控制。

我还使用醒目的注释符号对我的 css 进行分段，以便我可以快速滚动并找到我正在寻找的内容。

/*----------------------------------*/
/*------->> Globals <<------*/
/*----------------------------------*/
html, body {
	height:100%; width:100%; text-align:center;
	background-color:#FFF; color:#036;
	font:normal normal normal 1em/150% Arial, Helvetica, sans-serif;
	font-family: Arial, Helvetica, sans-serif;}
.pagewrap_cs {
	min-height:100%; width:100%; position:relative; text-align:center; min-width:760px; overflow:hidden;}
td,th {
	color:#036; font:normal normal normal 1em/1.5 Arial, Helvetica, sans-serif;}

h1 {font-size: 2em; color: #036;}
h2 {font-size: 1.8em; color: #036;}
h3 {font-size: 1.8em; color: #036;}
h4 {font-size: 1.6em; color: #036;}
h5 {font-size: 1.4em; color: #006;}
h6 {font-size: 1.2em; color: #666;}

Scott

# 2009年11月6日

我不明白有什么关系，只要每个人都在同一页面上。与多个人一起工作，而他们都有不同的 CSS 编写风格，这是我唯一能想到会产生问题的时候。此外，一旦它进入生产环境，缩小应该会使它成为一个无关紧要的问题:-)

@JBertling

# 2009年11月6日

我更喜欢像大多数人一样使用多行，但我将类似的对象组合在类似的行上以节省一些空间。例如

.col1 { float: left; margin: 2%; padding: 2%; width: 42%; /*这是我的定位行\* font-size: 1em; color: #333; /*这是我的字体属性行\* background: #ccc url() repeat-x; /*这是我的装饰属性行\* }

对于某些元素，您可能必须使用 list-style-type 等，在这种情况下，我通常将它们包含在定位和字体属性之间的单独行中。

希望我讲清楚了:o)

rborn

# 2009年11月6日

总是多行，并且缩进，所以我知道我在哪里，但是当一切准备就绪时，我通常会使用 csstidy 将其压缩到尽可能小的程度，你知道为什么:)

Dkwad

评论永久链接# 2009年11月16日

说的对，

可维护性意味着我喜欢多行格式。但我不会缩进元素。

csstidy 的好处在于，您可以在部署中创建一个步骤，在该步骤中所有 css 都可以动态压缩。

fjpoblam

# 2009年11月6日

单行；空格被压缩；

首先声明“纯”html 元素；“纯”元素内的类/其他后代（显示差异）；

语义 div 在底部；

属性按字母顺序排列

allan branch

# 2009年11月6日

我喜欢简短的 css 表格，所以只在创建新选择器时才按回车键。

Felipe

# 2009年11月6日

在昨天阅读此投票之前，我一直使用带缩进的多行，但在阅读了这里的一些回复后，我决定尝试一下单行（带缩进），并且我已经正式切换到它了。不必不断地上下滚动真的很棒。

Odin Dutton

# 2009年11月6日

单行；没有空格和小注释。如果行变得太长，我会偶尔使用单行换行，这样我就不用横向滚动。

例如。
/* = 忍者保护我的代码。*/ .ninja{color:black;visibility:none;}

John V

# 2009年11月6日

哇，似乎很多人喜欢用他们自己的方式做事:-)
我属于“我使用多行缩进但也使用单行”阵营。因此，当只有一个或两个属性时，它们可以放在一行上——但更多的时候，它会变成多行并缩进。

我听说过一些人说在小窗口中滚动以编辑 CSS——（我看着你 WordPress！）——不是很好，但我个人更喜欢垂直滚动而不是水平滚动，在我看来，如果某些东西水平滚动到屏幕外，更容易错过。

我最近在我的博客上写了关于我自己的CSS 格式化问题，基本上，如果您需要处理其他人的 CSS，您可以使用http://www.cleancss.com/来清理和重新格式化您的 CSS。

gregf

# 2009年11月7日

我不自己格式化我的 css。我使用 compass 和 sass 等工具编写它，这些工具会为我完成格式化。

Metin

# 2009年11月7日

我结合了三种方法

1- 多行格式化
2- 缩进
3- 字母顺序

Odin Dutton

# 2009年11月7日

我不喜欢你设置投票的方式，Chris :( 单行格式有4个选项，而多行只有两个。因此，单行获得第一名的机会要少得多 :P 我想这与获胜无关。

Eduard Seifert

# 2009年11月8日

组合所有内容。;)

Linus

# 2009年11月9日

首先是背景和颜色，然后是位置/浮动、大小、边距和填充，然后是字体……以及其他

#id { background: #eee; color: #333; min-width: 960px; width: 960px; min-height: 480px; overflow-y: scroll; border: 0px; margin: 0px; padding: 5px; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.4em; letter-spacing: -0.02em; line-height: 1.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; z-index: 20; }

Brady J. Frey

# 2009年11月9日

所有内容都使用直线，我用注释对其进行分类以开始，每个部分后有三个空格
/**** 这是一个部分 ****/ h1 {} h1 a {}

Osvaldas

# 2009年11月11日

我在编写 CSS 代码时遵循的主要原则：**可读性**和**逻辑流程**。

我的代码的经典示例

.example { width: 400px; height: 25px; font: normal 15px/28px helvetica, tahoma, arial, sans-serif; color: #666; background-color: #f2f2f2; border-bottom: 1px solid #ccc; padding: 10px 10px 0; margin: 0 0 1px; }

在新行中放置 { 和 } 可以提高可读性。其次，尺寸属性最重要——优先级第一。其次是排版和外观。最后是定位以及与其他 HTML 结构之间的交互行为。实际上，我不理解字母顺序，因为它就像在不同的架子上放香蕉、面包、黑莓和甜甜圈，而应该这样放：面包和甜甜圈、黑莓和香蕉。

无论如何，这都取决于你的想象力如何发挥作用，是否有逻辑。

Sathish

# 2009年11月23日

我必须说，我在这个领域非常混乱，如果超过 3 个参数，我总是使用多行。

否则就是制表符、制表符和制表符 :D

评论