class naming convention

For novices, it is a headache to add styles and names to the html tag when writing html. They don’t know what to name the tag, or they just name it casually. This is a common problem in daily life. It is very inconvenient during development. Today I will summarize the class naming conventions in html!

Common class keywords:

Layout class: header, footer , container, main, content, aside, page, section
Wrap class：wrap, inner
Block class：region, block, box
Structural class: hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
List class: list, item, field
Primary and minor categories: primary, secondary, sub, minor
Size category: s, m, l, xl, large, small
Status category：active, current, checked, hover, fail, success, warn, error, on, off
Navigation class：nav, prev, next, breadcrumb, forward, back, indicator, paging, first , last
Interaction class: tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
Star class: rate, star
Separation class: group, seperate, divider
etc. Classification: full, half, third, quarter
Table class: table, tr, td, cell, row
Picture category: img, thumbnail, original, album, gallery
Language category: cn, en
Forum Class: forum, bbs, topic, post
Direction class: up, down, left, right
Other semantic classes: btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
After we have the keywords, let’s do it first Make some simple rules.
Develop simple rules:
Connect with a dash, such as .item-img
Use two dashes to indicate specialization, such as .item-img.item-img- -small means specializing the
status class based on .item-img and using words directly. Refer to the keywords above, such as .active, .checked
The icon is prefixed with icon- (the font icon uses .icon- font.i-name method).
Modules are named with keywords, such as .slide, .modal, .tips, .tabs, and specializations are represented by the two dashes above, such as .imgslide--full, .modal--pay, .tips-- up, .tabs--simple
JS operation classes must be uniformly prefixed with js-
Do not use more than four classes in combination, such as .a.b.c.d
Modification keywords:
Taking header as an example, we can add prefixes to represent different headers, such as block header.block-hd (hd is the abbreviation of header), modal header.modal-hd, and article header.article-hd.
The same title can also be divided into page title.page-tt (abbreviation of title), block title.block-tt, etc.
Similarly, this brings us to the second question, what should we do if we want to specialize a class?
Specialized class:
Taking the above tt as an example, there are probably three methods:
The first crime: directly modify the class, change .page-tt to .page- user-tt (you can use scss's % to define shared code first).
Second method: Add class specialization. According to the rules we defined above, add a class to .page-tt to become .page-tt.page-tt--user. Pay attention to .page-tt--user. It is not an independent class, it is based on .page-tt.
The third method: Use the parent class and give it a range, thus forming .page-user .page-tt.
Generally we use the second and third methods, because both of them have the same .page-tt, which makes it easier to control some basic common styles.
With the third method of controlling through parent classes, we enter the third issue to be discussed, hierarchical structure

Level
The most suitable example of hierarchy There is nothing better than the ul>li structure, such as the following structure:

<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>

Generally speaking, we also have two ways to define levels, the first is inheritance, and the second is keywords.

// 继承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text

// 关键词式
ul.card-list
    li.item
        a.field-img-link>img.field-img
        h3.field-tt>a.field-tt-link
        p.field-text

It can be seen from the above that the inheritance type generally follows the last word of the parent element, such as li, then the list of ul, and the child elements of li follow the item of li; as for the keyword type, it is completely composed of keywords To represent the hierarchy, list>item>filed constitutes exactly three levels.
Finally, we enter our last question from our hierarchy, how to control the scope of the style.

Related recommendations:

What is the difference between class and id

The attribute class that specifies the class name of an element in html

Instance analysis of how css uses id and class to control element style

The above is the detailed content of class naming convention. For more information, please follow other related articles on the PHP Chinese website!