CSS production optimization and tips when pages

Use css abbreviations abbreviations can help reduce the size of your CSS files easier to read. css abbreviation of the main rules refer to "css commonly abbreviated syntax summary" described here will not start.

　　A clear definition of the unit, unless the value is 0

　　Forget define the dimensions of the unit are new to CSS common mistake. In HTML you can just write width = 100, but in CSS, you have to give an accurate units, such as: width: 100px width: 100em. Only two exceptions can not be defined by: a high line and a value of 0. In addition, other values must be followed by the unit, be careful not to put a space between the value and units.

Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.

　　Case sensitive

　　When using CSS in XHTML, CSS element names defined in the is case-sensitive. To avoid this error, I recommend that all of the defined names are in lowercase.

　　Value class and id in HTML and XHTML are also case-sensitive, if you must write in mixed case, please double-check your tag in XHTML and CSS definitions are consistent.

　　Cancel class id and the element before defined

　　When you wrote a defined class or element id, you can define in front of the elements will be omitted, since the ID is a unique pages, class can be used repeatedly in the page. You define an element meaningless. E.g:

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

　　Can be written as

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

　　This saves some bytes.

　　Defaults

　　The default value is typically 0 padding, background-color default values is transparent. But it may be different in different browsers default. If the fear of a conflict, you can start to define the margin and padding values for all elements are 0, the style sheet like this:

* {
margin:0;
padding:0;
}

　　Defined values need not be repeated inheritable

　　CSS, the sub-element automatically inherit the attribute value of parent element, such as colors, fonts, etc., already defined in the parent element, may be directly inherited child element definitions need not be repeated. But be careful, your browser may cover defined by the number of defaults.

　　Recently the principle of priority

　　If there are multiple definitions of the same element to define the closest (the smallest one) is the highest priority, for example, there is such a code
Update: Lorem ipsum dolor set in the CSS file, you have defined the elements p, and definitions a classupdate

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

　　These two definitions, class = update will be used, because class closer than p. You can check the W3C's "Calculating a selector's specificity" to learn more.

　　Multiple class definitions

　　A plurality of class labels can be defined simultaneously. For example: We first define two styles, the first style background # 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

　　Such is the ultimate display of both div # background 666 also has a border of 10px. Yes, this is possible, you can try.

　　Use child selector (descendant selectors)

　　CSS beginners do not know to use the child selector is one of the reasons that affect their efficiency. Child selector can help you save a lot of class definitions. Let's look at the following code:

　　CSS is defined in this code:

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 */ }

　　You can use the following alternative to the above code

　　Style definition is:

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

　　Sub-selectors can make your CSS code and more concise, easier to read.

　　Background image path does not need to add quotation marks

　　In order to save bytes, I suggest not to background image path in quotes, because quotes are not necessary. E.g:

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

　　It can be written as

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

　　If you add quotes, but will cause some browser bugs.

　　The group selector (Group selectors)

　　While some element type, class or id have common attributes, you can use the group selector to avoid duplication of multiple definitions. This can save a lot of bytes.

For example: Define all headline font, color and margin, you can write:

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

　　If you use, there are individual elements need to define a separate style, you can add a new definition, can override the old definitions, such as:

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

　　Specifies the link with the correct order style

　　When you define multiple states linked with CSS styles, pay attention to the order they are written, the correct order is :: link: visited: hover: active. Extract the first letter is LVHA, you can remember to LoVe HAte (like hate). Why so defined, you can refer to Eric Meyer's "Link Specificity".

　　focus attribute: If your users need to control, need to know the focal point of the current link, you can also define keyboard. : The effect of focus attribute also depends on the position of your writing, if you want to focus elements show: hover effect, you put: focus in writing: front hover; if you want to replace the focusing effect: hover effect, you put: focus put in: behind hover.

　　Clear float

　　CSS is a very common problem when using a floating positioning, the underlying layer is covered by a floating layer or layers in the nested sub-layers outside the scope of the outer layer.

