CSS Creative naming rules

About naming rules in CSS (in fact, I think it is more reasonable to name the XHTML element) This problem, many people have been talking about, there are some insights. But this kind of thing is also the common sense of the beholder, as long as a team has a unified naming rules requirements, in the day-to-day development and maintenance of chaos should be said to be a good naming rules. For example, the following basic naming rule:

CSS Development naming rules

Coat	Wrap	Main navigation	Mainnav	Child navigation	Subnav
Footer	Footer	Entire page	Content	Header	Header
Trademark	Label	Title	Title	Top Navigation	Topnav
Edge Navigation	Sidebar	Left navigation	Leftsidebar	Right navigation	Rightsidebar
Flag Blog	Logo	Slogan	Banner	Sub Menu	Submenu
Container	Container	Content	Content	of the current	Current

The question is, what will happen to the later layout changes, such as Leftsidebar,rightsidebar, with strong directional naming? What if the left position is not the left-hand side, the middle or the right? What if Rightsidebar appears on the left? The naming seems a little illogical. Some people often tell me, do you think it makes sense? It's superfluous! There are really a few sites will use the same structure to do two times different layout, the most is the revision, the revision of the time even the structure has changed, such considerations are completely superfluous. Indeed, there are often such problems, some sites are not formed to the next revision before the style will basically not change, but some sites, such as my blog, you go to see Pjblog's official blog, the same structure has a very different performance.

Look at the following code:

View Plaincopy to Clipboardprint?

1. <div>
2. <div>content</div>
3. <div>bar1</div>
4. <div>bar2</div>
5. </div>

<div>
  <div>content</div>
  <div>bar1</div>
  <div>bar2</div>
</div>

How to name them? Bar1 and Bar2 can appear on both sides, and may also appear on one side, whether right, left, and middle are not appropriate. So how to name it is more appropriate?

Here is an idea from Adobe.com, which uses the parent element-Columns- columns, where columns (column) are represented by meaningless characters such as a, B, C, and so on. Wrap-ab-a, for example, contains two div--a and B under an element with an ID of wrap, and now it's a. Such a name is completely related to the element, and the meaning is quite clear. For example, the name above can be written as:

View Plaincopy to Clipboardprint?

1. <div id= "Container" >
2. <div id= "Container_abc_a" >content</div>
3. <div id= "Container_abc_b" >bar1</div>
4. <div id= "Container_abc_c" >bar2</div>
5. </div>

<div id= "Container" >
  <div id= "container_abc_a" >content</div>
  <div id= "Container_abc_" B ">bar1</div>
  <div id=" Container_abc_c ">bar2</div>
</div>

"Container_abc_a" means that there are three parallel elements under container (their IDs are a, B, C respectively), and the first one is currently pointing to a. The advantage of this is not affected by the layout, the name and the final performance of the page want to separate, but a disadvantage is that the next because the meaning of a, B, C makes nesting again when the naming a little "disorderly", such as id= "Container_abc_a_abc_a", the level of deep is not too clear.