CSS naming rules
I. File naming rules
| The code is as follows: | Copy code |
Global Style: global.css; |
|
II. Naming rules for common classes/IDS
| The code is as follows: | Copy code |
Webpage: header |
|
The names of common classes should be based on common English words as much as possible, so that they are easy to understand and can be annotated in appropriate places. For the second-level class/ID naming, the composite writing mode is used, and the first letter of the last word should be written as follows: for example, the "search box" should be named "searchInput", "search icon", and "search button" should be named "searchBtn "......
CSS Writing specifications and methods
I. General writing specifications and methods
1. Select DOCTYPE:
XHTML 1.0 provides three types of DTD declarations:
Transitional: requires a very loose DTD, which allows you to continue using the HTML4.01 logo (but it must conform to the xhtml syntax ). The complete code is as follows:
| The code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> |
|
Strict: A Strict DTD is required. You cannot use any identifier or attribute of the performance layer, such as <br>. The complete code is as follows:
| The code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> |
|
Framework: a dtd designed specifically for the Framework page. If your page contains a framework, you need to use this DTD. The complete code is as follows:
| The code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Frameset // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> |
|
The ideal situation is of course a Strict DTD, but for most of our designers who are new to web standards, the Transitional DTD (XHTML 1.0 Transitional) is currently an ideal choice (including this site, is also a transitional DTD ). Because this DTD also allows us to use the identifier, element, and attribute of the presentation layer, it is easier to pass W3C code verification.
2. Specify the language and character set:
Specify the language for the document:
| The code is as follows: | Copy code |
<Html xmlns = "http://www.w3.org/5o/xhtml" lang =" en "> |
|
To be correctly interpreted by the browser and validated by W3C code, all XHTML documents must declare the encoding languages they use. For example:
Common language definitions:
| The code is as follows: | Copy code |
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8 & Prime;/> |
|
3. Call the style sheet:
External style sheet call:
Page embedding: the style sheet is directly written in the head area of the page code. For example:
| The code is as follows: | Copy code |
<Style type = "text/css"> <! -Body {background: white; color: black;}-> </style> <Link rel = "stylesheet" rev = "stylesheet" href = "css/style.css" type = "text/css" media = "all"/> |
|
In the design that complies with the Web standard, it is recommended to use external call methods. You can change the page style without modifying the page but only modifying the .css file. If all pages call the same style sheet file, you can change the style of all files by changing the style sheet file.
4. Select appropriate elements:
Select HTML elements based on the document structure, rather than the HTML element style. For example, use the P element to contain text paragraphs, rather than for line breaks. If appropriate elements cannot be found during document creation, you can consider using a common div or span;
Avoid using div and span in transition. A small amount of appropriate use of div and span elements can make the structure of the document clearer and more reasonable and easy to use styles;
Use as few labels and structure nesting as possible, which not only makes the document structure clear, but also keeps the file small, while improving the user download speed, it is also easy for the browser to interpret and present the document;
5. Derivative selector:
You can use the derived selector to define a style for the child element in an element, which simplifies the name and makes the structure clearer, for example:
| The code is as follows: | Copy code |
. MainMenu ul li {background: url (images/bg.gif ;)} |
|
6. Secondary image processing with a back Image:
"Secondary images" here refer to images that are not part of the content to be expressed on the page, but only used for modification, interval, and reminder. You can use the CSS style to modify the back image without modifying the page, for example:
| The code is as follows: | Copy code |
# Logo {background: url (images/logo.jpg) # fefefefe no-repeat right bottom ;} |
|
7. Structure and Style separation:
Only the structure of the document is written on the page, and the style is written in the css file. The CSS style sheet is called externally to separate the structure from the style.
8. Structured writing of documents:
CSS documents on the page should be written in a structured manner, with clear logic and easy to read. For example:
| The code is as follows: | Copy code |
<Div id = "mainMenu"> /* = Main navigation === */ |
|
9. Mouse Gestures:
In the XHTML standard, hand is only recognized by IE. When you need to convert the mouse gesture to a "hand", replace "hand" with "pointer", that is, "cursor: pointer ;"
III. Abbreviation of style attribute code
1. Abbreviations of different classes with the same attributes and attribute values:
For two different classes, but some of them are the same or even all of them are the same attributes and attribute values, the abbreviations should be merged, especially when there are multiple different classes with the same attributes and attribute values, merging abbreviations can reduce the amount of code and make it easy to control. For example:
| The code is as follows: | Copy code |
# MainMenu { |
|
The attribute values of two different classes have duplicates, which can be abbreviated:
| The code is as follows: | Copy code |
# MainMenu, # subMenu { |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
