CSS编码意见

CSS是一门不容易掌控的语言。 根据您的技能和经验，CSS编码有时可能会变成噩梦.

• 工作流程：入门

设计完毕后，请从空白页面开始。

“包括您的标题，导航，内容和页脚。 然后开始添加你的html标记。 然后开始添加你的CSS。 它的效果要好得多。“

使用主样式表。

“我看到初学者最常见的错误之一是，当涉及到CSS不是删除默认的浏览器样式。 这导致您的设计在浏览器外观上的不一致，最终让很多设计师指责浏览器。 在对网站进行编码之前，您应该重新设置样式。“

首先重新设置CSS样式

“主要是针对浏览器的一些元素的默认margin/padding进行重置”。

保存一个有用的CSS类库

这里指的是为了更好的debugging调试,我们可以准备一个自己的css类库.
因为你在调试的时候可以使用多个类名,像这样.

<p class="floatLeft alignLeft width75">...</p>

利用它们来作为调试的标记.

// 类似这样的class类库
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }

reset.css可以看这里:reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white; /*可变*/ 
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

推荐阅读CSS techniques I use all the time

• 组织您的CSS代码

使用主样式表整理CSS样式

“组织您的CSS代码有助于提高网站未来的可维护性。 从主样式表开始。 在这个样式表中，导入你的reset.css，global.css，flash.css（如果需要的话）和struct.css，偶尔会导入一个排版样式表。 以下是“主”样式表的一个示例，以及它是如何嵌入到文档中的：“

/* master.css */
@import url("reset.css"); // 重置浏览器样式
@import url("global.css");  // 网站的全局样式
@import url("flash.css"); 
@import url("structure.css");

<style type="text/css" media="Screen">
   @import url("css/master.css");
</style>

使用flag来组织CSS样式： 合理的注释

“将您的样式表划分为特定的部分：即全局样式 - （正文，段落，列表等），标题，页面结构，标题，文本样式，导航，表单，评论，附加”

推荐阅读: 5 TIPS FOR ORGANIZING YOUR CSS

/* ------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* ------------------------*/

　整理您的CSS样式，制作一个目录

在您的CSS文档的顶部，写出一个目录。 例如，您可以概述您的CSS文档的样式（标题，主页，页脚等）的不同区域。 然后，使用一个很大的，明显的断点来区分区域．

// 类似
# 样式库说明

## 目录

|-- animation  (动画)

|-- common  (全局样式)

|-- components  (组件样式)

|-- mixins  (混入)

整理CSS样式，按字母顺序排列属性

“我不知道我在哪里得到这个想法，但是我已经按照我的CSS属性字母表数月了，不管相信还是不相信，它使得特定的属性更容易找到.

/*看各人习惯,最好根据CSS渲染的原则来*/ 
body {
   background: #fdfdfd;
   color: #333;
   font-size: 1em;
   line-height: 1.4;
   margin: 0;
   padding: 0;
}

将代码分成块

“把代码分块，使代码在数周，数月或数年后的维护变得更加容易。 你会更容易找到需要改变的classes 和elements。 例子：

/* Structure */, /* Typography */

推荐阅读CSS tips and tracks

通过独立的块来分离你的样式表

“我将样式表分解成三个单独的块。 第一个是直接对元素声明。 更改body，一些links 链接样式，一些标题样式，在表单上重置margins and padding 等等。 在元素声明后，我有我的类声明; 类似于类错误消息或标注的事情将会在这里。最后声明我的主容器 main containers ，然后这些容器中的元素的任何样式都缩进。 快速浏览一下，我可以看到我的网页是如何分解的，并且使得更容易知道在哪里寻找东西。 即使没有任何规则，我也会声明容器“

推荐阅读CSS TIPS

• 工作流程：处理ID，类，选择器，属性

容器结构嵌套不要过深

“一些新的开发人员将使用很多div来实现布局。这是很不好的e, 不要添加过多的div。 与其使用复杂的结构有时候使用一个漂亮的CSS可以得到相同的期望效果。“

不要滥用css

“如果没有必要添加CSS属性，不要添加它; 如果您不确定为什么要添加CSS属性，请不要添加; 如果您觉得您已经在很多地方添加了相同的property ，请查看如何将其添加到一个地方。“

使选择器保持最小

“避免不必要的选择器。 使用较少的选择器将意味着更少的选择器将需要覆盖任何特定的风格 - 这意味着更容易排除故障。“

尽量少用CSS hacks

“除非有一个已知和已记录的错误，否则不要使用hacks。 这是一个重要的一点，因为我经常看到hacks被用来修复首先没有被破坏的东西。 如果您发现您正在寻找一个hacks来解决您的设计中的某个问题，那么首先要做一些研究（Google是您的朋友），并尝试找出您遇到的问题”

推荐阅读10 Quick Tips for an Easier CSS Life

使用CSS常量来更快地开发

