Html和css的class和id的命名,HTML，CSS的class与id命名规则

网页公共命名：

#wrapper - - 页面外围控制整体布局宽度

#container或#content- - 容器，用于最外层

#layout--布局

#head，#header--页头部分

#foot，#footer--页脚部分

#nav--主导航

#subnav--二级导航

#menu--菜单

#submenu--子菜单

#sidebar--侧栏

#sidebar_a,#sidebar_b--左边栏或右边栏

#main--页面主体

#tag--标签

#msg，#message--提示信息

#tips--小技巧

#vote--投票

#friendlink--友情链接

#title--标题

#summary--摘要

#loginbar--登录条

#searchInput--搜索输入框

#hot--热门热点

#search--搜索

#search_output--搜索输出和搜索结果相似

#searchBar--搜索条

#search_results--搜索结果

#copyright--版权信息

#branding--商标

#logo--网站LOGO标志

#siteinfo--网站信息

#siteinfoLegal--法律声名

#siteinfoCredits--信誉

#joinus--加入我们

#partner--合作伙伴

#service--服务

#regsiter--注册

arr/arrow--箭头

#guild--指南

#sitemap--网站地图

#list--列表

#homeepage--首页

#subpage--二级页面子页面

#tool，#toolbar--工具条

#drop--下拉

#dorpmenu--下拉菜单

#status--状态

#scroll--滚动

.tab--标签页

.left,.right,.center--居中、左、右

.news--新闻

.download--下载

.banner--广告条(顶部广告条)

电子贸易相关：

.products - -产品

.products_prices--产品价格

.products_description--产品描述

.products_review--产品评论

.editor_review--编辑评论

.news_release--最新产品

.publisher--生产商

.screenshot--缩略图

.faqs--常见问题

.keyword--关键词

.blog--博客

.forum--论坛

基础的命名：

外套 wrap - - 用于最外层

头部 header - - 用于头部

主要内容 main - - 用于主体内容(中部)

左侧 main-left - - 左侧布局

右侧 main-right - - 右侧布局

导航条 nav - - 网页菜单导航条

内容 content - - 用于网页中部主体

底部 footer - - 用于底部

CSS文件命名：

master.css,style.css--主要的

module.css--模块

base.css--基本共用

layout.css--布局，版面

themes.css--主题

columns.css--专栏

font.css--文字、字体

forms.css--表单

mend.css--补丁

print.css--打印

命名建议：

无论是使用"."(小写句号)选择符开头命名，还是使用"#"(井号)选择符号开头命名，我们最后都遵循，主要的，重要的，特殊的，最外层的盒子用“#”(井号)选择符号开头命名，其他都用"."(小写句号)开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。

原文链接：https://blog.csdn.net/weixin_43606158/article/details/95870475