Basic tutorial on Div + CSS: CSS selector naming and common naming

Standard naming is also an important part of web standards. standard naming can better understand the code. I think everyone should have this experience. One day, the code written in the past cannot be understood, well, to avoid this, we need to standardize the naming process. Now, a project can be completed by no one. You need to cooperate with each other. If there is no standardized naming, others cannot understand your code, which greatly reduces the work efficiency. Therefore, you must standardize the name. This is also a significant professional!

I will not talk about it much. CSS naming is similar to that of other programs. There are also three types of naming: camel naming, Pascal naming, and Hungary naming.

[Camel naming method]
When it comes to camels, we will surely think of its obvious characteristics, the back bulge, one high and one low, and our name should also be so high and one low, how can we do this, use uppercase and lowercase letters ~, Upper-case English is equivalent to a raised back of a camel, and lower-case is the concave place, but this is also a rule, that is, the first letter must be lower-case, the first letter of the next word must be in uppercase, as shown below:

Copy content to clipboard

Code:

#headerBlock

.navMenuRedButton

Pascal naming convention]
This naming method is also a mix of uppercase and lowercase letters. It is very similar to the camel naming method. The only difference is that the first letter must be capitalized, as shown below:

Copy content to clipboard

Code:

#HeaderBlock

.NavMenuRedButton

[Hungarian naming law]
The Hungarian naming method requires one or more lower-case letters to be prefixed before the name to make it easier to recognize and understand. For example:

Copy content to clipboard

Code:

#head_navigation

.red_navMenuButton

The above three methods are commonly used in naming CSS selectors (camel naming and Pascal naming). Of course, these three naming methods can be used in combination. You only need to follow one principle, that is, "easy to understand, easy to recognize, easy to work together" is OK, there is no need to emphasize that it is the naming method.

The common names of page modules are as follows:

Copy content to clipboard

Code:

Header: Header

Content: content/Container

End: footer

Navigation: nav

Sidebar: sidebar

Column: Column

Overall Layout width of the page peripheral control: wrapper

Left right center

Logon entry: loginbar

Logo: logo

Advertisement: banner

Page subject: Main

Hotspot: hot

News: News

Download: Download

Subnavigation: subnav

Menu: Menu

Sub menu: submenu

Search: Search

Link: friendlink

Footer: footer

Copyright: Copyright

Scroll: Scroll

Content: Content

This class is a very basic knowledge of CSS. It aims to take care of students without any foundation. Starting from the next class, we will introduce two very important concepts in the CSS layout page, it is also a concept that must be mastered. If you cannot understand it well, there will be many problems when you layout the page later.

Copy content to clipboard

Code:

1) Box Model

2) inner chain elements vs block elements

Author: kwoojan from: CSS Learning Forum