黑马程序员技术交流社区

标题: 记住这些单词基本，前端的命名基本都够用了 [打印本页]

---

作者: 林熙奕    时间: 2017-11-13 22:48
标题: 记住这些单词基本，前端的命名基本都够用了
以前楼主学前端的时候，对于样式，排版，交互，兼容等都没有遇到过什么难题，让楼主最头疼的就是命名了，
英语差，认识的单词没有几个，用拼音命名总被老师骂了一顿，这是楼主收集的最常用的命名单词了，希望能
帮到你：


id的命名：
1）页面结构
容器： container             页头：header       内容：content/container
页面主题：main               页尾：footer       导航：nav
侧栏：sidebar                栏目：column       左中右：left right center
页面外围控制整体布局宽度：wrapper

2）导航
导航：nav                    主导航：mainnav     子导航：subnav
顶导航：topnav               边导航：sidebar     左导航：leftsidebar
右导航：rightsidebar         菜单：menu          子菜单：submenu
标题：title                  摘要：summary

3）功能
标志：logo                 广告：banner          登陆：login
登录条：loginbar           注册：regsiter        搜索：search
功能区：shop               标题：title           加入：joinus
状态：status               按钮：btn             滚动：scroll
标签页：tab                文章列表：list        提示信息：msg
当前的：current            小技巧：tips          图标：icom
注释：note                 指南：guild           服务：service
热点：hot                  新闻：news            下载：download
投票：vote                 合作伙伴：partner     友情链接：link/friendlink
版权：copyright

1）颜色：使用颜色的名称或者16进制代码，如

.red{ color: red;}         .f60{ color:#f60;}    .ff8600{ color:#ff8600;}

2)字体大小，直接使用"font+字体大小"作为名称，如
.font12px{ font-size: 12px;}
.font9pt{ font-size: 9pt;}

3)css文件夹
主要的 master.css          模块 module.css         基本公用 base.css
主题 themes.css            专栏 columns.css        打印 print.css
文字 font.css              表单 forms.css          补丁 mend.css
布局，版面 layout.css

4)CSS ID的命名
  外 套：   wrap          主导航：nav/mainnav/globalnav     子导航：subnav
  页  脚：  footer        整个页面： content                页眉： header
  商 标： label           

注释：

<!--Footer-->       (尾部)
  内容区
<!--End Footer-->    （尾部结束）

/*  Footer  */    (尾部)
  内容区
/*  End Footer  */  （尾部结束）

小技巧：样式可以使用“类别+功能”的方式命名，如  .barnews    .barproduct


扩展：
Editor's review .editor-review 编辑评论
New release .news-release 最新产品
Publisher .publisher 生产商
Screen shot .screenshot 缩略图
FAQ .faqs 常见问题
Keyword .keyword 关键词
Blog .blog 博客
Forum .forum 论坛





积累：

作者 author            游客 tourist            anima 精华   

dream 梦想              桥  bridge             日历  calendar

assess 评价            美女 peri               五角星 five-pointed star

avatar  头像           留言可用  words         徽章   Badge

recommend 推荐         验证码（识别码）identifying code （identifyingCode）

playingArea  播放区     other其他              发表： publish

classify  分类         详情  details           收藏： house



set up 设置                            公司简介 About_us                 产品展示  products
               
knowLeage  行业知识                 热线   hot line                   地址    address
         
custom service  客服                 售后服务  after service           展示   show

商品  goods/products                 价格  price                       总价钱  Total  price

选择  choose                         订购  Order                       描述   describe

详细  detailed                      评分  score                       会员登录 Member login
       
说明  explain                        登录  login/entry                 注册   register

状态  condition                      比例  ratio                       后缀   suffix

工资/金钱  wages/money          



反馈  feedback                        意见   opinion                          参数   parameter
成功  succeed                        失败   fail                          目标   goal       

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2