超过 10,000 人参与了投票:最流行的 CSS 属性排序方式是 **按类型分组**。
以下是投票结果的细分
**按类型分组** (45%) 紧随其后的是 **随机排列** (39%)。 **按字母顺序排列** (14%) 的受欢迎程度要低得多,只有少数人使用 **按行长排列** (2%)。
作为记录,**按类型分组** 类似于这样(大量借鉴自 Nicolas Gallagher 的 Idiomatic CSS)
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #333;
margin: 10px;
/* Color */
background: #000;
color: #fff
/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;
/* Other */
cursor: pointer;
}
它可能不会像那样用注释专门标记,但属性会彼此相邻。
大多数人比我更有条理!我不得不遗憾地投票“随机排列(没有特定计划)”。我感觉它并没有给我造成太大困扰,但话说回来,如果我不尝试更规范的方法,我怎么会知道呢?
我还有其他一些想法。
我认为这在团队中是一个更大的问题。必须有一个标准,否则整个 CSS 项目看起来会很杂乱。我知道不一致的样式会让我良心不安,我宁愿花时间修复一些琐碎的格式问题,也不愿做实际工作。
认知负荷也影响着这一点。如果您可以始终依赖某些属性位于相同的位置,则可以更快地理解 CSS(减少扫描)。同样,在团队中且查看不太熟悉的代码(因为您没有编写它)时,这是一个更大的问题。
另一个需要考虑的是“最初编写时”的 CSS 和“几个月后”的 CSS。我敢打赌,我们很多人都一开始就打算非常有条理,并且确实一开始就很有条理,但随后当您稍后调整内容时,会将属性随意放置在任何位置。那么,这如何影响投票结果呢?您是根据您的意图还是实际的 CSS 文件进行投票的?
我不知道,伙计……我只是认为按字母顺序排列更容易维护(对我来说)。此外,Firefox 的 Firebug 会按字母顺序排列,我在浏览器中设计/调整时会进行大量复制粘贴。
不仅对你,对大型团队也是如此。按字母顺序排列是最简单的方法,可以最大程度地减少搜索属性所浪费的时间,因为所有内容都按可识别的顺序排列,团队成员不必学习(和记住)基于“按类型分组”的顺序。
非常有趣的话题,Chris。我个人是那 2% 按行长分组属性的人之一。使用这种方法不仅可以获得磁盘上更小的 css 文件,而且我发现,在一段时间后进行编辑时,它可以更快地识别样式并在样式表中导航,因为它可以节省大量滚动操作。
我请问你,你管理过多少次使用按类型分组方法格式化的 1000 行样式表。
难道管理 300 行代码不是更好吗?
按行长分组属性如何使您获得更少的行并占用更少的磁盘空间?我认为
占用与
Jamie,我相信 Andru 实际上指的是这个
我相信,必须同时水平和垂直扫描会降低效率,并且如果您在发布时最小化代码,那么在编写时占用多少行就没有关系了。
使用 cmd + f 应该没关系,正如 Josh 所说,同时水平和垂直查看会降低而不是提高速度,我知道每当我创建 HTML 电子邮件时,查找所有内联样式都会很麻烦。
此外,您的代码间隔多远应该没关系,因为对于实时网站,您应该无论如何都要进行优化。
Jamie,
Josh 对我格式化 css 的方式是正确的。您编写的那个 thingy 规则需要 19 行代码(假设您在每个属性之间留下一行空行),而对我来说,它需要 1 行或最多 2 行,具体取决于屏幕宽度。
对我来说,以这种方式格式化的代码更容易理解,因为在编辑规则时我根本不需要滚动。我还必须以视觉方式扫描一个远小于的区域来识别我需要更改的部分,但这是一种个人喜好。
每个编码人员都以不同的方式编写他的 css,这取决于他自己的风格,因此我相信没有最好的方法。您编写的代码比您如何格式化它更重要。
嗨,这是我的第一条评论,但我确实投票了,我投了按类型分组。
但这更像是“良好的意图”,有时甚至是痴心妄想。我开始编写它们时会将它们分组。然后我添加更多内容,最终变得非常混乱。我应该尝试一下注释。
但是,我不是专业人士,所以几个月后当我回到代码时,我只是讨厌自己 ^^
一些投票想法
你在哪里工作?
-公司办公室
-合作社办公室
-家庭/远程
当您搜索 CSS 语法时,您最常使用哪个网站查找结果?
-css3please
-MDN
-css-tricks
-W3C
-Sitepoint
-w3schools
-谷歌搜索结果中的任何一个
-我实际上使用印刷书籍
您认为哪项 CSS 技能更高级?
-页面布局
-CSS3 动画
-CSS 预处理器
(不确定最后一个是否有意义,因为了解 css 的工作原理是预处理器的先决条件,但也许类似这样的……)
按字母顺序排列或滚蛋。每个人对排序和分组都会有略微不同的概念,这必须向每个使用或查看代码的新人解释。假设你完成了小学教育,按字母顺序排列不需要解释。当然,它看起来不那么漂亮,如果你过去有不良的编码习惯,可能需要一点时间来适应,但最终,我发现现在我已经习惯了按字母顺序排列方案,在创建和修改 CSS 时更快、更高效。
我并不完全同意这一点,因为虽然人们对组的解释会有所不同,但几乎任何接受过同样小学教育的人都会在大约 30 秒内弄清楚这个约定。此外,您在使用自己习惯的系统时速度更快、效率更高,这应该不足为奇 :)
按字母顺序排列是我发现唯一可以在团队中可靠运行的系统,更不用说它使自动排序成为可能。当我只是敲代码、测试各种方法或其他任何东西时,我通常不会费心去排序选择器,但在它被提交之前(因为如果您不使用 VCS,我们需要谈谈),我可以使用排序命令浏览它,哦,看,我的 CSS 遵循一个连贯的系统!如果您能教会您的文本编辑器如何按类型分组,我印象深刻。
我同意。它更容易维护和获取。
Josh,按字母顺序排列消除了可能出现的“按类型分组”错误。这些小错误加上学习组(以及组内顺序)所需的时间,使得按字母顺序排列成为最有效的方法。
按字母顺序排列有几个注意事项。
首先是供应商前缀需要分组在一起
其次是当使用 mixin 时,css 预处理器会对属性排序的概念造成干扰
我倾向于按字母顺序混合(双关语)基于属性的 mixin,例如
.box-shadow
或.border-radius
。任何多样式 mixin 都出现在属性列表的上方或下方,具体取决于哪些样式需要优先。
我个人更喜欢按字母顺序排列,因为几乎没有歧义,并且比自定义顺序更容易教授,而自定义顺序很容易出错。
我喜欢使用“类型”,例如在 CSS 中,许多属性具有很强的关联性,例如
position
和z-index
。如果规则发生变化并且元素的样式设置为
static
,则除非这两个声明彼此靠近,否则z-index
声明很可能不会被清理。@Thierry Koblentz 确实如此。
按类型排序是唯一确保在更改 CSS 时不会忘记某些密切相关属性的方法。
此外,在我看来,将
left
和top
等定位属性分开没有任何意义。绝对的。请注意,我并不在团队中工作,因此我有幸能够按照自己的意愿工作。但是,按类型排序可以让 我一目了然地看到 CSS 的作用。
按字母顺序排序的问题在于:如果我不知道声明中有哪些属性,我将不得不查看整个列表以查看所有影响例如布局的内容。按类型分组,我就可以忽略大多数属性,而只关注布局或类型或其他内容。
这个,以及克里斯所说的一些内容。
我将始终始终希望看到 top 和 left 放在一起(或 bottom、right,无论您使用哪个)。其他任何方式都太疯狂了。如果存在像“margin-”和“padding-”这样的通用前缀,问题就可以解决,但可惜事实并非如此。
因此,我按类型大致分组。这让我想到克里斯所说的话:几个月后告诉我,我们会看看它是否得到维护。;-)
根据其他评论,我也认为方法中的所谓“一致性”并不重要,即使是在团队中也是如此。就我而言,正确使用级联更为重要,如果您正在这样做,您将很少看到具有 20 个不同属性的样式。即使您确实看到了,扫描 20 个属性并找到有问题的属性有多难?不难。老实说,即使是“top/left”的事情也不会真正是世界末日,尽管我认为将它们分开是疯狂的。
是的,@Anthony Nichols 说的是什么。 :)
按类型分组或滚蛋。我发现很容易回到我的代码并说,“哦,这段代码处理了 box-shadow 相关的内容”,在处理供应商前缀时这非常方便。有时我确实会尝试在类型组内按字母顺序排列,但那是当我不赶时间的时候。
我也更喜欢按类型分组的形式。按字母顺序排列太蠢了……为什么高度应该在宽度之前出现?这违反直觉。在我看来,将宽度放在高度之前是有道理的,因为大多数尺寸都是用英语这样读出来的。200×150 = 200 宽 150 高。
边距和填充也是如此。它们应该彼此相邻,并且靠近宽度/高度规则,因为这四个规则一起将决定元素的最终尺寸。
许多最初的评论都提到了按字母顺序排列,但很多讨论听起来像是您为任何给定的选择器都设置了大约 40 个样式属性。我的意思是,除非所有样式都无法在一个屏幕视图中显示(即高于您的编辑器),否则只有在这种情况下,我才会认为 ABC 比分组更优越,如果真是这样,那么您做错了什么。
我还想知道人们如何处理预处理器混合和嵌套。例如,我尝试首先引入所有混合,并在嵌套元素之前始终声明当前选择器的所有样式。这看起来非常基础,因为将一个选择器的样式通过一堆嵌套内容分开有点疯狂。
此外,我一直致力于减少嵌套(例如,在一个单层导航中,我将 ul、li 和 a 放在相同的深度级别)。
这提出了一个非常好的观点——自从我开始使用 CSS 预处理器(SASS)并结合 OOCSS // SMACSS 的概念以来,曾经包含大量样式属性的单一 CSS 类已经大幅缩小。这种模块化提供了更多逻辑组织和扩展先前声明的样式的机会,而无需担心字母顺序/分组顺序。
谈到其他一些评论——就个人而言,我几乎看不到使用哪种排序概念有什么关系,除了您的个人喜好之外。在团队编码环境中,使用通用的排序密码可以节省时间。时间就是金钱。解释“按字母顺序排列”比解释“好吧,您看,我们先做盒模型,然后是定位,然后是颜色……”等要少得多。
坦白地说,我更喜欢逻辑分组结构,但前提是它是一个标准强制执行的、广泛接受的、商定的并且易于记忆的顺序。我无法告诉你,尽管尺寸是“宽度 x 高度”,但“高度”出现在“宽度”之前有多么烦人,以及其他类似的情况。
我认为最好的方法是随机的,因为我们总是做事情有点匆忙。
我曾经很傻,会根据属性名称长度和基于冒号的制表符停止(我手动维护)进行排序。像这样
有一段时间,这看起来很棒,并且可以轻松地扫描特定值的下方,因为值是对齐的,并且我知道在哪里查找特定属性,因为我知道名称长度。它通常比按字母顺序排列更快。但是,每次我添加更长的属性名称时,我都要花费 4 倍的时间重新调整所有内容以使冒号对齐。
我尝试过按类型分组,但这不一致。例如,在上面,您将“定位”和“盒模型”显示为两个部分。这使得“边距”成为一个难以处理的属性。对于例如值为
10px
,边距完美地适合盒模型。但是,当您分配margin: 0 auto;
时,您现在将其用于定位。我最近切换到的方法是将布局与颜色和排版分开。一个 CSS 文件专门用于布局(这使得处理响应式设计变得容易。第二个 CSS 文件专门用于颜色(边框颜色、背景、文本颜色等)。我实际上有时会通过预处理器运行第二个文件(例如,colors.css.php),然后我使用 PHP 变量,以便我可以使用命名变量更容易地分配颜色。最后,一个排版 CSS 文件专门用于字体、字体大小和其他与排版相关的项目,例如行距、文本对齐,甚至在某些情况下,填充和边距(特别是对于段落元素,它们用于版权块,而不是布局块)。
我发现这使得拥有响应式设计变得非常灵活(colors.css.php 一旦创建几乎不需要修改),并且在考虑新设备时只需要对布局和排版进行一些小的调整。
当您在 SCM 下时,这种方法会导致您由于持续重新缩进而提交实际上不必要的更改。
大家好,编写 CSS 代码是设计良好网站、项目应用程序等最重要的任务之一。我认为当您编写整洁的代码时,结果将相同。
我通常按以下顺序排序 CSS
.selector{
/* 颜色值 */
/* 盒模型 */
/* 文本元素 */
/* 边框样式 */
/* 动画 */
}
我也更喜欢按字母顺序排列格式。它对我帮助很大,我避免了重复编写相同的属性。Sublime text 2 使上下移动属性变得非常容易。
我使用按特定顺序排序 CSS 属性http://csscomb.com/
我个人按字母顺序对我的 CSS 属性进行分组,因为我觉得它可以利用人类认知工作记忆来帮助我们分析大量本质上是语言数据的属性。
我们的工作记忆经过训练,可以知道字母在字母表中“空间”上大致相隔多远,因此,当搜索 CSS 属性中的单词时,我们知道当我们查找“border”属性时,它将出现在声明属性的开头附近,而“top”将出现在结尾附近。
当然,这对于母语是西方语言的人来说可能效果更好,而对于母语不是西方语言的人来说则不然。
顺便说一句,按字母顺序声明是 Google 在其Google Code CSS 编码标准中使用的方法。
在大多数情况下,我对 CSS 属性使用完全随机的方法,因为我通常只做一次,并且在小型项目中不会再回头修改。此外,如果我必须编辑文件,那么对 CSS 属性进行分类所花费的时间将比搜索正确的属性花费的时间更长。
但在大型项目中,我更喜欢按字母顺序排列,因为它清晰且通用。即使我几个月后不得不返回样式表,我也会立即找到我需要的内容。
但我理解按类型分组的方法,它确实很有意义。
除了我最初的评论之外,我还将我的样式分成了我称之为模板样式(例如:与元素的布局、定位和大小相关的样式)和样式样式(例如:与元素“外观”相关的样式)。我的想法是,我应该能够删除所有样式 CSS 规则,并且页面上不应该有任何东西真正移动——只是变得没有样式。
这有两个作用,它使调试样式更容易,因为它减少了你必须阅读的行数——因为通常你知道问题是与布局还是设计有关,其次,它使更改网站的样式设计更容易,同时不影响其布局,反之亦然。
除了这种实践之外,我还采用了现在使用 SASS 来编写我的 CSS,这使得以这种方式分离样式变得非常容易,因为编译后的 CSS 将是模板在编译时导入样式 .scss 文件的结果。(以及 SASS 提供的所有其他好东西。)
我个人认为这根本不是问题。这方面的任何标准,或缺乏标准,都很容易理解。
我想首先要考虑你的 CSS“架构”,例如平衡重用和语义、模块化和预处理。一旦你达到了那一点,你就可以细化诸如此类的琐碎细节。
我个人喜欢“按类型分组”,因为它使你的 CSS 样式与它们实际设置的样式相匹配。它提醒我定位/盒模型如何影响我的样式。此外,它将我可能同时处理的内容放在一起。例如,如果我正在处理布局问题,很高兴知道我所有的布局和盒模型样式都放在一起;我可以很容易地找出宽度、填充、边框和边距如何相互影响以及布局。如果我正在处理文本问题,我可以将所有文本内容放在一起,并快速找出额外的粗体字体是字体系列问题还是字体粗细问题。我喜欢不必在脑海中过滤掉与我目前正在做的事情无关的内容。通过能够将我正在处理的所有与相关问题相关的内容放在一起,我可以更容易地避免噪音。
哇,我真的很惊讶字母顺序没有更高的百分比。非常有趣。
“按类型分组”的大多数评论似乎都来自那些可能没有在大型团队中工作过的人(显然这只是一个印象,而不是事实)。因此,结果可能对单独工作的人有偏差。
就你的个人风格而言,它对其他人来说真的没有区别。无论你最习惯哪种方式,可能都是你编码最快的方式。当谈到团队时,它就开始变得重要了。
我自己投了随机票,也许我想融入一个稍微不同的类别。随机听起来就像我的大脑遍布意大利面酱……事实上,我根据需要创建每个样式,我想事情往往会发展并保持自己的顺序。
其他所有听起来都太过于吹毛求疵了。
如果让每个受访者将自己归类为“设计师”或“开发人员”,或者……嗯,两者兼而有之,可能会很有趣。
不过,有趣的调查,谢谢!
是的!——只是为了跟进我自己的帖子。
日期/时间顺序最能描述我的实践。
糟糕!我最近一定是有太多时间了,你让我开始思考这个问题。
日期/时间顺序并不完全准确……(首选)创建顺序可能更接近,因为如果我正在处理 [.generalcontent #colright p{}],并且我发现需要 [a img:hover{}],我会返回并将其插入到顶部。
有道理吗?
首选创建顺序,是我最终的投票……至少目前是这样!——这完全关乎我自己的持续学习。
再次感谢,我现在闭嘴听话:-)
我倾向于随机列出属性,但我一直想尝试某种组织方式。看起来我将尝试按类型分组!
我按字母顺序排列,但也按 CSS3 和 CSS2 组进行分离。
大家好。
我认为 Sung Choi 提到的 CSS2 和 CSS3 样式分离是一件非常重要的事情。
当你尝试更改如下所示的混乱代码中的任何内容时,这非常令人恼火
它看起来像“黑客帝国”中的绿色代码。
对我来说,我尝试将带有“-webkit-”、“-moz-”等的样式保留在简单的 CSS2 之后,例如
因此,在这样的结构中查找必要的样式并更改它们非常容易。
我一直都是随机的,但通常会有一定的主题,因为我通常以某种顺序想到属性。也就是说;在阅读了这个调查后,我决定尝试字母顺序,因为我觉得它在普遍意义上最合理。
到目前为止,对我来说很难遵循,因为习惯很难改变,但编辑和查找属性确实变得更容易了。
感谢你的调查。
我按字母顺序分组,但将带有供应商前缀的样式放在顶部。我认为这样更容易查看。现在我使用 SCSS,我把带有 @include 的样式放在顶部。
做任何你感到舒服的事情,但如果你在一个大型团队或大型门户网站中工作,那么我建议使用分组样式。
因为当有人搜索样式以进行进一步修改时,我们可以避免某些遗漏。他们可以非常轻松地搜索和编辑他们想要编辑的部分。无需在每个类中的所有样式中进行大量搜索。如果我们对样式进行分组,他们可以非常轻松地从每个类中找到该区域?无论如何,感谢 Cris 进行了一次很好的调查。
我按类型对 CSS 进行排序,并在该类型中按字母顺序排序……
在编辑和搜索任何代码时,它将节省我大量时间……
非常有趣的结果。有时我按类型对 CSS 进行排序,有时是随机的,这取决于 CSS 的数量以及它是用于什么的。
很棒的调查,结果很有趣。
我通常发现自己按类型分组,尽管我并没有主动尝试进行分组。
我无法想象按行长排序,尽管在处理团队时,按字母顺序排序似乎是最简单、最清晰和最一致的选择。
我无法相信有 2% 的人按行长排序!
始终按字母顺序排列。
通常,我按照元素的顺序对 CSS 进行排序。
首先,我放置“全局 css”。例如 html、body、表单元素等……
之后,我按照元素在网页代码中出现的顺序放置它们。
示例
#header{}
#menu{}
#content{}
#footer{}
我认为调查指的是属性的顺序。例如
有趣。我按 html 元素的顺序对 css 属性进行排序。我的意思是,我从 html、body、wrapper 开始,然后是 header、content、sidebar、footer,然后是媒体查询或一些额外的内容。
这就是 Chris 所指的属性(你可能指的是选择器)
查看这篇文章,我建议查看
我刚刚发现了它,它似乎是为这类调查而构建的
在我阅读本文之前,我的顺序一直都是随机的。有时我会按字母顺序排序。
我喜欢按类型分组,并按类型按字母顺序分组,但目前我花在重新排序 CSS 属性上的时间比编写 CSS 多,因此从短期来看,以这种方式组织它们对我来说效率不高。
也许在我写完所有内容之后,我可以做这件事!
没有投票,但会投“随机”票。
因为我喜欢将所有属性都放在一行上,所以分组和排序对我来说并没有太大的帮助。对于一行/属性的情况,我认为分组选项看起来最好。
我喜欢边写 CSS 代码边进行,但偶尔会将其通过 CSS 格式化程序处理。所以,如果我需要更改某些内容,则很容易找到它,但在编写时,我可以直接敲出代码,这也意味着对我自己和其他人来说,在将来修改代码时更容易维护。
当我第一次编写 CSS 时,它几乎总是随机的。但在网站上线之前,我通常会尝试按类型进行分组,主要是因为我喜欢在下次重新设计或使用该网站的代码时拥有干净的 CSS。
我真的很认为“按元素顺序”应该是一个选项。
我真的很惊讶字母顺序的排名这么低。Google 在其前端指南中建议使用它。
您有他们的指南副本的链接吗?
按类型排序的方法可以让您轻松地可视化对象将如何呈现,从外到内以视觉方式组织渲染。它特别有用,因为宽度和高度受先前属性的影响。这使得更容易发现布局问题可能存在的位置。将 CSS3 的杂乱内容列在最后,也有助于保持细节在视觉上更容易阅读。
实际的选择器 - 我按组组织它们 - 所有与标题或页脚或给定页面元素相关的内容。
但是对于给定选择器的属性 - 它们最终是随机的。
不好意思承认,但我使用的是随机方式。有时我会回过头来,将其组织成彼此相关的组。
我在声明块中对属性的排序方式类似于盒子模型的顺序。1. 内容(显示/位置、宽度/高度、背景、字体等)2. 内边距 3. 边框(装饰:例如,边框半径、阴影等)、溢出等 3. 外边距和其他(例如,光标、过渡等)
勘误/更正:1. 内容(显示/位置、宽度/高度、背景、字体等)2. 内边距 3. 边框(装饰:例如,边框半径、阴影等)4. 外边距和其他(例如,溢出、光标、过渡等)
我刚刚创建了
考虑到此线程中的评论,给出了一些不同的可能答案
该调查与选择器有关,而此调查则与属性有关。
在我看来,这与其说是规则如何组织,不如说是整个文档如何组织。我们都在这里使用单行 CSS。因此扫描是从上到下,然后从左到右。找到规则比规则中样式的顺序更重要。
body {margin: 0; padding: 0; font-family: Verdana, Arial, Sans-serif;}
p {font-size: 12px; line-height: 140%;}
a {text-decoration: none; color: #369;}
.clear {clear: both;}
.right {float: right;}
.left {float: left;}
#wrapper {width: 80%; margin: 0 10%;}
#head {height: 100px; width: 100%;}
#head h2 {color: #222;}
#nav {}
#nav li {}
#content {}
#content img {}
#footer {}
Jason 的观点很好。这也是我编写 CSS 的方式。
我看到这里很多人按字母顺序对样式进行排序。对我来说很清楚,他们唯一能找到样式表中规则的方法就是滚动到规则开头的字母。
如果他们知道如何使用浏览器检查器来识别规则,他们就不会再费心考虑排序问题了。无论如何,按字母顺序排序是一件毫无意义的繁重工作。
按规则应用于网站的哪个部分进行排序更有意义,就像您上面显示的那样。
我同意上述观点。我按照规则在实际网站上出现的顺序编写/组织我的 CSS。对我来说,按照它将被看到的方式来组织它比按照我在文本编辑器中搜索规则的方式来组织它更有视觉意义 - 特别是考虑到如果我正在寻找某些东西,我要么知道它在哪里,要么我的手就放在 CTRL+F 上。如果您知道如何快速搜索文档,那么排序就变得毫无意义了。
话虽如此,我还在大型样式表中的各个部分添加了注释,以便以后查看的人员知道该部分的作用(即使它很明显)。
现在,如果只有 WordPress 主题开发人员能够采用某种连贯的方法来组织他们的样式表(我可以得到一个 HELLS YEAH?!)
是否有任何好的软件可以对属性进行排序?
所以如果人们有不同的偏好,他们可以轻松地重新格式化/重新排序它们。
每个人都可以以他们个人认为最适合他们的方式工作,然后根据项目的最终需求重新格式化它。
继承现有项目代码的人员也可以在继续编辑代码之前,根据自己的喜好重新排序属性。
我见过网上有 CSS 优化器,但它们没有更改属性顺序。
我很想听听其他人的想法或经验。
这可能就是您要找的:https://github.com/miripiruni/CSScomb/
几年前我曾经使用过 TopStyle,它有一个功能可以根据您设置的任何设置清理和重新排序 CSS。我尝试了 Sublime Text 2 和 Notepad++ 的 CSScomb 插件,但它们都没有起作用,所以我尝试了 CSSTidy 插件,它清理了 CSS,但没有重新排序任何内容,所以很可惜……
我遵循 Harry Roberts @csswizardry 和 Mark Otto @mdo 的建议。
嗨,Chris!
关于投票的想法如何
你学过最难的语言是什么?
a. PHP b. HTML (哈哈!) c. Javascript d. Ruby 等
@steph …… 嗯,很难回答。Ruby 是答案,因为我不懂它 :(
我涉足网页设计多年(早在表格流行的时候),现在才开始成为一名专业人士。多年来,我发现,正如一些人所说,字母顺序对我来说很有效。我发现,当我和客户在一起时,他们想知道为什么这个元素被定位在这里,或者大小是如何改变的,按字母顺序排列 CSS 可以让我快速扫描,同时进行演示。我尝试过其他“模式”,例如按类型或按逻辑顺序,但即使我随机添加了某些内容,我也会将其放回按字母顺序排列的位置,这对我来说是最快的。我认为如今这真的取决于设计师的舒适区。更不用说向一些想要学习它的客户展示如何更改属性有多容易,因为他们知道背景将在前面区域,而 z-index 将在后面区域并且易于访问。
太棒了。我有一个严格遵循的结构,它是按类型分组的。只有一个例外:背景放在最后。
我的方法受到了质疑,其他开发人员甚至试图让我按字母顺序排列……哈哈!很高兴看到其他人也有类似的想法。
很高兴知道我不是唯一一个对编写 CSS 的顺序如此讲究的人。我是一个按组排序的人。我从事大型 Web 应用程序的开发工作,当你知道接下来会发生什么时,这使得更容易浏览 CSS。我从来不喜欢字母顺序或随机的方法(尽管在匆忙的情况下我可能不会遵循按组排序的顺序,但我稍后会回去修复它)。
使用MSVS,这基本上是自动完成的。我只需要使用“文档大纲”视图,它就会帮你整齐地分组CSS。
我曾经像很多人一样使用过分组。但由于在简单的记事本中无法快速搜索,我放弃了这种方法。
当你从头开始编写新的CSS时,你希望尽快完成它,所以在这种情况下,我建议每个人都按字母顺序编写属性。这将为你将来节省大量时间。
这是迄今为止最奇怪的解释。你听说过浏览器检查器来查找要编辑的规则吗?
当你可以使用Ctrl + F时,为什么要手动滚动记事本进行搜索?
如果你正在处理一个包含1000多行代码的现有CSS,你会先花一两天时间将现有的规则重新排序成字母顺序吗?
你知道,有一种分组方式更有意义。那就是根据样式应用的区域进行分组。
例如
CSS重置样式…
头部样式…
侧边栏样式…
内容样式…
页脚样式…