Home > Developer > Web Develop
CSS Naming conventions
A File Naming conventions
Global style: GLOBAL.CSS;
Frame layout: layout.css;
Font style: Font.css;
link style: link.css;
Print style: print.css;
Two Common class/ID naming conventions
Headers: Header
Contents: Content
Container: Container
Footer: Footer
Copyrights: Copyright
Navigation: Menu
Main navigation: MainMenu
Sub-navigation: submenu
Logo: Logo
Slogan: Banner
Caption: Title
Side bar: Sidebar
Icons: Icon
Note: note
Searches: Search
Button: BTN
Login: Login
Links: Link
Info box: Manage
......
The naming of commonly used classes should be as common as possible in English words, to be easy to understand, and in the appropriate place to comment.
For class/id named two, the combined writing mode is used, the first letter of the latter word should be capitalized: "Search box" should be named "Searchinput",
"Search Icon" named this "Searchicon", "Search button" 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 to choose from:
Transition (Transitional): A very liberal DTD that allows you to continue to use HTML4.01 's identity (but to conform to the X-HTML notation). The complete code is as follows:
| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Strict (Strict): Requires strict DTD, you cannot use any of the presentation layer's identity and attributes , such as <br>.
The complete code is as follows:
" -//W3C//DTD XHTML 1.0 strict//en " " HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD ">
Framework (Frameset): A DTD used specifically for Frame page design , if your page contains frames, you need to use this DTD. The complete code is as follows:
" -//W3C//DTD XHTML 1.0 frameset//en " " HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-FRAMESET.DTD ">
The ideal scenario is of course a strict DTD, but for most of us who are new to Web standards, the transition DTD (XHTML 1.0 Transitional) is the ideal choice (including this site, which is also a transitional DTD).
Because this DTD also allows us to use the identity, elements and attributes of the presentation layer, it is also easier to pass the code validation.
2. Specify the language and character set:
Specify the language for the document:
//www.w3.org/1999/xhtml" lang= "en" >
In order to be properly interpreted by the browser and verified by the Web code, all XHTML documents must declare the encoding language they are using, such as common language definitions:
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8″/>
Standard XML Document Language definition:
<?xml version= "1.0″encoding=" utf-8″?>
Language definitions for older versions of browsers:
<meta http-equiv= "Content-language" content= "utf-8″/>
To improve the character set, it is recommended to use "Utf-8".
3. Call the style sheet:
External style sheet invocation:
page embedding: The style sheet is written directly in the head area of the page code. Such as:
<style type= "Text/css" ><!–body {background:white; color:black;}–> </style>external Calling Method: write the stylesheet in a separate. css file, and then call it in the page head area similar to the following code.
<link rel= "stylesheet" rev= "stylesheet" href= "Css/style.css" type= "Text/css" media= "All"/>
In a web-compliant design, it is recommended to use external tuning to change the style of the page without modifying the page to modify only the. css file.
If all the pages call the same stylesheet file, then changing the style sheet file will change the style of all the files.
4, choose the appropriate elements:
Select HTML elements based on the structure of the document, rather than depending on the style of the HTML element.
For example, use the P element to include a paragraph of text instead of wrapping it. If you cannot find the appropriate element when creating a document, you might consider using a generic div or span;
Avoid transitions using div and span. Small, appropriate use of DIV and span elements can make the structure of the document more clear and reasonable and easy to use style;
Minimize the use of tags and structure nesting, so that not only can make the document structure clear, but also can maintain the small file, while improving the user download speed, but also easy to browser interpretation of the document and view;
5. Derived selectors:
You can use a derived selector to define a style for a child element in an element, simplifying the naming and also making the structure clearer, such as:
. MainMenu ul li {background:url (images/bg.gif;)}6, auxiliary picture with back chart processing:
The "secondary pictures" here refer to images that are not part of the content to be expressed as pages, but only for retouching, spacing, reminders.
It can be used to do the back chart processing, without changing the page in the case of CSS style to make changes, such as:
#logo {background:url (images/logo.jpg) #FEFEFE no-repeat right Bottom;}7, structure and style separation:
Only the structure of the document is written in the page, and the style is written in the CSS file, and the structure and style are separated by invoking the CSS style sheet externally.
8, the structure of the document writing:
Page CSS documents should be structured to write, clear logic and easy to read. Such as:
<div id= "MainMenu" > <ul> <li><a href= "#" > Home </a></li> <li><a href= "# > Introduction </a></li> <li><a href= "#" > Services </a></li> </ul> </div>/*===== Main navigation =====*/#mainMenu {width: -%; height:30px; Background:url (Images/mainmenu_bg.jpg) repeat-x; } #mainMenu ul li {float: Left; Line-height:30px; Margin-right:1px; Cursor:pointer; } /*===== Main navigation end =====*/
9. Mouse gestures:
In the XHTML standard, hand is only recognized by IE, when it is necessary to convert the mouse gesture to "hand", then "hand" is changed to "pointer", that is, "cursor:pointer;"
Two Annotation Writing specification
1. Note Between lines:
Write directly behind the property value, such as:
. search{ border:1px solid #fff; /* Define search Input box Border */ Background:url (.. /images/icon.gif) No-report #333; /* define the background of the search box */ }2, the whole paragraph comment:
Add notes at the beginning and end of each place, such as:
/* ===== Search bar ===== */ . Search { border:1px solid #fff; Background:url (.. /images/icon.gif) no-repeat #333; } /* ===== End of search bar ===== */three. Style attribute code abbreviation
1, different classes have the same attribute and attribute value abbreviations:
For two different classes, but with some of the same or even all the same attributes and attribute values, they should be combined with abbreviations,
In particular, when there are several different classes with the same attributes and attribute values, combining abbreviations reduces the amount of code and is easy to control. Such as:
#mainMenu { background:url (.. /images/bg.gif); border:1px Solid #333; Width:%; height:30px; Overflow:hidden; } #subMenu { background:url (.. /images/bg.gif); border:1px Solid #333; Width:%; height:20px; Overflow:hidden; }Two different classes of attribute values have duplicates, just can be abbreviated as:
#mainMenu, #subMenu { background:url (.. /images/bg.gif); border:1px Solid #333; Width:%; Overflow:hidden; } #mainMenu {height:30px;} #subMenu {height:20px;}2, the same attribute of the abbreviation:
The same attribute can also be abbreviated according to its property value, such as:
. Search { background-color:#333; Background-image:url (.. /images/icon.gif); Background-repeat:no-repeat; Background-position:%; } . Search { background:#333; }3, internal and external side border of the abbreviation:
In CSS, the distance between the inner and outer borders is arranged in the order of the top, right, bottom, and left, when these four attribute values are not at the same time can be directly abbreviated, such as:
. btn { margin-top:10px; Margin-right:8px; Margin-bottom:12px; Margin-left:5px; Padding-top:10px; Padding-right:8px; Padding-bottom:12px; Padding-left:8px; }It can be abbreviated as:
. btn { margin:10px 8px 12px 5px; padding:10px 8px 12px 5px; }If the top and bottom, left and right border property values are the same, the attribute values can be abbreviated to two directly, such as:
. btn { margin-top:10px; Margin-right:5px; Margin-bottom:10px; Margin-left:5px; }Abbreviations are:
. btn {margin:10px 5px;}And when the upper and lower left and right four border property values are the same, you can be directly abbreviated to one, such as:
. btn { margin-top:10px; Margin-right:10px; Margin-bottom:10px; Margin-left:10px; }Abbreviations are:
. btn{margin:10px;}4, the color value of the abbreviation:
The color value code can be abbreviated when the RGB three color value values are the same. Such as:
. menu {color: #ff3333;}can be abbreviated as:
. menu {color: #f33;}Four. Hack Writing specification
Because different browsers to the standard of support is not the same, each browser for the interpretation of the page is also different, for example, ie in many cases with the FF 3px Gap exists,
For these differences, you need to use CSS hack to adjust, of course, if not necessary, it is best not to write hack to adjust, to avoid the problem of the page due to hack.
1, IE6, IE7,Firefox compatibility between the wording:
Writing one:
IE can recognize *; standard browsers (such as FF) do not recognize *;
IE6 can recognize *, but not!important,
IE7 can recognize *, can also identify!important;
FF does not recognize *, but can identify!important;
According to the above expression, the CSS hack under the same class of/ID can be written as:
. searchinput { background-color:#333; /* All can be */ *background-color:#666/* only IE7* / *background-color:#999 /* Only IE6 and IE6 below */ }The general three are written in the following order: FF, IE7, IE6.
Two:
IE6 can recognize "_", and IE7 and FF are not recognized, so when only for the difference between IE6 and IE7 and FF,
Can be written like this:
. searchinput { background-color:#333; /* General */ _background-color:#666; /* only IE6 identifiable */ }Three:
*+html and *html is the unique label of IE, Firefox does not support.
. searchinput {background-color:#333;} *html. searchinput {background-color:#666;} /* IE6 only */ *+html. searchinput {background-color:#555;} /* IE7 only */block IE browser :
Select is the selector and is replaced as appropriate. The second sentence is unique to the Safari browser on your Mac.
Select {font:12px /* FF's dedicated */ Select: Empty {font:12px/ *Safari visible * /IE6 can identify:
The main point here is to separate a property and value from the CSS comment before the colon.
Select /* IE6 not recognized */: none;}
ie if condition hack notation:
All IE can be identified by:
<!–[Ifif]–>
Only IE5.0 can recognize:
<!–[if IE 5.0]> only IE 5.0 <! [End If]–>
IE5.0 shifting IE5.5 can be identified:
<!–[if5.05.0if]–>
Only IE6 can be identified:
<!–[if66if]–>
IE6 and ie5.x below IE6 are recognized:
<!–[if66if]–>
Only IE7 can be identified:
<!–[if77if]–>
2. Clear the float:
In Firefox, when the child is floating, then the height of the parent can not completely wrap the entire child, then use this to clear the floating hack to do a definition of the parent, then you can solve the problem.
Select : After { content: "."; Display:block; Height:0; Clear:both; Visibility:hidden; }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
