前端规范-布局和模块命名
来源:互联网 发布:摄像头图像处理算法 编辑:程序博客网 时间:2024/06/06 14:13
1、前言
为了能更好的分工协作,使用模块化来开发,每个人负责一个模块,互不干扰,下面简要的说说模块化的构思。
2、布局层
2.1、大块布局
所有页面公用头部和尾部,这两部分拿出来公用,分别用#h和#f命名,主体部分每个页面都不同用#b命名。.w代表公用的宽度,如果是1280的就定义.w{width:1280px;margin:0 auto;}这样全部的都能居中。
2.2、格子
每个大块再进行细分,.r表示行,.c表示列,每一行每一列都有唯一的索引,方便定义宽度和间距。比如导航栏的布局可以用选择器#h .r1 .c2来定义宽度。.fl左浮动.fr右浮动.clearfix清除浮动。
3、模块
3.1、模块外层
格子里面再放入模块,模块相互独立不影响,使用php include进来。同一个页面相同样式的可以为模块定义class。单独的用布局+模块选择器定义就可以了。比如搜索#h .r2 .c2 .m1,就不用为模块单独想一个class,避免样式冲突。
3.1、模块内层
模块内层结构再进行细分,头部用.h,主体部分用.b,尾部用.t,跟大块布局类似,只是id换成class。
4、结语
这样的缺点是选择器比较长,之后尝试用less或者sass看有没有更简便的写法。
0 0
- 前端规范-布局和模块命名
- DIV+CSS布局和命名规范
- 前端HTML_CSS命名规范
- [前端] 命名规规范
- Web前端命名规范
- 笔记:前端命名规范
- 前端命名规范
- 前端标签命名规范
- 前端规范-布局构思
- 前端开发常用命名规范
- 前端规范之命名规则
- 前端web开发命名规范
- 浅谈web前端命名规范
- 前端web开发命名规范
- 前端开发CSS命名规范-命名规则
- HTML编码规范 - (WEB前端命名规范)
- 页面布局常见命名规范
- 前端页面模块常用命名
- netty的线程池-----揭示了使用两个线程池的原因
- BZOJ 3262 陌上花开 CDQ分治
- Palindrome Partitioning II @LeetCode
- 你对技术有追求吗?
- 前端规范-布局构思
- 前端规范-布局和模块命名
- foreach语句的应用
- LeetCode: Remove Duplicates from Sorted List II
- 方法、属性的使用
- MongoDB的MapReduce用法及php示例代码
- 循环-27. 求给定序列前N项和之五(15)
- 如何打印斐波拉契数列以及质数列表
- MongoDB的聚合函数 Aggregate
- 循环-28. 求给定序列前N项和之六(15)