您的当前位置:首页正文

CSS常用命名-彼岸时光

2020-11-27 来源:爱go旅游网

  在前端开发中,规范使用 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

  私有样式/独立页面,根据实际情况,可以自定义命名 CSS 文件。

  以上这些常用的文件命名,无需全部使用,根据实际情况,每个页面引用不超过 3 个 CSS 文件。

6、 ID 和 Class 命名规范

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

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

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

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

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

显示全文