我发起了一个新的调查(在网站侧边栏,RSS 用户也可以参加),关于你如何排序 CSS 属性。 例如
随机
.module {
border: 1px solid #ccc;
width: 25%;
padding: 20px;
position: relative;
min-height: 100px;
z-index: 1;
border-radius: 20px;
}
字母顺序
.module {
border-radius: 20px;
border: 1px solid #ccc;
min-height: 100px;
padding: 20px;
position: relative;
width: 25%;
z-index: 1;
}
按类型分组
.module {
width: 25%;
min-height: 100px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
z-index: 1;
}
空格仅用于强调。
按长度
.module {
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
min-height: 100px;
padding: 20px;
z-index: 1;
width: 25%;
}
其他
如果你有其他排序方法,请在评论中分享!现在无法将它们添加到调查中,但分享永远不晚。
由于我主要使用 SCSS 编码,我倾向于先进行块样式,然后根据需要进行定位,这样读起来更容易,尽管在我们使用的生产环境中,我大多是随机进行的,这样可以更快地完成工作,因为我是我们办公室唯一一个会阅读 SCSS 版本的人。当我必须直接使用 CSS 对现有网站进行编辑或调整时,我肯定会进行随机操作,但我们使用的是单行 CSS,而不是多行 CSS,对于我们来说,在单行 CSS 中查找我们想要的内容在视觉上更容易。当我刚开始学习 CSS 时,我非常注重分组,让我的 CSS 看起来很漂亮,但一旦它到了这里其他人的手里,就被毁了。lol.
随机,但我有一种感觉,一旦我看到这个调查的结果,我的方法就会改变。
Kaidez,这正是我的情况。 :-D
P@tty
我总是从 display / float / position / top / left 开始。
然后是 width/height/padding/margin
然后是 text / color / text align /font size / …
然后是 border / background
最后,带前缀的语句,如 shadow、radius、animation、transform …
我做的一样,只是字体样式在 border/background 之后。
基本上和这个完全一样。定位 > 大小/边距/填充 > 外观内容 > 背景 > 边框 > 带前缀的内容。
我也是,和 Rémi 和 Bill 一样。
是的,我正是这样做的。
通常会在每组之间加一个空行,以便于阅读。
+1 支持 “外部->内部” 方法。
经常要与一位同事争论,他认为字母顺序更合乎逻辑。
我也倾向于将 CSS3 放到最后…
Mike Kretz,我做的完全一样。
对我来说也差不多。同样将 css3 内容放在最后,因为有许多浏览器前缀。
基本上就是这样。自从我们开始为属性添加前缀后,我开始使用组之间的空格。
我做的也一样。这使得以后快速查找内容变得很容易。
我也是。虽然我对排序并不狂热,但我确实有两组明显的区分:第一组是所有块级属性,第二组包含装饰和文本样式。
@Remi 我也是。当将来回到代码中时,如果按类型分组,我会发现声明很快。我通常也会在这些组内进行字母排序。
是的,我也是这样做的。我通常会在 width / height 之前使用 margin/padding,尽管考虑到默认的盒子模型,这可能不是最准确的。
哇,我也是!只是略有不同。
定位 > 背景 > 边距/填充/大小 > 边框 > 外观内容 > CSS3
一直都是字母顺序!当你需要修改内容时,查找属性会方便很多倍!
我做的完全一样,不过我的字体/文本样式在 border/background 之后。这与 Guy 提到的 “外部->内部” 规则一致。
唯一的例外是,有时我会将 line-height 放在 height 之后,因为我通常希望这两个值相同。
就是这个意思。
是的,从定位开始,然后是尺寸,最后是内容和特殊样式,一直都是我的方法。
… 有时我会先进行尺寸,然后再进行定位,但很少。
实际上,重要的是在阅读 CSS 声明并想象元素时直观性。
我也是!然后,出于某种原因,z-index 总是放在最后。
令人惊叹。
我也是!
是的,基本上就是这个顺序。
我也是,我也是。只是最近才开始对我的 CSS 进行排序… 在几个月前它都是随机的。
基本上和 Mike Kretz 的方法一样,只是我没有将带前缀的语句分开。
看起来很多人都独立选择了这种大致的排序方式(略有不同)。
几乎一样:定位、尺寸、背景、字体、padding-margin-border、“前缀”和动画、附件(例如光标)、显示
从未随机
:)
我和你一样。位置、结构、视觉,然后根据需要进行排版。如果有 CSS3 部分,它们总是排在最后。
至于在其他人的代码中工作,我总是用 Firebug 寻找东西,所以他们声明事物的方式对我来说并不重要。
这种方法对我来说也一直是最自然的。
与 Mike Kretz 一样,在一行上。它总是直观的,但看到所有回复证实了它有多么直观。
按类型分组——从字体开始,然后是宽度/高度/边距/填充的测量值,然后是其他内容,最后是长的 CSS3 声明
我也是——字体、大小、杂项,然后是像过渡或变换之类的有趣内容。当我在 SCSS 中编写时,扩展和包含会放在最前面。
我一直想知道是否有最佳实践方法。显然,这只是个人偏好。
按类型,但按类型字母顺序。
我和你一样。
我也是!
长度和类型的组合。我喜欢高效的代码,但我也是强迫症患者,所以就是这样……
一样。强迫症患者。
按字母顺序——因为更容易找到东西。
就是这样。赶快跟上,人们。
100% 同意!
在我看来,这是最好的方法。这是唯一一种无论谁编写都可以快速轻松地查找规则的方法。
除非存在一个行业规范化的类型分组方法,所有开发人员都可以一致地遵循,否则按类型分组只会变成一个延迟马戏团,因为使用这种方法的开发人员很少自己按相同的方式进行,更不用说彼此之间了。
我认为按字母顺序组织属性并没有那么大的价值……属性数量应该不会太多,以至于必须按字母顺序查找会产生很大影响……但我可能错了……我从未按字母顺序排序过我的属性,所以你可能发现了什么。
@Jordan - 区别很大。如果你在团队中工作,经常跳进由其他人编写的现有项目,你必须猜测他们使用哪种组织方式。这可能需要几分之一秒到一秒钟的时间来扫描和理解。
使用字母顺序,你确切地知道每个样式属性是如何组织的,它节省了时间和脑力,不必扫描你正在寻找的内容。它让你能够专注于“我想做什么”,而不是“我想做什么在哪里”甚至“我应该把正在做的事情放在哪里”。
按字母顺序以提高 gzip 压缩率。选择器也是一样。我还对选择器进行分组,这样特定 CSS 属性就不会重复。
按字母顺序……但在必要时按类型。例如,我会将顶部、左侧、右侧和/或底部属性分组在 position 属性之后——这样更有意义。
边距和填充总是作为一个块。
否则,其他所有内容都按位置排列。我不太用前缀,因为 prefixfree.js 可以轻松解决这个问题 :)
我一样
按字母顺序。有时我会担心自己做错了,但我无法想象以其他方式做。
对我来说是随机的。
当然要按类型!人类不会按字母顺序思考或工作。
是的,完全同意我的观点 :)
按类型,出于习惯。我从未刻意这样做,只是多年来自然而然地形成了这种习惯。我想如果我足够挑剔地按字母顺序排列,写样式所需的时间会增加 4 倍。
随机,但随机通常按类型部分排序。
我从来没有因为属性太多而无法读取属性。
我通常随心所欲.. 我越试图专注于分组,我的创造力就越低。因此,我只是随机地做,它最终会成为半分组。但是,我倾向于将我的 css3 放在最后
随机,但我总是从宽度和高度开始。其他内容随机排列 :)
随机地 :)
按类型
* 内容(如果生成内容,这样你就可以直接看到它,如果你看不到 :before/:after)
* 显示
* 位置
* 框属性(宽度/高度、填充/边距和边框)
* 位置属性(顶部、右侧、底部、左侧)
* 背景属性
* 字体属性
* 杂项(不透明度、过渡等……)
+1,一路到底。虽然我必须承认,z-index 和 zoom(IE hasLayout“hack”)通常放在最后。我想我无法完全摆脱按字母顺序排列的冲动……
哦,实际上,我应该修改一下。我通常将单个位置属性放在浮动和定位之后,然后 接着是框属性(当然是从外到内)。
我们在这里决定按字母顺序排列,因为开发团队无法保持一致的类型分组方式——以及如何进行分组等。这是一个很好的方法,但对于我们中的几个人在一个项目上工作,如果按字母顺序排列,更容易扫描和查找属性。
我从结构开始,比如
然后可能是一些样式
然后是字体部分
除了.. 用 SCSS 编写.. 所以,更复杂一些。
在团队中,我使用团队其他成员使用的任何约定。
对于个人项目,我会按最相关的项目分组在顶部。
内联元素通常与排版有关。
块级元素通常与显示、大小和位置有关。
我可能疯了,但这对我来说是有效的。
我一开始随机地编写我的 CSS,然后当它变成更多属性时,我会将它们分组在一起,以便在单个元素包含超过 5 个属性时更容易访问相关的属性。
大约 4 年来一直是 A-Z 的人。确实花了一些时间才能进入状态,但在做了一段时间后,它就成了第二天性。我只是觉得对我来说,我总是知道东西在哪里,这会加快我的速度。
我想每个人的大脑工作方式都不一样,所以对你来说什么有效就是最好的。但是,我很想看到一个关于这方面的研究或一些信息。
我选择了“按类型”,虽然示例不是我认为的“按类型”。我这样排序:
一些要点
– 位置属性按边距值排序(顶部、右侧、底部、左侧)
– 所有带前缀的属性都在底部,每个属性都属于它们自己的组。
– 首先是内部样式(背景,填充),然后是外部样式(边距,边框),然后是外部外部样式(如轮廓)。
PS: 奇怪的缩进是这个评论系统中的一个错误。
我做
浮动,清除,定位,顶部/左侧/底部/右侧,宽度,高度
文本,行高,字体样式
显示,光标,等等。
边框
背景
CSS3 属性(盒子阴影,文字阴影等)
我用字母顺序排列了好几年,因为我认为更容易扫描和找到特定的属性,但我倾向于按类型进行分组,尤其是我使用 Sass(显示/盒子模型/定位、颜色、字体、其他)的时候。
类型分组的问题是,没有规则,所以你需要编写自己的规则,尤其是在与团队合作的时候。
对我来说是随机的,但有时我会将相关的样式一起分组,有点像 Wouter J 做的那样。
我想我正在切换到这个。逻辑。易于解释。
我通常按照我自己的优先级顺序排列它们。例如,我会优先考虑技术结构而不是外观。显示、宽度、高度、定位、边距和填充比颜色、字体、背景等更重要。
对我来说很有效,但大多数情况下,任何秩序感都会很快消失,但我尽量保持一切井井有条。
.module {
display: block;
width: 100%;
height: 300px;
position: fixed;
top: 0;
left: 10px;
margin: 10px 5px;
padding: 20px 30px;
color:#fff;
background: #333 url(‘blah.gif’) repeat-x top;
}
虽然短期内可能需要更长时间,因为将它写得杂乱无章非常诱人,因为它通常会从你的脑海中冒出来,但它会在将来当你回来修改和调整时节省时间。
Scott
完全随机,但我确保它们不是 padding-left、right 以及 0 0 0 0
哪个渲染速度更快?
这比它看起来更重要。
我认为属性的顺序对加载速度没有任何影响。
但我们可以做一个测试…
我考虑的是渲染时间,而不是加载速度。一个测试会很棒。
顺便说一句,我习惯于按字母顺序排列它。
我有一段时间没有直接编写 CSS 了,我主要使用 SASS,但我总是按字母顺序排列属性,因为我发现更容易扫描和找到它们。
我使用从 Raphael Goetter 学到的顺序:http://blog.goetter.fr/post/14503308074/ordonnez-vos-declarations-css,使用我创建的一个工具:http://csslisible.com
本质上是随机的,但有一些分组。
新的块将以分组类型为目标进行创建,但作为 CSS 文件开发过程中新添加的内容很少会遵守初始排序。因此,对规则的新添加将位于底部,这将导致有序的上半部分和无序的下半部分……所以是随机的。
那么如何投票呢?如果我有时间重构 CSS 项目,我会选择有序。但现实情况是随机的。
现实获胜,我投票随机。
你显示的“随机”实际上并非随机。它可能更像是电影结尾的滚动字幕。也就是说,样式是按出现顺序添加的。
字母顺序。
Firebug 和 Chrome Dev tools 按这种方式排序。当在一个大型团队中工作时,移除由类型排序创建的灰色区域会很好。
我完全同意。像 Firebug 和内置的开发者工具这样的工具以字母顺序显示“计算”结果。当我的调试工具与我的样式表布局匹配时,更容易引用。太多意见可能会插入到哪些属性具有优先级中。
这里也是一样的理由。尤其是当我在 Firebug 中进行更改,然后将其复制回我的 CSS 文件,然后将其提交到 GIT 时,更容易看到更改(行不会改变位置)。
这里也是一样!我用 Firebug 进行调整,然后复制回我的文件。完成后,我在底部添加特定于浏览器的语法。
我在 Firebug 中编写我的 Css,之后我将其复制/粘贴到 .css 文件中,所以我的顺序是字母顺序,我认为这更快,因为你无需为了任何更改而重新加载页面。
字母顺序。
我听说过文件中的任何重复模式都会导致更紧凑的压缩,因此采用某种系统——行长、字母顺序等——可能会对此有所帮助。我们谈论的是可能只是一两个字节,但我认为,为什么不呢?
IDE 应该在构建过程中对 CSS 属性进行排序。
我从来没有想过要以某种方式对 CSS 属性进行排序。所以,我的答案是随机的。
也许很奇怪,但我按照我的 HTML 启动页面中元素的顺序来做。可能不是最好的方法,但它倾向于将事物从上到下保持得相当有序。
例如:标题、内容、页脚等等。
Anna,这不是这个调查的主题。你指的是组织选择器+属性的顺序,但这是关于每个选择器样式中属性本身的顺序。
组织选择器+属性分组并不像“字母顺序”或“按类型”那样简单,因为组织样式的方式会影响级联到后续选择器+属性样式中的样式。了解如何在全局级别上组织样式表需要对项目类型、其特征和未来规划进行大量的考虑。
我按性取向排列我的。
我按类型分组。
生成的内容
显示
位置
盒子模型
位置属性(顶部、左侧等…)
背景
字体样式
杂项(过渡、不透明度等…)
我尝试按字母顺序排列,但有时对于块级元素,我倾向于将高度和宽度紧挨在一起。我通常也会将位置及其值放在底部。
它必须是随机的,对吧?开始规划如何构建 CSS 属性需要太多思考了!
此外,当你意识到自己错过了一些东西时,人们真的会回去以正确的顺序添加它吗?不可能!
随机是浪费的,花时间做好它会成为第二天性。此外,许多文本编辑器可以让你在写完后轻松地重新排序。在 Sublime 中,只需使用 Ctrl+Cmd+(↑ 或 ↓) 就可以将一行代码向上或向下移动,甚至不需要选择或剪切它。
我一般按类型排序。在使用 SASS 和 LESS 之前,我的排序方式有点随机,但我总是先用尺寸属性,然后是位置属性,最后是颜色等。
我不知道为什么或怎么开始这样做的,但我一直都是按照背景、颜色、排版、显示、大小和位置的顺序排列属性。最后一个是带前缀的属性。但是,我想我会改变我的顺序,从位置和大小属性开始,正如许多人建议的那样。
我按照 Firebug 显示 CSS 的方式,按字母顺序排列。这样编辑起来更容易,尤其是在浏览器中进行样式设置的时候。我经常从 Firebug 复制粘贴到 CSS 表格中。
我会选择当时看起来最合适的方式。不过,对我来说,几乎是本能地先从位置和大小开始(宽度、高度、浮动、边距、填充),然后专注于设计(颜色、排版),最后,我再处理 CSS3 的细枝末节。
任何类型的逻辑排序都会让你稍微慢一些,但实际上,我相信那些以“随机”方式排列样式的人,他们的排序也有一定的道理。
我开始按类型分组,并遵循 Jonathan Snook 在他的 SMACSS 书中提到的示例:
1. 盒子
2. 边框
3. 背景
4. 文本
5. 其他
现在我已经加入了一个更大的组织,每个人都采用了相同的方法,这非常方便。
我实际上在显示器上粘了一个便利贴,上面写着这些内容。
http://cl.ly/0q1o1u3L2T2g2v0q0A0F
我想要那个工作区!
我看不到便利贴上写着什么。
这是便利贴的近景照片
http://cl.ly/15403y2n372j0H0m180K
上面只写着
1. 盒子
2. 边框
3. 背景
4. 文本
5. 其他
类型和随机的混合!
按类型分组。类似于 https://github.com/necolas/idiomatic-css#declaration-order,我按类型排列 CSS,但我对他的做法略有不同。
我首先是结构(显示、位置、宽度/高度、浮动、清除)。与 necolas 不同的是,我接下来做的是结构样式(边距、填充),因为我认为它们会影响布局。他做的是填充、边框、边距。我通常会尝试做边距、填充、边框。我知道这与盒子模型不符,但边距对布局的影响比填充更大。接下来,我会做像边框、背景颜色等盒子样式属性。然后是字体、字体颜色,以及像渐变等东西,最后是带前缀的属性和多行代码,因为它们通常比较突出。
直到最近,我一直都是随机排列,但现在我积累了更多经验,我按字母顺序排列。这在以后查看我的 CSS 文件时非常有用!
我使用字母顺序排列,但将带前缀的属性按不带前缀的属性分组,并将顶部、左侧、右侧和底部分组,按照这个顺序排列(这样它们就在“t”位置)。
我倾向于将按类型和按字母顺序结合起来。例如,我发现对大多数属性进行字母排序要容易得多,但宽度和高度除外。这两者是我的例外。小时候,我一直被教导先写宽度,再写高度,所以一直延续至今。为了便于书写,我会对所有属性进行字母排序,并将宽度和高度放在最后。这种混合系统非常适合我!
按字母顺序排列,除了高度和宽度,我会将它们放在同一行。这样更容易扫描,规则也足够简单,团队可以协同工作,看起来就像一个人编写了所有代码一样。
我通常按类型分组。如果需要回去修改代码,这样更容易。我可以看到它作为基础、视觉效果、不普遍的前缀代码、位置等等。
按字母顺序排列。只有一种排列字母的方式,而且每个人都应该知道字母顺序(至少我希望如此)。分组基于用户偏好,并非对所有开发人员都适用。
我按字母顺序排列,因为它是唯一通用的顺序。如果社区提出一些“规范”并建议一个通用的按类型排序,并且被广泛采用并在 IDE 中自动排序,我一定会采用这种方式 ;-)
你怎么想?
我选择按类型对属性进行分组,但即使这样,分组也很随机。例如,尺寸、位置、边框、字体样式——即使是我,也永远不知道哪个组先排列,哪个组后排列,等等。 ;-) 我的意思是,这并非毫无道理;我会以一种对我来说有意义的方式排列,即使它不是行业最佳实践。但话说回来,我真的不知道有没有“正确的方式”。
我真的对字母顺序排名的第三名感到印象深刻。我只能够以这种方式编写代码。这样很容易找到属性,并且可以显著减少重复声明。
按逻辑顺序
显示
位置
z 轴索引
顶部、底部、左侧、右侧
宽度、高度
填充
边框
边距
文本、字体
文本阴影
背景
阴影
我按字母顺序排列。原则上,我喜欢按类型排序的想法,如果我是唯一参与的开发人员,我可能会这样做。然而,我经常编写要由其他人使用的样式表,而且没有明显的、一致的按类型排序方法。因此,任何更新我的样式表的开发人员都将被迫学习我的类型排序方法,或者使用不同的方法,这会导致样式表不一致,从而难以使用。相比之下,每个人都知道字母表。
此外,按字母顺序排列的一个小好处是,它几乎可以防止编写重复的声明。
当然,按字母顺序排列的缺点也显而易见:声明是以一种最终会导致功能混乱的方式呈现的。
我要说的是:如果我按类型排序,我可能会在类型内进行字母排序。
最终会变得随机,虽然一开始不一定是这样。
我通常会按照计划将它们按组排列。然后,随着额外的小调整出现,它们会被添加到底部。我不确定我编写的最长单行 CSS 声明有多长,但我确定少于 20 行。当我有一个可能包含 300 多行的 CSS 文件时,扫描正确的 20 行并不困难。
按字母顺序排列!
我的排列方式看起来很随机,但实际上并非如此;它是按时间顺序排列的;从左到右按照我编写的顺序排列(我通常将选择器的所有属性放在一行)。偶尔也会进行分组,例如,如果我决定更改边框并添加圆角,因为我的光标已经在那里,但除此之外,基本上都是按照我编写的顺序排列。
令人惊讶的是,我用这种方式并没有遇到任何困难。通常,单个元素的属性数量不足以让我花太多时间去组织它。
对我来说,更大的问题是如何排列选择器:我试图以大致相同的顺序排列它们各自的元素在页面上的显示顺序。这并不总是完美,但它确实帮助我在工作时进行可视化。
很简单。
首先我决定它的大小,然后我将它放在我想放的地方,然后我让它看起来漂亮。
让它看起来漂亮的代码没有任何特定的顺序。
我按字母顺序排列,为了将宽度和高度放在一起,我使用了 Stylus 透明混合。
当然,按类型分组。这是*正确*的方式 :)
按字母顺序排列!
我主要也是按字母顺序排列。
随机排列。我发现,当我尝试在这个级别应用规则时,我会开始花太多时间在代码上,而这不会带来任何直接的好处。我认为,CSS 组织得过精细也不好。
我通常没有太多属性,所以我认为它从来没有拖慢过我。
我是随机的,但我也会对它们进行分组。仅仅是为了方便。比如我会把 background-color 和 color 放在一起,把 border-radius 也放在一行。
我并不疯狂地注重这些,只是我有一些细微的习惯。
我肯定按字母顺序排列。我发现使用这种系统,在将来进行更改要快得多。训练自己很痛苦,但一旦你掌握了这个系统,就会非常值得。
按字母顺序。一个更有趣的问题是,你如何排列你的 CSS 选择器?
我按字母顺序排列。因为任何人在任何技能水平上都可以掌握它,而且其他方法经常导致多个声明相互覆盖。
通常对我来说是随机的。我想按类型会更随机。我通常从背景颜色、宽度/高度、排版、边距、填充等开始。我从来没有想过按字母顺序排列它们。嗯……
我总是按字母顺序列出我的属性,但这是因为很久以前我决定遵循谷歌开发者编码标准。
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml?showone=Declaration_order#Declaration_order
eu uso o modo alfabético, assim quando estou procurando uma propriedade fica mais fácil…
我更喜欢使用字母顺序
有一些例外
在那里我使用主要属性(如这里的 display)作为参考。
我还对供应商替代方案进行分组,并使用常规属性在列表中定位该组
我过去尝试使用分组方法,但有时它可能模棱两可。因为某些属性可以用来实现不同的功能。
另一个问题是,每个人都可以有自己的分组方法/顺序,但只有一个字母顺序。
此外,当你对 css 变得熟悉时,分组方法就会变得毫无用处。它会达到一个点,即在 css 中查找属性比根据结果查找使用的属性更难。
因此,一旦你了解 css,真正的问题不在于找到它是什么,而在于找到它在哪里。字母顺序对我来说是最好的解决方案。
现在是随机的,但当我看到结果时,我会相应地进行更改。
感谢您的投票!
我完全是那种,“嘿,你们这些属性!听着!你们现在要服从命令!”。似乎效果很好。
…配上培根!
半随机,相关属性分组在一起。当我更接近最终形式时,我会按照 T R ou B L e 顺序排列边距…
如果定义变得太大,这通常表明我需要重构为单独的 mix-in 类。然后我问自己一些问题,比如:“.myclass 总是红色的吗?或者我应该使用?”
哎呀,它没有对我的示例进行 HTML 编码…应该写成:“…我应该使用 <div class=”myclass error”>
按字母顺序排列,CSS 3 在底部。
结构/字体-文本/颜色
.class{
width:value;
height:value;
padding:value;
margin:value;
border:value;
....
font-family:value;
font-size:value;
text-align:value;
text-decoration:value;
....
background-color:value;
border-color:value;
color:value;
....
}
我按我想到要将它们添加到样式表中的顺序对 CSS 属性进行分组,因此我会归档在随机文件中。
虽然我倾向于在它们的分组方式中出现模式。比如 margin 和 padding 以及 width/height 往往会自然地放在一起。不过,有时我故意在回去编辑时对它们进行分组。
我更喜欢按类型对声明进行排序,但也按声明之间的关系进行排序(例如,我将 padding 声明放在 margin 旁边,因为它们相似)。
我喜欢先声明基本属性(如 padding、width 和 height),然后声明更“复杂”的属性(如 box-shadow)。
但是,我想我会尝试按字母顺序组织声明。在看到它之后,它似乎是最好的方式,因为它很有道理!
按类型在线排序:http://csscomb.ru
按字母顺序!!
最新写入的位于底部,这可能最终是随机的或按类型,具体取决于我当时正在处理什么。
分组和(分层)排序还可以更容易地查找错误。
举个例子,
绝对定位元素和浮动元素会覆盖 display 声明,除了 display: none。
如果你按以下顺序排列声明
位置
float
显示
查找为什么你声明的 inline-block 变成 block 会变得容易得多。
只需查看当前声明前面的任何覆盖属性。
我刚刚意识到我所做的事情一点也不随机——它是“最新写入的在底部”。而且我从未在样式块中查找声明时遇到过任何问题!
我倾向于按类型进行分组,在… margin..border.. padding.. width/height.. background..etc …中向外工作,我已经使用 less 一段时间了,并且更多地使用在当前的 bootstrap 项目中。
我通常在开始时按字母顺序排列 CSS,但如果我必须调整属性(我将这样做),它最终会将最新的样式规则放在底部以方便起见。当需要进行润色和重新调整时,Firebug 是我使用最多的工具。
我是随机的。这不好吗?
对此并不严格,但通常从外到内进行
大多数时候我并不介意,因为我之后会梳理它。
我有足够的事情需要担心,而不必担心 border-top 是否应该放在 border-radius 上方……因为 r 在字母表中排在 t 之前……我从来没有在扫描 CSS 属性以查找特定选择器时遇到过问题……也许这只是我……看看统计数据,我似乎属于少数派……尽管是相当大的一部分少数派……
我也是从外到内进行排序的。这很有逻辑,因为元素的定位是我首先要做的事情。
我按字母顺序排序。
我按字母顺序排列,但定位之类的除外。(对于这类事情,我使用 2 个空格而不是 4 个宽度的硬制表符)
先演示,然后是布局。在制作移动优先的响应式网站时更容易。
按字母顺序排列 :)
很好的观点!
目前我按字母顺序排列。
关于如何管理 css 代码的不错的教程。
谢谢!
在阅读本文之前,我通常使用随机顺序。
但我真的很喜欢按类型分组的顺序。它看起来更舒服。
你怎么能按字母顺序排列它们?这太疯狂了……我不知道我到底会在代码中写什么,直到我写出来。要按字母顺序排列,你必须在写之前确切地思考要写什么。
为什么?你知道你可以将光标放在你想要的行上,并在两个现有的行之间插入新行吗?
我只是在开玩笑,但当我读到你的评论时,它看起来像我们不能把代码放在上面的行(对不起,英语不是我的母语,我尽量做到尽可能容易理解 ;-)), 就好像我们在用打字机编程一样。
很高兴看到很多随机的 – 我想这取决于你是独自工作还是在团队中工作。
我对样式表组织也不太擅长。我更担心的是 – 通常使用东西在前端出现的顺序(有点像)
我更倾向于担心前端的外观!
我介于随机和按类型之间,但我敢说我更倾向于随机。
我认为这种“按类型分组”对我来说非常有用。它帮助我更快地调试。
我之前真的没有考虑过,但我确实倾向于按类型组织。不是故意的,也不是每次都这样。
如果未按类型排序,我通常会保持原样,但有时它确实会让我足够烦躁,以至于我会复制粘贴到更理想的位置。
对我来说一个很重要的事情是,宽度和高度始终必须挨在一起,并且必须按照这个确切的顺序排列,因为图像最常通过宽度优先于高度的大小来引用。
无关紧要:我在侧边栏里看到了一个尿布广告!
完全随机
我把东西分组在逻辑部分。尤其是在我处理响应式设计时。
我也有倾向于按大小排序。从小到大。
非常非常随机,但看了这么多之后,我很期待看到民意调查的结果。
随机!!
随机。
我有自己的逻辑
显示
位置
浮动
背景
宽度
高度
边距
填充
字体系列
字体大小
颜色
文本装饰
文本阴影等
边框
边框半径
盒子阴影
z-index
我只在大型规则中对属性进行排序,并且按类型排序。
我有一个秘密词(不能告诉你是什么,它是秘密的)然后我用每个属性的第一个单词为每个类拼写出来。
这很有趣,但这意味着即使我不需要,我也必须分配一个属性(并使其等于空)。
你可能称之为强迫症,我称之为糟糕的造型。
.selector
{
content: ;
color: ;
font;
background: ;
border: ;
padding: ;
margin: ;
position: ;
width: ;
left: ;
float: ;
display: ;
text-decoration: ;
box-shadow: ;
z-index: ;
}
我一开始很好地一致地将我的样式分组到部分中,但在项目进行到一半时,我倾向于随机地把东西扔进去^^
按字母顺序,我认为这是在大型团队中工作时最简单的解决方案。
我把大小和定位放在最前面,然后是盒子样式,然后是文本样式。
例如
width:30%;
height:100px;
margin:30px;
background:#efa;
box-shadow:0 0 10px #000;
font-size:20px;
text-shadow:0 0 3px #fff;
color: #fff;
当然按类型分组!
对我来说是随机的。
随机的……对我来说效果更好,如果我不必考虑排序,我可以更快地编写代码……此外,如果我需要快速更改一些东西,只需按 cmd f 并用这种方式找到它……
按类型,首先定位,然后是字体,然后是其余部分。
匆忙> 随机
大多数时候> 按类型分组
当有更多时间时> 按类型分组 + 按长度分组
对我来说是按字母顺序。它被普遍理解,而其中一些基于类型的方案可能对一个人有效,但其中许多方案虽然相似,但存在细微差异;大小可能在定位之前,也可能在定位之后,也可能在同一行。
按字母顺序排列使我更容易找到我想编辑的内容,并防止我在过去使用基于类型的排序方案时不小心在同一行添加了两个填充定义。
当然,从目前的评论数量来看,这显然是一个相当令人感动的主题。
按字母顺序,因为它是唯一一个每个人都直观理解的通用标准。按类型分组仍然留下太多选项。此外,字母顺序是几乎所有网络检查器工具使用的标准,无论是内置在浏览器中的还是第三方的。
嗨,Chris,
我经常使用 Firebug!所以我按字母顺序排列。你是如何排序你的 CSS 的?
当然按类型分组。当我写出宽度时,添加高度(如果需要的话)对我来说很自然。边距按填充、等等。对我来说,当出现宽度、边距或填充问题时,能够很容易地找到它就变得更加明显了。
我把我的按属性类型分组,按照逻辑顺序。例如
我通常不给它们排序,但当排序时,我会按类型排序,不留空行。实际上我认为这并不重要。
位置
浮动
尺寸
边距
填充
背景
边框
.
其他所有内容按字母顺序排列。
.
颜色
不过,我还没有找到一个让我真正满意的 CSS3 动画/选择器位置。
另外,当人们在冒号后面不加空格时,我真的会很恼火。难看!
在我几次出现同一个属性被列出两次(为什么我的填充更改不起作用?!)的失误后,我通常按字母顺序排列它们。
我确实看到了按类型排序的价值。我想在一开始就知道某样东西是 display:block、浮动还是定位。将高度和宽度,以及顶部/底部和左侧/右侧放在一起似乎也是个好主意。将 CSS3 选择器分组在底部也很有道理。我愿意改变。
随机的……不。即使我赶时间也不行。
按字母顺序排列,按类型分组是一个好主意。
一个月前是随机的,现在是按字母顺序排列。我遵循 http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#CSS_Style_Rules
一旦按照你想要的顺序组织好,如果你和我一样吹毛求疵,就使用这个脚本使它可读!
#! /usr/bin/perl
use strict;
use warnings;
while (){
s/([-a-z ]+:([^link|visited|hover|active]))\s*(.*)/sprintf(“%-32s”,$1) . “$3″/ie;
print;
}
Bingo! 看看 CSScomb 这里,或 这里。它看起来完全可定制,并且适用于一大堆文本编辑器!
实际上……我刚发现 Sublime Text 2 具有内置的排序功能……选择要排序的行(不仅仅是 CSS),按 Ctrl/Cmd+Shift+P,然后输入“sort”,按回车,bam……您的属性现在按逻辑顺序排列了!
Andy Ford 有一篇关于这个问题的精彩文章。我一直在使用他的排序方法(大部分情况下)大约 3 年了,当你重新审视一个项目并且需要快速查找东西时,它确实很有帮助。按字母顺序排列听起来很棒,但对我来说,最终会更费时间……“我不喜欢按字母顺序排列的原因是,在我看来,某些属性具有内在的逻辑联系,不应相互分离。” -Andy Ford
…… 这是该文章的链接
http://fordinteractive.com/2009/02/order-of-the-day-css-properties/
我按字母顺序排列它们。由于我的大多数类都将布局、颜色和字体相关的属性分开,所以我没有按这些属性进行排序。
按字母顺序排列,从第一天起。因为最终,没有其他方法会更有意义(例如,按什么分组?)。
Chris,你让我思考了自己在做什么,我知道我没有选择你投票中的任何选项,但我不知道自己实际上在做什么。所以你让我思考了这个问题,以及原因。谢谢。
就我个人而言,我认为任何系统性的、按字母顺序排列的、按行长度排列的或按类型分组的排序都不可能真正维护得当。
是的,我们可以维护字母顺序或其他方式,但这**不是**维护,那只是有一些任意的组织方式,并没有真正像它可以做的那样帮助维护。我们应该维护网站的**样式**,而不仅仅是一堆 CSS 属性。
我们应该能够维护我们的 CSS,而无需在进行更改后重新排序其属性。为什么呢?因为在多用户版本控制系统中,我们需要看到更改,并且只有更改,不应该有更改看起来像删除了一行并添加了另一行,更改应该看起来像更改。
在创建 CSS 规则集时,其中的属性应该按感知的重要程度排列,即哪些属性对所需的样式贡献最大。
由于我经常在编辑 CSS 和查看其测试页面在 7 个浏览器中的情况之间切换(哦,你必须创建一个广泛的测试页面,这是至关重要的)。生命太短暂,无法在完成对组件的样式设置后重新排序属性。
它往往会变成这样
所以它是按我在编写时目标的优先级随机排序的。
针对某些浏览器的任何修复程序都将作为解决问题后附加到底部,并且该属性的(或其原因)目标始终有注释,非常重要!
但是我们不需要逐行注释,在一行单独的注释中放置在多个属性之上,然后空一行,对于像这样的注释来说就足够了
因此,这样就能清楚地知道每个属性存在的理由。(你有没有维护过 CSS 并且想知道某个特定属性是否绝对必要?我有。)
假设顺序是随机的/按字母顺序排列的/按类型排列的/按行长度排列的,我敢肯定,在短期内,这可能非常漂亮,并且看起来很有道理,但是几周/几个月/几年后,当你的短期记忆忘记了你当时在做什么时,你会回到一个美丽的混乱状态,你不可避免地会发现自己不得不启动你最喜欢的网页检查器来让你的短期记忆重新熟悉你到底做了什么。
顺便说一下,我投票的是“随机”,因为一旦我有了实现某个目标/理由的属性,通常不会有太多属性需要在意它们的排序方式(如果有很多规则,那么这个目标/理由可能太笼统了),但是,它仍然倾向于让属性按**对所需目标的贡献最大**的顺序排列。
我们使用:github.com/miripiruni/CSScomb.git :)
更有趣的是:你是如何对你的选择器进行排序的?:)
我从对元素结构影响最大的属性到影响最小的属性进行排序,从外到内进行。
这些属性排在首位,因为它们直接影响元素的可见性/结构和/或位置。
显示
float
位置
top
left
z 轴索引
overflow
这些属性排在第二位,因为它们直接影响元素的大小,同样是从外到内进行。
margin
边框
填充
width
height
这些属性接下来,因为它们影响元素内部内容的大小和外观,在许多情况下,会间接增加元素的大小,使其比最后一组属性更有影响力。
font-family
font-size
line-height
font-style
font-weight
text-align
text-decoration
text-transform
color
最后一组包含不直接链接到其他属性组并且根本不影响元素大小的属性。
背景
cursor
outline
box-shadow
transition
我知道大多数人不会这样做,但我将属性写成一行,如下所示
.selector { display: block; margin: 0px; border:0px; padding: 0px; font-size: 1.2em; line-height: 1.6em; color: #000; background: #fff; cursor: pointer; }
我知道很多人不喜欢这样,但我讨厌缩进(即使我的文本编辑器会帮我做),我讨厌当你这样做时,没有缩进的行末括号看起来很糟糕,而且这种方法比缩进占用的字符更少。
我知道这有点奇怪,但我的结构适合我过度逻辑、完美主义的思维。
我有自己的方法和自己的规则,对其他人来说可能很奇怪,但我几周前在这里解释过:http://visuellegedanken.de/2012-05-29/my-css-coding-style-part-i-css-properties-order/
Twitter 的家伙对此非常重视。
https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js#L35
按半特定的顺序分组:position / margin / padding / background / border / text / display / float / cursor / z-index
我总是选择分组。
使用 SASS/SCSS 时,我通常先包含所有 mixin,然后按类型排序,最后缩进规则以对齐。
输出不一定是那么整洁,但我通常会将其压缩,因此无关紧要。
我过去一直遵守 ThinkVitamin 这篇文章中的建议(https://css-tricks.org.cn/new-poll-how-order-css-properties/),但最终出于两个原因放弃了它,转而使用字母顺序排列
– 团队不再就分组进行辩论,我们都同意哪些字母排在哪个位置
– 它与我在 firebug 和网页检查器中看到的列表相同
在观看他的“Lynda.com 教程”之后,我成了 Chris Coyier 的粉丝。
这里已经有应用程序可以很好地对您的规则进行分组
http://csscomb.ru/about/?lang=en
我的排序往往比较随机,尽管我会对它们进行一些潜意识的分组。定位、字体、装饰等的样式往往会出现在一起;mixin 始终放在最上面。
我确信我应该更严格地对待它,尽管如此。
我尝试按类型进行分组,但通常在几次修改后会变得有点随机。
我认为这场辩论有点疯狂,原因有两个
1) 对于按“行长度”进行组织的人,一个问题:供应商前缀怎么办?它们不会使前缀未添加的声明的长度超过它,从而破坏您形状优美的代码的视觉完整性吗?:\
2) 对于按“类型”进行组织的人,这很好。但是,当一个过渡影响一个属性而不影响其他属性时怎么办?就我个人而言,如果我只过渡一个阴影,我希望该过渡声明在阴影旁边。此外,我很难理解边距和填充不影响“定位”的想法。这似乎是一个任意的分组。
@gib:是的,字母是无法争辩的。当事情变得很长时,它似乎简单得多。不用四处寻找东西。它也是检查器倾向于使用的思维方式。
我在编写自定义样式表时会进行分组。
我根据规范章节和属性-值对对它们进行分组。然后按规范章节排序。
http://fcpeic.cat/estil-screen.php
大部分是随机的,但我喜欢长度类型的 CSS,对我来说太疯狂了 :)
对我来说,按类型分组是最好的。
CSS 的顺序不是必需的,但顺序确实有帮助,并且能让我们更好地完成工作。
对我们来说是随机的 :)
按此顺序
1) 按结构/功能分组,辅助类最后。每个组都用标题和一些有意义的解释进行注释。
2) 在每个选择器中,通常使用以下顺序。
a) 显示类型(在需要的地方)
b) 尺寸、边距、填充
c) 背景
d) 边框
e) 字体和前景色
我一直使用简写,并在可能的情况下使用缩短的 CSS。
我尝试在大多数情况下使用以下顺序
1) display/position
2) background
3) width/height
4) font/colors/etc
5) margins/paddings
6) borders/border radius
7) misc
始终如一地使用它可以帮助我轻松找到我正在寻找的属性。
实际上,我有点随机。我在 Firebug 中进行很多实时编辑,在我完成编辑后它会重新排列我的属性。所以在看到那么多之后,我开始按照它们的方式进行排序。不过,有时我必须做自己的事情。它们倾向于拆分我认为应该放在一起的东西……为了清晰起见。总的来说,我不太挑剔。
我主要以逻辑顺序排列我的 CSS,并使其类似于某些 Firebug 等显示方式。
首先是尺寸,按照 Firebug 和 Chrome 在您检查元素的度量时显示的顺序。
宽度/高度、填充、边框、边距。
然后是定位(取决于元素,有时我会交换这两个),带有位置、坐标、z-index。
然后是一些选项,比如行高、字体大小、字体粗细等。最后但并非最不重要的是背景内容。
老实说,对我来说,度量和定位/显示选项是元素的_主要_选项,而背景是最不重要的,所以我真的不明白为什么人们不能首先拥有度量和定位(基本选项!)。
但我已经在这一行工作了多年,刚开始的时候我的 CSS 也主要是“随机的”。