Home >Web Front-end >HTML Tutorial >CSS 常用命名_html/css_WEB-ITnose

CSS 常用命名_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:24:23984browse

  在前端开发中,规范使用 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)、命名可以使用单词缩写,但必须确保是有效的缩写,即别人能看懂,不能自定义缩写。

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn