Common example code sharing for optimization techniques in CSS

Do you know the commonly used optimization of CSS? Let’s introduce it to you in detail! We have accumulated some experience and share it with you here. Please correct each other.

1. Use CSS abbreviations

Using abbreviations can help reduce the size of your CSS file and make it easier to read. For the main rules of CSS abbreviation, please refer to "Common CSS Abbreviation Syntax Summary", which will not be described here.

2. Define the unit clearly, unless the value is 0

Forgetting to define the unit of the size is a common mistake among CSS newbies. In HTML you can just write width=100, but in CSS you have to give an exact unit, such as: width:100px width:100em. There are only two exceptions for not defining units: row height and 0 value. In addition, other values ​​must follow the unit. Be careful not to add spaces between the value and the unit.

3. Case sensitivity

When using CSS in XHTML, the element names defined in CSS are case sensitive. To avoid this error, I recommend using lowercase for all definition names.

The values ​​of class and id are also case-sensitive in HTML and XHTML. If you must write in mixed case, please carefully confirm that your definition in CSS is consistent with the tag in XHTML.

4. Cancel the element qualification before class and id

When you write to define class or id for an element, you can omit the previous element qualification, because the ID is unique in a page , las s can be used multiple times in the page. It makes no sense for you to qualify an element. For example:

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

can be written as

#content { /* declarations */ }
.details { /* declarations */ }

which can save some bytes.

5. Default value

Usually the default value of padding is 0, and the default value of background-color is transparent. But the default value may be different in different browsers. If you are afraid of conflicts, you can define the margin and padding values ​​​​of all elements as 0 at the beginning of the style sheet, like this:

* {
margin:0;
padding:0;
}

6. There is no need to repeatedly define inheritable values

CSS, child elements automatically inherit the attribute values ​​​​of the parent element, such as color, font, etc., which have been defined in the parent element, can be directly inherited in the child element without repeated definition. But be aware that the browser may override your definition with some default values.

7. Closest first principle

If there are multiple definitions of the same element, the closest (minimum level) definition will take precedence. For example, there is this piece of code

Update: Lorem ipsum dolor set

In the CSS file, you have defined the element p and a classupdate

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

In these two definitions, class=update will be used because class is closer than p . You can check out W3C’s “Calculating a selector’s specificity” to learn more.

8. Multiple class definition

A tag can define multiple classes at the same time. For example: We first define two styles, the first style has a background of #666; the second style has a 10 px border.

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

In the page code, we can call

like this. The final display effect is that this div has both a #666 background and a 10px border. Yes, it is possible to do this, you can try it.

9. Use descendant selectors

CSS beginners don’t know that using descendant selectors is one of the reasons that affects their efficiency. Subselectors can help you save a lot of class definitions. Let’s take a look at the following code:

Item 1
>
Item 1
Item 1

The CSS definition of this code is:

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

The style definition is:

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

Use sub-selectors to make your code and CSS are cleaner and easier to read.

10. No need to add quotes to the background image path

In order to save bytes, I recommend not to add quotes to the background image path, because the quotes are not necessary. For example:

background:url(images/***.gif) #333;

can be written as

background:url(images/***.gif) #333;

If you add quotation marks, it will cause some browser errors.

11. Group selectors

When some element types, classes or ids have some attributes in common, you can use group selectors to avoid multiple repeated definitions. This can save quite a few bytes.

For example: to define the font, color and margin of all titles, you can write like this:

h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

If there are individual elements that need to define independent styles when using them, you can add new ones Definition, you can overwrite the old definition, for example:

h1 { font-size:2em; }
h2 { font-size:1.6em; }

12. Specify the link styles in the correct order

When you use CSS to define multiple state styles of the link, pay attention The order in which they are written, the correct order is: :link :visited :hover :active. The first letter extracted is LVHA, which you can remember as LoVe HAte (like to hate). Why is it so defined? You can refer to Eric Meyer's "Link Specificity".

If your users need to use the keyboard to control and need to know the focus of the current link, you can also define the :focus attribute. The effect of the :focus attribute also depends on the position where you write. If you want the focused element to display the :hover effect, you write :focus in front of the :hover; if you want the focus effect to replace the :hover effect, you put :focus After :hover.

13. Clear floats

A very common CSS problem is that when floating is used for positioning, the layer below is covered by the floating layer, or the sub-layers nested in the layer exceed outer range.

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中?你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

html>body p {
/* 定义内容 */
}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {
/* declarations */
}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：

/* */
* html p {
declarations
}
/* */

2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

十七.调试技巧：层有多大?

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯

The above is the detailed content of Common example code sharing for optimization techniques in CSS. For more information, please follow other related articles on the PHP Chinese website!