【系统学习css】跟着element-ui学习css的命名

每日鸡汤，每一个你想要学习的念头都是未来的你向自己求救

写css 最烦人的就是给class起名字了，这里不提用横线还是下划线，我来跟着element-ui 学习一下都可以起什么名字，分割线都用下划线

1. 首先是整个网站的最最最外层，可以起名layout   不要一开始就用container, layout 布局肯定是最外层；
2. 然后主要的模块分节可以使用section
3. 然后横向的可以用row; 纵向用column 缩写就是col, 还可以用horizontal/vertical 对应的缩写hor/vert
4. 再里层就是container容器， 或者是组件componet
5. 里面的如果是文档可以用document 缩写就是doc
6. 一块的区域可以用block
7. 导航 nav
8. 组件的最外层用wrapper(包装纸，封皮) 或者wrap
9. wrapper 下面用box
10. 然后区分 header  content(内容) footer.  content可以换成body
11. conent 中就是另一个小模块了， 可以继续用container
12. 内部的还可以用inner, 外部的用outer
13. header 里面可以有title, subtitle(副标题), headline(大字标题), btn
14. sub可以用在很多方面,比如subnav, submenu等
15. banner 就叫banner
16. 文字可以用label 一般是标注名称的用label
17. 比如一长段文字，起名字不要起text, 要起功能性的名字比如tips. 表明这段文字是提示
18. 前缀prefix， 后缀suffix. 还可以起prev代表前面的一块 next 代表后面的一块, left ,right
19. demo => demonstration 示范 可以用缩写demo ,全称可以用来表示文字描述
20. 提示用placeholder, 点击的锚点anchor
21. 还可以用bottom. top
22. 常见的还有list , item 
23. 用main 代表主要内容, 或者一个模块 和，content差不多
24. mask / card/ 
25. 功能 features
26. 方案计划 scheme
27. 头像avatar
28. 模块 module
29. 详情detail
30. 大字标题headline 可以替换掉千篇一律的title
31. note 笔记，可以标示一段文字, 描述行的文案可以用description/缩写desc
32. 侧边栏aside
33. 工具tools-bar、toolbar
34. 还有一个和inner类似的inside
35. 如果有一组东西，还可以用group
36. 激活的状态用active
37. 还有一些表示状态的，可以在前面加上is-actived（激活状态），或者is-checked(被选中)， is-error , is-bordered、is-disabled
38. 滚动的元素用scroll
39. 隐藏hidden
40. 链接用link
41. 版权copyright  缩写是copy（还是别用了，感觉像复制），友情链接friendlink
42. 联系方式contact
43. 对话框是dialog或者modal(模态框)

一些图标的命名

1. 描边效果的 用outline 比如更多icon ,就是那三个点的，more,  描边的就是more-outline
2. 还可以用solid表示实心的，但是实心的星星用star-on , 空心的星星用star-off
3. 加号plus  close check remove/minus (减号)
4. 箭头arrow 
5. 用up / down 表示箭头的方向上下
6. 当然还可以用top left(back) right down 表示方向

一些类型的命名，比如按钮

1. default  primary(主要)  secondary(次要的)。
2. 形状round 圆角 ， circle 圆形， text文字按钮
3. 根据功能类型命名 warning ，danger, success, error, info, defaut

 

仅供参考，持续更新中