码迷,mamicode.com
首页 > Web开发 > 详细

CSS 常用命名

时间:2019-07-16 12:18:05      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:不能   output   slist   sitemap   图片   link   top   注册   换肤   

在前端开发中,规范使用 DIV+CSS 命名,可以增强团队合作提高开发效率,有利于页面后期的维护和优化。

(1) 页面结构

命名 作用
wrap 外套、包裹,用于最外层
wrapper 外套,用于页面外围控制整体布局宽度
box 盒子,容器
header 头部,用于页头部分
nav 导航,主导航
main 主要区域,内容主体
content/container 内容,内容容器
sidebar 侧边栏
footer 底部,用于页脚部分

(2) 功能区块

命名 作用
left center right 左中右
main-left 左侧主要布局
main-right 右侧主要布局
logo 网站 LOGO 标志。
search 搜索输入框。
loginbar 登录条。
regsiter 注册模块。
banner 广告,用于横幅广告条。
menu 菜单。
submenu 子菜单,二级菜单。
top 顶部。
topnav 顶导航。
mainnav 主导航。
subnav 子导航,二级导航。
leftsideBar 左导航。
rightsideBar 右导航。
topbar 顶部工具/菜单。
bottom 底部。
bottombar 底部工具栏。
tool 工具条。
shop 功能区,如购物车、收银台。

(3) 其他常用命名

命名 作用
title 栏目标题。
summary 摘要。
hot 热门热点信息,推荐。
msg 提示信息。
news 新闻。
list 列表,文章列表。
piclist 图片列表。
newslist 新闻列表。
search-output 搜索输出。
search-results 搜索结果。
drop/dropdown 下拉。
dropmenu/dorpdown-content 下拉菜单。
scroll 滚动。
homepage 首页。
subpage 子页面,二级页面。
tag 标签。
tab 标签页。
tips 小技巧。
ranking 排行。
vote 投票。
bth 按钮。
icon 图标。
arr/arrow 箭头。
status 状态。
note 注释。
skin 皮肤。
current 当前的。
active 活跃的,有效的。
download 下载。
friendLink 友情链接。
copyright 版权信息。
partner 合作伙伴。
joinus 加入我们。
sitemap 网站地图。
siteinfo 网站信息。
siteinfoLegar 法律声明。
announcement 公告。
guild 指南。
service 服务。
promotion 推广。
blog 博客。
forum 论坛。

(4) 产品相关命名

命名 作用
keyword 关键词。
products 产品。
products-prices 产品价格。
products-description 产品描述。
products-review 产品评论。
editor-review 编辑评论。
news-products 最新产品。
publisher 生产商。
screenshot 缩略图。
faqs 常见问题。
barnding 商标。
pay 充值。
reputation 信誉。

  

(5) 常用的文件命名

命名 作用
全局样式 global.css
布局结构 layout.css
基本共用 base.css
综合样式 style.css
主要的 master.css
模块 module.css
表单 forms.css
主题/网页换肤 themes.css
字体 font.css
打印 print.css
补丁 mend.css

(6) ID 和 Class 命名规范

  • 主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名,其他的都使用 class 属性命名。

  • 命名规则须以内容优先,表现为辅。首先根据所要呈现的内容、功能来命名,如果内容实在无法找到合适的命名,可以再根据表现命名。

  • 大多数情况下,命名都使用英文单词,可以增加代码的可读性,但特殊情况下,实在找不到合适的单词时,可以使用拼音命名,但必须简明,结构清晰。

  • ID 和 Class 命名尽量全部都使用小写,多个单词可以使用连字符(-)链接,命名可以使用数字,但不能以数字开头。

  • 命名可以使用单词缩写,但必须确保是有效的缩写,即别人能看懂,不能自定义缩写。

CSS 常用命名

标签:不能   output   slist   sitemap   图片   link   top   注册   换肤   

原文地址:https://www.cnblogs.com/yinxiaofei/p/11194037.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!