CSS code naming convention semantic method

ArticleDirectory

• Semantic vs. structured CSS class naming
• Some Suggestions on semantics:
• Example of semantic mode in three-column layout

Semantic vs. structured CSS class naming

In general, the semantic declaration of CSS class names should consider the "intention" of a relative element in your page ", it is independent of its "positioning" or exact characteristics (structured mode ). Like left-bar, red-text, small-title... These are examples of structured definitions.

Let's take a look at the following example:

... Now we want to change the positions of elements on the page. If you are using a structured method(1), You need to re-define all CSS class names because their positions have changed. In Layout(3)We can see that all elements are reversed: Right-bar is now "left-bar", and left-content is "right-content ". This type of problem is avoided if you use the semantic method.

In other words, when using the semantic method, you can modify the attributes of the relevant CSS classes when modifying the website layout, instead of modifying their class names.CodeVery large, which will save a lot of time.

Bingo will update related technologies and tutorials such as front-end development and Webpage Design frequently. You are welcome to subscribe to this blog to view the latest tutorials and resources of this blog in a timely manner.

Some Suggestions on semantics:

Before getting started, I would like to recommend two simple guidelines for writing good CSS code:

1. When defining a CSS class name, try to use lower-case letters. If there are more than two words, use the "-" character or the first letter of the word between each word (except the first word ). For example, "Main-content" or "maincontent ".
2. Optimize CSS code, only create key and major CSS classes, and use HTML-compliant labels (H1, H2, P, UL, Li, BLOCKQUOTE,…) for the child elements ,...), For example, do not use this method:

<Div class = "Main">
<Div class = "Main-title">... </Div>
<Div class = "Main-paragraph">... </Div>
</Div>

Write as follows:

<Div class = "Main">
<H1>... </H1>
<P>...</P>
</Div>

Example of semantic mode in three-column layout

Let's use this simple example to explain how to use semantic naming for the classic three-bar layout:

You can use the semantic method to name CSS as follows:

# Container {...}
/* -- Top section --*/
# Header {...}
# Navbar {...}
/* -- Main --*/
# Menu {...}
# Main {...}
# Sidebar {...}
/* -- Footer --*/
# Footer {...}

2. Container
   "# Container"It is the part that includes all the elements on your page. You can also name this Part as follows:"Wrapper","Wrap","Page".
4. Header
   "# Header" is the header area of a website page. Generally, it contains the Website Logo and other elements. You can also name this Part as follows :"Top","Logo","Page-Header"(Or pageheader ).
6. Navbar
   "# Navbar"It is equivalent to a horizontal navigation bar and is the most typical web page element. You can also name this part as follows:"Nav","Navigation","Nav-wrapper".
8. Menu
   The "# menu" area contains general links and menus. You can also name this Part as follows:"Sub-nav","Links".
10. Main
    "# Main" is the main area of the website. If it is a blog, it will contain your logs. You can also name this Part as follows:"Content","Main-content"(Or" maincontent ").
12. Sidebar
    "# Sidebar"Some may contain the secondary content of the website, such as the list of recently updated content, Introduction to the website, or advertisement elements... You can also name this Part as follows:"Sub-nav","Side-panel","Secondary-content".
14. Footer
    "# Footer" contains some additional information about the website. You can also name it"Copyright".

If you have any comments on the "semantic" of CSS code, you are welcome to express your views here.

Reprinted statement:
Original: Bingo
Link: http://blog.bingo929.com/css-coding-semantic-naming.html