No Nonsense page Reconstruction Series--(8) reconstruction difficulty: semantics and naming

This article Elephant
This address: http://www.cnblogs.com/daxiang/p/4661936.html

Web refactoring, if you want to say what is difficult, there is only one: semantics and naming.

First, the structure of the label semantics

1. Semantics without semantics: div block level elements, span inline elements;

2. Other semantically: P-paragraph, blockquote reference, h1~6 title, serial table Ol Li, no-sequence list ul-li, definition lists DL DT DD, series of formatted text strong, EM, I, Sub, sup ...

3, HTML5 commonly used several: header, footer, aside, nav, article, section, canvas, video ...

Rational use of semantic tags, even if there is no style, the machine (Search Engine) and people can read happily.

Second, tag attribute class, id name

1, improve the reuse of less use ID;

2, a group of names to do can be as the name implies! Or can "words too literally";

3, semantic relevance, conflict probability, rendering performance, collaboration unobstructed;

4, can only be [a-z\d\-] English letter + number + character "-", used as a script hook using the "j_" prefix;

5, "-"; "Classification delimiter (e.g. Tab-nav)" When long naming, "extended delimiter (e.g. tab-trigger-active)" on the function,

6. Class naming

(1). module name;

(2). Module name-module status;

(3). Module Name-sub-module name;

(4). Module Name-sub-module name-module status;

7, can not use "appearance" of the word name, such as: size, color, orientation ...

8, ID Name: Pascal nomenclature, Camelname

Third, the script part

can refer to "Hungarian law, Small hump method, Big Hump method", suggested:

(1) constant Uppercase_word;

(2) variable camelname;

(3) class name Camelname;

Also attached to the common class name (there is better, can communicate):

/*Structural*/. Header{ }. Container{ }. Footer{ }/*site*/. Site-topbar{ }. Site-header{ }. Site-footer{ }. Topbar-nav{ }. Site-logo{ }. Footer-service{ }/*page: Structure (head, content area, tail, suspended pendant), parcel, navigation, search, breadcrumb navigation*/. Page-header{ }. Page-container{ }. Page-footer{ }. Page-pendant{ }. Page-wrapper{ }. Page-site-nav{ }. Page-nav{ }. Page-search{ }. Page-breadcrumbs{ }. Page-archive{ }. Page-detail{ }/*module: Package, structure (head, content, panel, tail)*/. Module-wrapper{ }. Module-header{ }. Module-title{ }. Module-container{ }. Module-panel{ }. Module-footer{ }/*Universal module: Title of Module component, title of content area, subtitle*/. Title{ }. Headline{ }. Subheadline{ }/*Universal module: accordion*/. Tab{ }. Tab-nav{ }. Tab-trigger{ }. Tab-trigger-active{ }. Tab-container{ }. Tab-panel{ }. Tab-panel-active{ }/*Universal module: Tab*/. Accordion{ }. Accordion-panel{ }. Accordion-header{ }. Accordion-header-active{ }. Accordion-container{ }. Accordion-container-active{ }/*Universal module: Graphic combination, picture on the side*/. Media-side{ }. Media-side. Object{ }. Media-side. Caption{ }. Media-side. Abstract{ }. Media-side. Metadata{ }/* Universal module: Graphic combination, text overlay on the diagram*/. Media-cover{ }. Media-cover. Object{ }. Media-cover. Caption{ }. Media-cover. Abstract{ }. media-cover. BG{ }/*List*/. List{ }. List. Item{ }. List-line. Item{ }. List-style-dot. Item{ }. list-ellipsis. Item{ }. First-child. First{ }. Last-child. Last{ }/*other*/. Block-link{ }. Inner-link{ }. Tag{ }. HR{ }

This article is the original article, at the same time, some will update the knowledge points and correction errors, is reproduced please be sure to retain the original author information!
This address: http://www.cnblogs.com/daxiang/p/4661936.html

No Nonsense page Reconstruction Series--(8) reconstruction difficulty: semantics and naming