“常量的概念 - 可以通过代码使用的固定值。 在CSS中使用常量的一种方法是在注释中的CSS文件的顶部创建一些定义，以定义“常量”。 一个常见的用途是创建一个“颜色词汇表”。 这意味着您可以快速参考网站中使用的颜色，以避免错误地使用交替项，如果需要更改颜色，则可以快速找到一个列表，进行搜索和替换。”

/*
   # Dark grey (text): #333333
   # Dark Blue (headings, links) #000066
   # Mid Blue (header) #333399
   # Light blue (top navigation) #CCCCFF
   # Mid grey: #666666 #
*/

使用常见的命名系统

为id和class准备命名系统可以节省大量时间寻找错误或更新文档。 特别是在大型CSS文档中，如果你的名字不一样，那么事情会很快就会变得很困惑。 我建议使用parent_child模式”

根据他们的语义，正确地命名你的类和ID

使用常见CSS声明的组选择器。

“组选择器: 当几个elements，class或id共享一些属性时，可以通过使用组选择器进行分组，以避免多次指定相同的属性。 这将节省空间 - 可能很多。“

抽取您可能重用的单个属性

“如果你发现自己使用一个单一的属性很多，抽取它为一个class，以节省自己重复一遍又一遍，并使您能够更改使用它的站点的所有部分的显示。”

Move ids and class naming as far up the document tree as you can

尽可能地利用上下文选择器。 不要害怕在您的选择器中冗长。 更长的选择器可以使CSS文档更容易阅读

这点保持疑问.

推荐阅读 contextual selectors

学习利用CSS的级联性质

“假设你的网站上有两个类似的框，只有很小的区别 - 你可以写出CSS来为每个框设置样式，或者你可以同时编写CSS样式，然后在下面添加额外的属性，让它看起来不同。

使用语义标签。

<small>, <em> and <strong>

• 工作流程：使用简写方式

简写十六进制颜色符号

“在CSS中，当您使用十六进制颜色符号，颜色由三对十六进制数组成时，可以通过省略每个第二个数字，以更有效的方式写入：＃000与＃000000相同，＃369是 与＃336699相同

为LoVe / HAte-order中的链接定义伪类

Link, Visited, Hover, Active。 “为了确保您看到各种链接样式，您最好按照”link-visited-hover-active“或”LVHA“的顺序放置样式。

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }

Define element’s margin, padding or border in TRouBLed-order

Top, Right, Bottom, Left: “使用简写方式来指定元素的边距，填充或边框时，请从顶部顺时针方向进行：顶部，右侧，底部，左侧。

你可以使用缩写属性

使用边距，填充和边框属性的缩写可以节省大量的空间。

margin: top right bottom left;
margin: 1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)

border: width style color;
border: 1px solid #000;

background: color image repeat attachment position;
background: #f00 url(background.gif) no-repeat fixed 0 0;

font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

• 工作流程：设置排版

要使用像pxs这样的EMs，在body-tag上设置font-size为62.5％

font-size的默认值为16px; 应用规则，你会得到一个Em大约十个像素（16 x 62.5％= 10）。 “我倾向于将body-size放在body标签上，值为：62.5％。 这允许您在使用PX术语时使用EM来指定大小。 1.3em约为1.3px。”

使用通用字符集进行编码

使用能够覆盖大多数事件的单一通用字符集。 幸运的是，UTF-8是基于Unicode的。 Unicode是一种行业标准，旨在使来自所有语言的文本和符号由计算机一致地表示和操纵。 UTF-8应该包含在您的网页中.

<meta http-equiv="content-type" content="text/ html;charset=utf-8" />

您可以使用CSS更改大小写

如果您需要使用大写字母编写的东西，例如标题，请让CSS执行这种工作。 以下代码将使用h1属性将所有文本转换为所有大写字母“

h1 { text-transform: uppercase; }

您可以自动以小写字幕显示文字

font-variant属性用于以小字体字体显示文本，这意味着所有小写字母都将转换为大写字母，但小帽字体中的所有字母的字体大小与 其余的文字。

h1 { font-variant: small-caps; }

定义通用字体系列

“当我们在设计中声明要使用的特定字体时，我们正在这样做，希望用户在系统上安装该字体。 如果他们的系统上没有字体，那么他们就不会看到它，简单的就是这样。 我们需要做的是引用用户在其机器上可能具有的字体，例如下面的font-family属性中的字体。 我们用通用字体类型完成列表很重要”

p { font-family: Arial, Verdana, Helvetica, sans-serif; }

Use 1.4em – 1.6em for line-height

line-height:1.4“用于可读行，合理的行长度可避免超过10个字的行，以及提供对比度而不会相差太远的颜色。 例如，纯白色的纯黑色通常对于明亮的CRT显示器来说太强了，所以我尝试用灰白色（#fafafa是好的）和深灰色（＃333333，另一个好的）。

Set 100.01% for the html-element

100.01％的字体大小的值补偿了几个浏览器错误。 首先，以百分比（而不是em）设置默认正文字体大小如果后来在其他元素中设置为em，则会消除不断增长或缩小字体的IE / Win问题。 此外，与其他浏览器相比，Opera的某些版本的绘制默认字体大小为100％。 另一方面，Safari具有101％的字体大小的问题。 目前的“最佳”建议是使用100.01％“

