网页规划过程中引荐的命名标准

Web UI 规划命名标准，也便是网站用户界面规划。

 

　　这套标准并非单纯的CSS、html或JavaScript命名标准，它涉及了很多运用PhotoShop这类规划东西进行网页规划过程中的命名标准。首要我是出于公司几位美工的规划效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因便是网上大多命名标准都是关于编码的，也便是那些css、html、js和一些服务器端言语的，至于规划方面的命名标准实在是很少。但是毕竟规划师也是技能团队的成员，而且前端开发工程师是要运用规划师的效果图源文件的，所以一致命名标准和规划标准对于团队的协作和工作效率肯定是有优点的。

 

　　这套WebUI规划命名标准总结自我的一些Web规划经历和国外规划师的命名方式引荐。

 

　　UI 规划命名标准

 

　　一.网站规划及基本框架结构:

 

　　1. Container

 

　　“container“ 便是将页面中的所有元素包在一同的部分，这部分还能够命名为: “wrapper“, “wrap“, “page“.

 

　　2. Header

 

　　“header” 是网站页面的头部区域，一般来讲，它包括网站的logo和一些其他元素。这部分还能够命名为:“page-header” (或 pageHeader).

 

　　3. Navbar

 

　　“navbar“等同于横向的导航栏，是典型的网页元素。这部分还能够命名为:“nav”, “navigation”, “nav-wrapper”.

 

　　4. Menu

 

　　“Menu”区域包括一般的链接和菜单，这部分还能够命名为: “subNav “, “links“，“sidebar-main”.

 

　　5. Main

 

　　“Main”是网站的首要区域，如果是博客的话它将包括的日志。这部分还能够命名为: “content“, “main-content” (或“mainContent”)。

 

　　6. Sidebar  

 

　　“Sidebar” 部分能够包括网站的非必须内容，比方近更新内容列表、关于网站的介绍或广告元素等…这部分还能够命名为: “subNav “, “side-panel“, “secondary-content“.遵循良好的命名规范可以提高代码的可读性、可维护性，减少错误，并使团队成员之间的协作更加顺畅。