每日鸡汤,每一个你想要学习的念头都是未来的你向自己求救
写css 最烦人的就是给class起名字了,这里不提用横线还是下划线,我来跟着element-ui 学习一下都可以起什么名字,分割线都用下划线
- 首先是整个网站的最最最外层,可以起名layout 不要一开始就用container, layout 布局肯定是最外层;
- 然后主要的模块分节可以使用section
- 然后横向的可以用row; 纵向用column 缩写就是col, 还可以用horizontal/vertical 对应的缩写hor/vert
- 再里层就是container容器, 或者是组件componet
- 里面的如果是文档可以用document 缩写就是doc
- 一块的区域可以用block
- 导航 nav
- 组件的最外层用wrapper(包装纸,封皮) 或者wrap
- wrapper 下面用box
- 然后区分 header content(内容) footer. content可以换成body
- conent 中就是另一个小模块了, 可以继续用container
- 内部的还可以用inner, 外部的用outer
- header 里面可以有title, subtitle(副标题), headline(大字标题), btn
- sub可以用在很多方面,比如subnav, submenu等
- banner 就叫banner
- 文字可以用label 一般是标注名称的用label
- 比如一长段文字,起名字不要起text, 要起功能性的名字比如tips. 表明这段文字是提示
- 前缀prefix, 后缀suffix. 还可以起prev代表前面的一块 next 代表后面的一块, left ,right
- demo => demonstration 示范 可以用缩写demo ,全称可以用来表示文字描述
- 提示用placeholder, 点击的锚点anchor
- 还可以用bottom. top
- 常见的还有list , item
- 用main 代表主要内容, 或者一个模块 和,content差不多
- mask / card/
- 功能 features
- 方案计划 scheme
- 头像avatar
- 模块 module
- 详情detail
- 大字标题headline 可以替换掉千篇一律的title
- note 笔记,可以标示一段文字, 描述行的文案可以用description/缩写desc
- 侧边栏aside
- 工具tools-bar、toolbar
- 还有一个和inner类似的inside
- 如果有一组东西,还可以用group
- 激活的状态用active
- 还有一些表示状态的,可以在前面加上is-actived(激活状态),或者is-checked(被选中), is-error , is-bordered、is-disabled
- 滚动的元素用scroll
- 隐藏hidden
- 链接用link
- 版权copyright 缩写是copy(还是别用了,感觉像复制),友情链接friendlink
- 联系方式contact
- 对话框是dialog或者modal(模态框)
一些图标的命名
- 描边效果的 用outline 比如更多icon ,就是那三个点的,more, 描边的就是more-outline
- 还可以用solid表示实心的,但是实心的星星用star-on , 空心的星星用star-off
- 加号plus close check remove/minus (减号)
- 箭头arrow
- 用up / down 表示箭头的方向上下
- 当然还可以用top left(back) right down 表示方向
一些类型的命名,比如按钮
- default primary(主要) secondary(次要的)。
- 形状round 圆角 , circle 圆形, text文字按钮
- 根据功能类型命名 warning ,danger, success, error, info, defaut
仅供参考,持续更新中