• 工作流程：调试

添加边框以识别容器

“在调试布局问题时，使用大量测试样式，如额外的边框或背景颜色非常有效。

* { border: 1px solid #f00; }

　调试时首先检查闭合的元素

如果你感到沮丧，因为看起来你改变了一个小事情，让你美丽的圣杯布局破裂，这可能是因为一个未封闭的元素

• 技术提示：ID，类

每页1个ID，每页许多类

“检查你的ID：文档中只有一个元素可以具有id属性的值，而任意数量的元素可以共享相同的类名。 类和id名称只能由字符[A-Za-z0-9]和连字符（ - ）组成，它们不能以连字符或数字开头（请参阅CSS2语法和基本数据类型）。”

选择器中的元素名称区分大小写

“记住区分大小写。 当CSS与XHTML一起使用时，选择器中的元素名称区分大小写。 为了避免被这个抓住，我建议在CSS选择器中始终使用小写元素名。 类和id属性的值在HTML和XHTML中区分大小写，所以避免使用类和id名称的混合大小写。“

CSS类和ID必须有效。“即 以letter46开头，不是数字或下划线。 ID必须是唯一的。 他们的名字应该是通用的，描述功能而不是外观。“

您可以为给元素分配多个类名： 细粒度化

“您可以为元素分配多个类名。 这允许您编写定义不同属性的几个规则，并且仅在需要时应用它们。”

• 技术提示：选择器的使用

您可以使用子选择器

div > strong { color:#f00; }

您可以使用相邻的兄弟选择器

p + p { color:#f00; }

您可以使用属性选择器

[att] Matches elements that have an att attribute, regardless of its value.
[att=val] Matches elements that have an att attribute with a value of exactly “val”.
[att~=val] Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
[att|=val] Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.

匹配选择器

p[title] { color:#f00; }

div[class=error] { color:#f00; }

blockquote[class=quote][cite] { color:#f00; }

您应该使用后代选择器

• 技术提示：Styling Links

如果您使用的是锚点，请小心设计链接

“如果你在你的代码中使用一个经典的锚点（<a name="anchor">），你会注意到它是：hover和：active伪类。 为了避免这种情况，您需要使用id代替锚点，或者使用稍微更加arcane54语法的样式：：link：hover，：link：active“

定义链接的关系

“rel属性应该表示从一个资源到另一个资源的语义链接关系。

a[rel~="nofollow"]::after { content: "2620"; color: #933; font-size: x-small; }
a[rel~="tag"]::after { content: url(http://www.technorati.com/favicon.ico); }

您可以自动标记外部链接。 许多人使用非标准的rel =“external”关系来指示到外部站点的链接。 但是，添加到每个链接都是耗时且不必要的。 该风格规则将在您的站点上的任何链接之后将一个箭头放置到外部站点

a[href^="http://"]:not([href*="smashingmagazine.com"])::after { content: "2197"; }

您可以删除带有轮廓的虚线链接：outline: none;

a:focus { outline: none; }

• 技术提示：CSS技术

您可以指定body标签ID

“在大多数情况下，在body标签中放置ID将允许您逐页操作CSS表示项目和标记元素。”

您可以使用CSS创建具有相同高度的列

您可以使用伪元素和类动态生成内容

伪类和伪元素可以用于基于文档树中不可用的信息来格式化元素。 例如，没有元素引用段落的第一行或元素文本内容的第一个字母。 您可以使用：first-child，：hover，：active，：focus，：first-line，：first-letter，before before，… after and more。

您可以通过CSS垂直对齐

“说你有一个导航菜单项，其高度被分配为2em。 解决方案：将行高度指定为CSS中框本身的高度相同。 在这种情况下，该框是2em高，所以我们将line-height：2em插入到CSS规则中，文本现在在框的中间浮动！“

将ID插入标签。 该ID应该代表用户在网站中的位置，并且应当在用户移动到不同的站点部分时改变。

#home .home, #about .about, #contact .contact {  commands for highlighted navigation go here }

您可以使用margin：0 auto; 水平居中的布局

您可以从旧的浏览器中隐藏CSS

“从旧浏览器中隐藏CSS文件的常见方法是使用@import技巧

@import "main.css";

始终在块级元素中声明边距和填充

设置宽度或边距和填充

“我的经验法则是，如果我设置一个宽度，我不设置边距或填充。 同样，如果我设置边距或填充，我不设置宽度。 处理盒子模型可能是一种痛苦，特别是如果你正在处理百分比。 因此，我设置容器上的宽度，然后在其中的元素上设置边距和填充。

• 技术提示：IE调整

您可以强制IE将透明度应用于PNG

“理论上说，PNG文件确实支持不同程度的透明度;

#regular_logo { background: url('test.png'); width:150px; height:55px; }
* html #regular_logo {
   background:none;
   float:left;
   width:150px;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
}

您可以在IE中定义最小宽度和最大宽度

#container {
   min-width: 600px;
   max-width: 1200px;
   width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

您可以对IE使用条件注释

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->