The CSS naming method and learning in the mobile style of watercress

In the CSS named relative to just get started is the most headache thing, often take a readable name relative to the code style is still very important.

A good class name in conjunction with the team can help colleagues to understand that increasing the efficiency of the team is of great significance.

The former section of the watercress compared to other sites or relatively literary and artistic refreshing, so it is worthwhile to go to their team to learn, learning a lot of places, first to name.

on the outermost of a <div class= "Ck-root" >.....</div> first, the content is wrapped up in a large div box,

<div class= "Ck-root" >.....</div> after observing the other pages of the watercress, I feel ck-root. The CK inside is a code-name meaning,

Different codes represent different pages in the watercress, or it may be an abbreviation for a word, which is just one of my personal guesses.

"Ck-root" and "CK" behind the root is the root of the meaning, but also the meaning of the ancestors, declaring this is the largest box!

There are two other div's in the largest Div, two of which are navigation and content.

<div class= "Ck-navdrawer" >...</div> <div class= "ck-main>...</div>

The first "Ck-navdrawer", each relatively large div will be the CK this code to write in, and the back of the "Navdrawer"

In fact, it is composed of two words, namely "NAV navigation" and "drawer drawer (which hides a lot of content)", navigation inside the other content;

But this need to be in the Watercress sub-page of the navigation bar will appear oh.

In "Ck-navdrawer" there are two HTML5 label header,article,

Header is HTML5 inside the new head tag, article is also a reference to the outside of the HTML5 tag here is the reference to other Watercress page.

See

In H2 "Main-nav-btn" in the main= main nav= navigation btn= "Botton (button abbreviation)", meaning has been very clear. When we clicked on "watercress"

The main navigation has already appeared in front of us, the semantics is done very well, inside the IMG is "watercress" the word picture.

And the other <div class= "user" >...</div> "user" is what users mean, it is a tag link "login/register",

There are two more names here, respectively, <a href= "#" class= "nav-accounts ck-login" > Login/Registration </a>

"Nav-accounts" = navigation-account, description of the user's login "ck-login" = code-Login, user's login page, so easy to write and other places to chase

When we return to article, article here is referring to the other Watercress page.

We clicked the "watercress" bounce out of the drop-down box are all the other pages in the watercress. This will improve some of the things in a navigation bar.

　　

<div class= "Ck-nav-wrap" >...</div> class= code-navigation-parcel; a large box wraps up the contents of the navigation inside,

<div class= "CK-NAV-CONTENT> </div> class=ck-Navigation-content; In this case, there is a navigation inside the content.

<div class= "Ck-footer" ></div> class=ck-bottom; At the bottom of this navigation, no other content is added just to occupy one line.

Can be used as a cushion for a later use. It can also be used as a spacing element separated from navigation and content, and is currently used to separate content from navigation.

When we open the inside is a new world-

<div class= "Ck-content" >...</div> this has been penetrated into the interior of the navigation, can be used ck-content content to write.

<div class= "Main-nav main-nav-show" ... </div> class= "Main-navigation main-navigation-show" multiple class names,

The description requires a variety of CSS to write, it will be the first CSS because other tags have the same properties, and this is different from the others, so a single list of a CSS. And so on. Many ways to use it.

<ul> <li class= "Nav_douban" > </li> </ul> then an unordered list is used to display the title of navigation navigation

　　

This <li class= "Nav_douban" ></li> class= Navigation _ Watercress (the main page of the watercress) is a clear expression of the place to arrive.

Another unordered list adds a class name class= "Ck-navdrawer-more" more than the previous one.

"Nav navigator" and "drawer drawer (with a lot of content hidden inside), more= more, and other additional features within the navigation,

In the unordered list, the A tag in Li also appears with a class name the first a tag:

class= "ck-switchmode switch-to-desktop" = ck-switch mode switch-to-desktop, a good semantic.

class= "ck-modal-link site-feedback" = ck-mode-Link site-feedback.

Watercress Mobile navigation bar These, the CSS name here are very consistent with the standard, but also more semantic,

The CSS naming method and learning in the mobile style of watercress