　　The usual solution is to add an extra layer behind the floating element, for example, one or a div br, and defines its style is clear: both. This approach is a little far-fetched, fortunately there is a good way to solve, see the article "How To Clear Floats Without Structural Markup" (Note: this site will soon translated article).

　　The above two methods can solve the problem well beyond the float, but if when you really need to layer or layers in the object's clear how to do? A simple method is to use the overflow property, this method was originally published in the "Simple Clearing of Floats", it has been widely discussed in the "Clearance" and "Super simple clearing floats" in.
The above clear what kind of method is more suitable for you, depends on the specific circumstances, not to undertake discussed here. Other applications on a float, some excellent articles have said very clearly, it is recommended that you read: "Floatutorial", "Containing Floats " and "Float Layouts"

　　Transverse center (centering)

　　This is a simple trick, but worth repeating, because I saw too many novice asking this question is: How CSS laterally centered? You need to define the width of the element, and define the lateral margin, if your layout contains a layer (container), like this:

<! - your layout here ->
you can define it laterally centered:
#wrap {
width: 760px; / * Modify the width of your layer * /
margin: Auto 0;
}

　　But IE5 / Win does not display correctly this definition, we have adopted a very useful tips to fix: The text-align property. Like this:

{body
text-align = left: Center;
}
#wrap {
width: 760px; / * Modify the width of your layer * /
margin: 0 Auto;
text-align = left: left;
}

　　The first body of the text-align: center; the rules defined IE5 / Win center of all the elements in the body of (other browsers just text centered), the second text-align: left; is #warp text Left.

　　Import (Import) and hidden CSS

　　Because older browsers do not support CSS, a common practice is to use the CSS @import trick to hide. E.g:

@import url(main.css);

　　However, this method does not work for IE4, which makes me a headache for a while. Later, I used this wording:

@import main.css;

　　This can also be hidden in CSS in IE4, huh, huh, but also saves five bytes of it. For a detailed description @import syntax, can be seen here "centricle's css filter chart"

　　Optimized for IE

　　Sometimes, you need to define the IE browser bug some special rules, there are too many CSS skills (hacks), I only use two of these methods, regardless of whether Microsoft is better in the upcoming IE7 beta edition support for CSS, these two methods are the safest.

　　1. annotation methods

　　(A) a hidden CSS defined in IE, you can use the child selector (child selector):

HTML> body P {
/ * define the content * /
}

　　(B) The following wording can be understood only IE (other browsers are hidden)

* html p {
/* declarations */
}

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

　　2. Note the condition (conditional comments) method

　　Another way, I think more than CSS Hacks stand the test of private property is to use Microsoft's conditional comments (conditional comments). This way you can use a number of individually defined styles to IE, without affecting the primary defined style sheet. Like this:

　　Troubleshooting Tips: How big layer?

　　When debugging CSS error occurs, you have to like typesetting workers, line by line analysis of CSS code. I usually define a background color layer on the problem, so you can clearly see how much space is occupied by layer. Some people suggested border, the general situation is also possible, but the problem is that sometimes border will increase the size of the elements, border-top and boeder-bottom will destroy the value of the longitudinal margin, it is safer to use some background.

　　Another frequent problem is the property outline. outline looks like boeder, but does not affect the size or position of the element. Only a few browsers support the outline property, I know only Safari, OmniWeb, and Opera.

　　CSS code writing style

　　When writing CSS code for indenting, line breaks, spaces, everyone has everyone's writing habits. And after practice, I decided to use this style of writing the following:

selector1,
selector2 {
property:value;
}

　　When used in conjunction definitions, I usually will each choose individually writing a single line, so easy to find them in the CSS file. A space, each individual definition also write a line between the last and braces {selector, the attribute value directly after the semicolon, no spaces.

　　I used behind each attribute value semicolon, while allowing the last attribute value can not write a semicolon behind the rules, but easy to forget to fill the semicolon if you want to add a new style and error, they still are added Better.

　　Finally, to close the braces} alone write a line. Spaces and line breaks help with reading

Front-end development foundation

Published 61 original articles · won praise 12 · views 60000 +

Private letter concerns

CSS production optimization and tips when pages

Guess you like