CSS naming rules specification_html/css_WEB-ITnose

Here, I am very grateful to the author of this article for sharing. This article is completely reproduced from the link above. It is here as a backup for easy viewing and use.

CSS naming rules specification

When people write css, they often encounter questions about Naming issue. With hundreds or even thousands of classes or IDs on the page, we will become more and more troubled. Therefore, it is necessary for us to organize our own set of naming conventions. Here I will talk about my own life

When everyone writes css, they often encounter naming problems. With hundreds or even thousands of classes or IDs on the page, we will become more and more troubled.

So, it is necessary for us to organize our own set of naming conventions. Here I will talk about my own naming convention.

Class-class

Class name, I usually use horizontal lines like this

.head-logo { … } /*Page header The class name of logo*/
.nav-li { … } /*The class name of the list on the navigation bar*/
.link-panel-h2 { … } /*The title of the link module*/

ID

id, I usually use camel case naming. In my understanding, camelCase naming is used exclusively for unique variables. So I often use this method to define variables in javascrpt.

#navLastLi { … } /*Get the last list of the navigation bar*/
#panelContent { … } /*The text part of the module*/
#sidebarFooter { … } /*Side Sidebar bottom module*/

So, there are many page modules, we can organize them like this

Commonly used CSS naming rules

Header: header Content: content/container Tail: footer Navigation: nav Sidebar: sidebar

Column: column Page peripheral control overall layout width: wrapper Left and right center: left right center

Login bar : loginbar Logo: logo Advertisement: banner Page body: main Hotspot: hot

News: news Download: download Sub-navigation: subnav Menu: menu

Submenu: submenu Search: search Friendly links: friendlink Footer: footer

Copyright: copyright Scroll: scroll Content: content Tag page: tab

Article list: list Prompt message: msg Tips: tips Column title: title

Join: joinus Guide: guild Service: service Registration: regsiter

Status: status Vote: vote Partner: partner

(1) Page structure

Container: container Header: header Content: content/container

Page body: main Page footer: footer Navigation: nav

Sidebar: sidebar Column: column Page peripheral control overall layout Width: wrapper

Left right center

(2) Navigation

Navigation: nav Main navigation: mainbav Sub-navigation: subnav

Top navigation: topnav Side navigation: sidebar Left navigation: leftsidebar

Right navigation: rightsidebar Menu: menu Submenu: submenu

Title: title Summary: summary

(3) Function

Logo: logo Advertising: banner Login: login Login bar: loginbar

Register: regsiter Search: search Ribbon: shop

Title: title Join: joinus Status: status Button: btn

Scroll: scroll Tab: tab Article list: list Prompt message: msg

Current: current Tips: tips Icon : icon　Comments: note

Guide: guildService: service Hotspot: hot News: news

Download: download Vote: votePartner: partner

Friendly link: linkCopyright ：copyright

When we use scripts to dynamically transform pages, the recommended method is to modify the class name or modify the id name to modify the display style. Of course, the most commonly used method is to modify the display style. name class.

Modify the class name - naming specification

(1) Color: use the name of the color or Hexadecimal code, such as

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) Font size, directly use 'font font size' as the name, such as

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3) Alignment style, use the English name of the alignment target, such as

.left { float:left; }

.bottom { float:bottom; }

 

(4)标题栏样式,使用’类别+功能’的方式命名,如

.barnews { }

.barproduct { }

 

 

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

 

 

常用css文件名

主要的 master.css　　模块 module.css　　基本共用 base.css

布局，版面 layout.css　　主题 themes.css　　专栏 columns.css

文字 font.css　　表单 forms.css　　补丁 mend.css　　打印 print.css

 

 

根据页面分栏结构的命名

     CSS代码的命名惯例一直是大家热门讨论的话题。通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。

      CSS类命名的语义化VS结构化方式

      一般而言，CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的”用意”，独立于它的”定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

让我们看看下面这个例子:

 

 

 

 

　　…而现在我们想把页面中的元素调换一下位置，如果你使用的是结构化方式(1)，那么你就要把所有CSS类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。

 

 

　　换句话说，使用语义化方式的话，你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。

 

 

关于语义化的一些建议:

在开始之前，我想推荐两种简单的编写较好的CSS代码的指导方针:

1、为CSS类名定义的时候，尽量使用小写字母，如果有两个以上的单词，在每个单词之间使用”-”符或单词首字母大写(第一个单词除外)。如:”main-content”或”mainContent”。 
 

2、优化CSS代码，仅创建关键主要的CSS类并重新为子元素使用符合HTML标准的标签(h1, h2, p, ul, li, blockquote,…)，例如,不要使用这种哦你那个方式:

1.  
2.     
   …
    
3.     
   …