发表于： 2019-04-07 22:35:29

1 811

Day 48 task13-3

今天完成的事情

1.完成task13的侧边栏，结束task13

2.学习开发命名规范及css的一些提高渲染性能的规范写法

3.了解组件化和模块化

遇到的问题

昨天已经大致了解了一下侧边栏的实现方法，今天自己从头做了一遍，有了更深的了解，没有什么大问题。

然后去了解了一下任务十四相关知识点及以前遗漏的知识点，暂没有问题

今天的日报字太多，困扰我很久的问题贴在这里

弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：

文字流式，控件弹性，图片等比缩放。以图描述：·

例如网易页面里除了font-size之外的其它css尺寸都使用了rem作为单位，但使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦，网易是如何解决的呢？最根本的原因在于，网易页面上html的font-size不是预先通过媒介查询在css里定义好的，而是通过js计算出来的，所以当分辨率发生变化时，html的font-size就会变，

deviceWidth = 320，font-size = 320 / 6.4 = 50px

deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px

deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px

deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

原文链接：http://caibaojian.com/mobile-responsive-example.html

等学完了js，想自己试试看

收获

1.侧边栏

1.在主页面的侧边栏按钮上添加label标签，"for"指向关联部分，即隐藏的侧边栏

<header>
<label for="sidemenu">
<span></span>
<span></span>
<span></span>
</label>
</header>

<input type='checkbox' id='sidemenu'> <!--input类型；id要与 label的for一致-->

2.用div将整个页面（自header至footer）包裹起来，并设置为100%宽度(保证页面被不变形的平移出去)

#wrap {/*设置主页面为100%宽度，并渐出动画及多余隐藏*/
width: 100%;
transition: 0.2s ease-out;
overflow: hidden;
}

3.计划侧边栏aside展开后占比70%；

将aside定位到position:left:-70%;的位置，将其隐藏

4.在header前书写侧边栏aside页面

aside {
/*侧边栏,初始位置为-70%；，即隐藏效果*/
position: absolute;
top: 0;
bottom: 0;
left: -70%;
width: 70%;
background: #ffffff;
transition: 0.2s ease-out;
/*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/
#sideul {
position: absolute;
top: 4.4rem;
width: 100%;
@include flex(column,space-between,center);
a {
width: 100%;
text-decoration: none;
@include flex(row,space-between,center);
border-bottom: $border #eaeaea;
li {
list-style: none;
color: #69d1e9;
width: 100%;
height: 4.4rem;
line-height: 4.4rem;
font-size: 1.5em;
text-align: center;
}
}
}
}

5.设置点击后样式，aside在页面最左侧，主页面向页面外移动70%；

#sidemenu{
&:checked + aside{
/*点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/
position: absolute;
left: 0;}
&:checked ~ #wrap {
/*为被选中的sidemenu后的wrap设置属性*/
padding-left: 70%;
}
}

2.选择器

