发表于: 2017-03-23 23:18:44
2 666
今天完成的事情:
查看任务13要求,理解相关需求;学习了CSS命名规范-BEM思想,学习了CSS的书写规范及顺序;开始做第一个页面,去掉bootstrap框架进行重写。
明天计划的事情:
做第2、第3个页面的改写,改写完后进行样式表的分拆。初步设想拆成3个样式表,reset重设样式表、base共用基本样式表、各个页面的单独样式表。
遇到的问题:
学习BEM命名之后感觉比较怪异,因为用——和--进行命名比较怪,也很少见过这种命名方式。并且如果这样一层层嵌套也会让类名比较长、书写也不太方便。
并且学习了less之后,用嵌套来写样式表的话,会发现其实嵌套下来一是逻辑和层次比较清楚,二是貌似也不太需要太复杂的命名了。
所以想问下BEM命名在工作中会用得到吗,实用性如何?
另外也看了原子类的相关介绍和应用,也看了相关的讨论,感觉用起来确实比较方便,但对于语义的理解、可读性以及之后的维护都不太方便。不知道实际工作中用的多不,需不需要在现在的项目中进行相应运用和实践?
收获:
BEM命名:
命名约定的模式如下:
- .block{}
- .block__element{}
- .block--modifier{}
- .block 代表了更高级别的抽象或组件。
- .block__element 代表.block的后代,用于形成一个完整的.block的整体。
- .block--modifier代表.block的不同状态或不同版本。
CSS书写顺序:
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
meta标签中的属性及用途了解,例如:
1、META标签的keywords
写法为:<metaname="Keywords"content="信息参数"/>
meat标签的Keywords的的信息参数,代表说明网站的关键词是什么。
2、META标签的Description
<metaname="Description"content="信息参数"/>
meta标签的Description的信息参数,代表说明网站的主要内容,概况是什么。
3、META标签的http-equiv=Content-Typecontent="text/html
http-equiv=Content-Type代表的是HTTP的头部协议,提示浏览器网页的信息,
<metahttp-equiv="Content-Type"content="text/html;charset=信息参数"/> 。
评论