不要在 CSS 中写标题
只需将部分拆分为文件。任何 CSS 注释,都应该是注释。
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
使用脚本将它们组合成一个;如有必要。您甚至可以拥有一个不错的目录结构,并且只需让您的脚本递归地扫描.css
文件。
如果你必须写标题,在文件的开头有一个目录
TOC 中的标题应该与您稍后编写的标题完全一致。搜索标题很痛苦。更糟糕的是,有人想知道您在第一个标题之后还有另一个标题吗?附言。编写 TOC 时不要在每行的开头添加类似 doc 的 *(星号),它只会让选择文本更烦人。
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
在规则内或规则内写评论,而不是在块外
首先,当您编辑脚本时,您有 50/50 的机会会注意规则块之外的内容(特别是如果它是一大堆文本;))。其次,(几乎)没有情况需要您在外面发表“评论”。如果它在外面,99% 的时间都是一个标题,所以保持这样。
将页面拆分为组件
大多数时候组件应该有position:relative
, nopadding
和 no 。margin
这大大简化了 % 规则,并允许更简单absolute:position
的元素 'ing,因为如果存在绝对定位容器,则绝对定位元素将在计算top
, right
, bottom
,left
属性时使用该容器。
HTML5 文档中的大多数 DIV 通常是一个组件。
组件也是页面上可以被视为独立单元的东西。用外行的话来说,如果将某物视为黑盒是有意义的,则将某物视为一个组件。
再次使用 QA 页面示例:
#navigation
#question
#answers
#answers .answer
etc.
通过将页面拆分为组件,您可以将工作拆分为可管理的单元。
将具有累积效应的规则放在同一行。
例如border
,margin
和padding
(但不是outline
)都添加到您正在设计的元素的尺寸和大小。
position: absolute; top: 10px; right: 10px;
如果它们在一行上不那么可读,至少将它们放在附近:
padding: 10px; margin: 20px;
border: 1px solid black;
尽可能使用简写:
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
永远不要重复选择器
如果您有更多相同选择器的实例,那么您很有可能不可避免地会遇到相同规则的多个实例。例如:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
当您可以使用 id/classes 时,避免使用 TAG 作为选择器
首先,DIV 和 SPAN 标签是个例外:永远不要使用它们!;) 仅使用它们附加一个类/ID。
这...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
应该这样写:
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
因为那里额外的悬空 DIV 不会向选择器添加任何内容。他们还强制执行不必要的标签规则。例如,如果你要改变你.answer
的风格div
,article
你的风格就会被打破。
或者,如果您更喜欢更清晰:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
原因是该border-collapse
属性是一种特殊属性,仅在应用于 a 时才有意义table
。如果.statistics
不是,table
则不应适用。
通用规则是邪恶的!
- 如果可以,请避免编写通用/魔术规则
- 除非是用于 CSS 重置/取消重置,否则您所有的通用魔法都应该适用于至少一个根组件
它们不会节省你的时间,它们会让你的脑袋爆炸;以及使维护成为一场噩梦。当您编写规则时,您可能知道它们适用于何处,但这并不能保证您的规则以后不会惹恼您。
添加到这个通用规则是令人困惑且难以阅读的,即使您对您正在设计的文档有所了解。这并不是说您不应该编写通用规则,只是不要使用它们,除非您真的打算让它们成为通用规则,甚至它们也会尽可能多地在选择器中添加范围信息。
像这样的东西...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
...与在编程语言中使用全局变量有同样的问题。你需要给他们范围!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
基本上是这样写的:
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
每当我知道的组件是页面上的单例时,我都喜欢使用 ID;您的需求可能会有所不同。
注意:理想情况下,您应该写得足够多。然而,与提及较少的组件相比,在选择器中提及更多的组件是更宽容的错误。
让我们假设您有一个pagination
组件。您在站点的许多地方都使用它。这将是您何时编写通用规则的一个很好的例子。让我们说你display:block
个人的页码链接,并给他们一个深灰色的背景。要使它们可见,您必须具有以下规则:
.pagination .pagelist a {
color: #fff;
}
现在假设您将分页用于答案列表,您可能会遇到这样的事情
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
这将使您的白色链接变黑,这是您不想要的。
修复它的错误方法是:
.pagination .pagelist a {
color: #fff !important;
}
修复它的正确方法是:
#answers .header .pagination .pagelist a {
color: #fff;
}
复杂的“逻辑”评论不起作用:)
如果你写这样的话:“这个值取决于 blah-blah 和 blah-blah 的高度”,你不可避免地会犯错误,它会像纸牌屋一样倒塌。
保持您的评论简单;如果您需要“逻辑操作”,请考虑其中一种 CSS 模板语言,如SASS或LESS。
你怎么写一个颜色托盘?
把这个留到最后。为您的整个调色板准备一个文件。没有这个文件,你的样式在规则中应该仍然有一些可用的调色板。您的颜色托盘应该覆盖。您使用非常高级的父组件(例如#page
)链接选择器,然后将您的样式编写为自给自足的规则块。它可以只是颜色或更多。
例如。
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
这个想法很简单,您的颜色托盘是一个独立于您级联的基本样式的样式表。
更少的名称,需要更少的内存,使代码更易于阅读
使用更少的名称会更好。理想情况下使用非常简单(而且很短!)的单词:文本、正文、标题。
我还发现简单单词的组合比长长的“适当”单词汤更容易理解:postbody、posthead、userinfo 等。
保持词汇量小,这样即使有陌生人进来阅读你的风格汤(几周后就像你自己;))只需要了解单词的使用位置而不是每个选择器的使用位置。例如,.this
每当一个元素被认为是“选定的项目”或“当前项目”等时,我都会使用它。
自己清理干净
写 CSS 就像吃饭,有时你会留下一团糟。确保你清理了那些乱七八糟的东西,否则垃圾代码就会堆积起来。删除您不使用的类/ID。删除您不使用的 CSS 规则。确保一切都很好,并且您没有冲突或重复的规则。
如果您按照我的建议将某些容器视为您的风格中的黑盒(组件),在选择器中使用这些组件,并将所有内容保存在一个专用文件中(或使用 TOC 和标题正确拆分文件),那么您的工作要容易得多...
您可以使用诸如 firefox 扩展 Dust-Me Selectors 之类的工具(提示:将其指向您的 sitemap.xml)来帮助您找到隐藏在您的 css 核武器和 carnies 中的一些垃圾。
保留一个unsorted.css
文件
假设您正在设计一个 QA 站点,并且您已经有一个“答案页面”的样式表,我们将其称为answers.css
. 如果您现在需要添加很多新的 CSS,请将其添加到unsorted.css
样式表中,然后重构到您的answers.css
样式表中。
造成这种情况的几个原因:
- 完成后重构更快,然后是搜索规则(可能不存在)并注入代码
- 您将编写将要删除的内容,注入代码只会使删除该代码变得更加困难
- 附加到原始文件很容易导致规则/选择器重复