静态页面技巧 #

1.后代选择器的问题 #

1. 要分块, 每一块用一个div包起来, 写上注释
2. 要使用后代选择器, 不然容易冲突
3. 选择器的层级不宜超过3层

2.命名技巧 #

1. 尽量用英文

2. 常用英文单词

   中文	英文	中文	英文
   1. 头部 header	2. 主体 main	3. 底部 footer	4. 导航 nav
   5. 标志 logo	6. 列表(ul) list xxx-list	7. 列表选项(li) item	8. 左 left
   8. 中间 center	9. 右边 right	10. 侧边栏 side	11. 菜单 menu
   12. 标题 title	13. 文本包裹层 text-box	14. 文本 text	15. 多个文本 text1, text2, text3
   16. 按钮 btn	17. 图片 img	18. 输入框 inp	19. 横幅 banner
   20. 轮播图 swiper	21. 内容 content	22. 图标 icon	23. 链接 link

3.预处理语言less #

1. 安装easy-less 插件

2. 下面的代码

   .footer {
   	.item {
           .text {
   			color: red;
           }
   	} 
   }
   
   // 会转变为
   .footer .item .text {
   	color: red;
   }