// > 子代选择器
article > section { border: 1px solid #ccc }

// 同层相邻组合选择器+选择header元素后紧跟的p元素
header + p { font-size: 1.1em }

//同层全体组合选择器~
article ~ article { border-top: 1px dashed #ccc }

3.开发过程中应该遵守哪些编码规范和class命名规范

html规范

1、页面的第一行添加标准模式声明<!DOCTYPE html>

2、代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）

3、html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写

4、建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"

5、不同doctype在不同浏览器下会触发不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">

6、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部

7、尽可能减少div嵌套

8、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中

9、对于属性的定义，确保全部使用双引号，绝不要使用单引号

10、背景图片请尽可能使用sprite技术,减小http请求

11、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能

12、不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。

CSS规范

排版规范

1、如果是在html中写内联的css，则必须写成单行

2、每一条规则的大括号{前后加空格

3、属性名冒号之前不加空格，冒号之后加空格

4、每一个属性值后必须添加分号，并且分号后加空格

5、多个selector共用一个样式集，则多个selector必须写成多行形式

class命名

1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_

2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

3、不允许通过1、2、3等序号进行命名；避免class与id重名

4、class用于标识某一个类型的对象，命名必须言简意赅

5、尽可能提高代码模块的复用，样式尽量用组合的方式

6、规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名

CSS书写规范

1、CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

2、去掉小数点前的“0”

3、简写命名——很多用户都喜欢简写类名，但前提是要让人看懂你的命名。

4、16进制颜色代码缩写——有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

5、长名称或词组可以使用中横线来为选择器命名。

6、不要随意使用Id——id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

4.组件化和模块化

1、组件的核心可以理解为代码的重复使用。功能单一或者独立。

也可以这样理解，一个html的框架是由三个组件组成，header头部、main主体和footer页脚组成，所以这里的header可以理解为组件。

2、模块的核心可以理解为分离职责，就是功能的划分。例如这里我们写的任务14.15中的导航栏，轮播图就是功能模块，这里我们可以分开来写入单独的css中，然后不同的模块组成组件。

组件化的意义是为了前端可以更好的分离开来，实现独立维护可维护性强。

组件化和模块化的区别

模块化更一种开发规范，比如cmd amd 是为了更好的解藕，比如一个网站，按照不同的模块来开发，

比如你有个评论区，a 项目有，b 项目有，如果仅是单纯的模块开发，这个js 文件你就可以单独来回引用，

更比如，一个页面分好多个功能，这时候你要是都写在一个js 中会越来越大，而你把他分成不同的模块，

比如评论是一块，分页又是一块，已经上线，或你不做了，后期别人接手，或你接手别人的项目，这个时候来个需求让你把分页去掉，或修改你可以清楚的找到对应模块文件进行修改或去掉

bootstrap就是一个库，但也是由组件组成的，每一个都是单独的样式，例如：btn是button按钮的简写类名，给这个类名写了模块样式，所以只需要再用的时候加上btn的类名就行了。任务13开始还只是刚接触，可以通过设置基础重置样式，让一些带有margin、padding值或者a标签的下划线的默认样式恢复成初始状态，使用方法，通过用link外联来链接一个reset.css文件，然后在这个文件里写上一些基础的重置样式。

除了这个也可以再写一个样式库，样式库里可以放一些margin、padding值，定义属性或者是字体大小，通过语义化来简写类名，每一个都单独的设置属性值，需要用的时候就可以加到class里，这样既减少了代码量，样式库就相当于一个公共的，想要给元素增加属性直接引用就行，

这样写下来，不仅代码减少了，每一个模块都拆分的很清楚，都是单独的。其他的属性再通过scss来编写。

5.css之提高渲染性能的写法

1.不要使用*{} 类似的通配符

这种方法虽然写起来简单，但是渲染起来，浏览器引擎要遍历所有的标签，很影响效率。为了对浏览器友好，可以把自己经常用的标签进行重置操作。

2.css选择器的嵌套不要太多

绝对没有比用后代选择器更改糟糕的做法了，因为浏览器读取css选择器有一个很重要的原则，那就是从右到左读取。所以尽量避免使用后代选择器，要去除不必要的祖先元素，可以考虑使用类选择器来替换后代选择器

3.不要在样式表中书写不存在的class

4.尽量少用绝对定位

虽然绝对、定位可以很简洁的实现很棒的效果，但是由于浏览器的渲染机制，网页中如果用过多的绝对定位，会让网页加载速度变得很慢。

5.让属性尽可能多的去继承，而不是覆盖。

6.尽量不去用滤镜

滤镜的使用不仅存在浏览器兼容的问题，还很耗费资源。如果一定要达到滤镜的效果，可以考虑用图片去实现

7.避免使用css表达式

css表达式尽在ie浏览器下才起作用，ie8后不推荐使用，因为他会严重影响页面性能。任何时候，不管任何一个事件被触发，例如窗口的resize事件，鼠标的移动等等，css表达式都会重新计算一遍。

8.把css文件放在页面顶部

把外联或内联样式表放在body部分会影响页面渲染的速度，因为浏览器只有在所有样式表下载完成后才会继续下载其他页面内容。另外内联样式表有可能会引起页面重新渲染或显示隐藏页面中的某些元素，所以建议使用外联样式表，不要使用内联样式表

9.页面头部表名文档编码

html文档是以包含文档编码信息的数据流方式在网络间传输。页面的编码信息一般会在http对应的头部信息或在文档内的html标记中指明。客户浏览器只有在确定的页面编码后才能正确的渲染页面，所以在绘制页面前，大部分浏览器会缓冲一定字节的数据来从中寻找编码信息。不同的浏览器预缓冲的字节数是不一样的，如果浏览器接收到了设定的预缓冲数据量信息后还没有找到页面的编码信息，便会根据各自制定的默认编码渲染页面。如果此时再获取到页面编码信息，和现在所用的不一致，那么整个页面就得重新渲染，使渲染速度大大降低。所以要习惯指定编码信息，而且给页面指定的编码要符合页面实际编码；如果在http头部和html标记中同时指定了编码，需要保证编码信息一致

具体网址：https://blog.csdn.net/foreverlove_lyf/article/details/51135971

明天计划学习

正式开始任务14

因为这里不能引用bootstrap，所以导航栏、栅格。轮播图都需要自己来编写样式。

明天先从栅格系统开始

注：【unsolved】截日报发出前未解决的问题

【solved】已解决现象但并未从根本上解决问题

【solved】已解决