5811前端基础布局、模块、命名规范

曹え 5811 发布于:2022-04-25 02:09:38

PC响应式规范说明


响应式前端10条必须遵循的原则:

1、列表用ul li 

2、不要定义行内样式

3、字体要和参考站一致

4、class名用双引号

5、模块和布局分开

6、PC响应式尽量不用flex,如果用仅仅用于居中对齐,不要用于布局

7、不要使用 > 选择器

8、考虑兼容ie 9以上

9、英文字体默认用 Aria

10、1000-1920分辨率考虑使用 vw/rem 缩放,具体根据项目情况而定


写一个好的页面必须遵循以下几个原则


1、模块和命名要规范

2、布局和模块要独立

3、遵循顺序三原则


名词解释

布局

用于划分结构

一般情况下布局的样式,仅仅只有宽度和浮动

.col-l{width:300px; float:left;}
.col-r{width:300px; float:right;}


布局命名

页面内容宽度:.wp

分屏,横向: .row-

分栏,纵向:.col-


不同屏,不同布局,加上分屏名


第一屏,两栏
.row-a1 .col-l{width:300px; float:left;}
.row-a1 .col-r{width:300px; float:right;}

第二屏,两栏
.row-a2 .col-l{width:200px; float:left;}
.row-a2 .col-r{width:400px; float:right;}



模块

放在结构里面的内容和样式

模块有自己的名字定义自己的样式

禁止用布局名字定义模块名


命名规范

自定义名必须加上以下前缀,模块命名种必须带有“-”

列表类加前缀:.ul- 或 .list-

其他模块: .m- 

公用样式: .g-


class命名规范视频教程:https://www.ixigua.com/i7045255285451325964/

class命名脑图手册:https://www.mubucm.com/doc/7yN2GQK-PC


遵循以下几个原则


  1. 模块和布局样式要独立

  2. 不要用布局的名字定义模块的样式

  3. 定义一个模块的样式,直接用模块名开始


定义实例


定义模块样式,直接用模块名开始


// 正确

.ul-news li {}


// 错误 (下面写法都是错的,禁止用布局名定义模块样式)

.col-l .ul-news li {}

.col-l li {}

.wp .ul-news li {}


两个模块有点一样怎么办


html

// 模块1 的命名
<ul class="ul-news">

// 模块2 的命名  继承 模块1的样式

<ul class="ul-news ul-news-a1">


css

// 模块1
.ul-news li {}


// 模块2 样式 (只需写不同的样式)

.ul-news-a1 li {}


觉得有用请点个赞吧!
1 136