发表于: 2018-06-04 22:33:03

2 675


今天完成的事情

1.准备小课堂。正好借此机会学习开发过程中应该遵守的规范和class命名规范

2.把任务10需要修改的地方进行修改。


明天计划的事情

好好地讲完小课堂


遇到的问题: 

CSS命名规范中有个命名方法:面向属性的命名方法


这种命名方法之前知道可以这么命名,但是没重视过。


这种方法就是针对自身属性的一种命名方式。


可以无限重用,而且不用担心冲突


这种用法与 SASS 类似。


面向属性的命名 可以 用一个class对相同的属性进行命名,然后如果其他属性要用就可以直接引用这个class。

sass就是把相同的属性一个 $name 命名,然后在属性直接引用这个 $name。

用法异曲同工



收获

学习了html的规范:

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

2、页面title是极为重要的不可缺少的一项

3、按照从上至下、从左到右的视觉顺序书写html结构

4、代码缩进:tab键设置四个空格(通常在软件右下角设置相应空格大小)

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

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

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

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

9、尽可能减少div嵌套

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

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

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

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

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



CSS的排版规范:

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

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

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

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

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




书写规范:

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

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

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

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

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

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

7、有多个选择器时,选择器必须独占一行

8、选择器的嵌套层级不应该大于三级,位置靠后的限制条件应该尽可能的准确。


class命名规范:

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

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

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

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

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

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

样式的书写顺序:

布局方式、位置(position, top, right, z-index, display, float等)

尺寸(width, height, padding, margin)  

文本相关(font, line-height, letter-spacing, color- text-align等

视觉效果(background, borde,animation, transition 





进度:task10

任务开始时间:2018.6.1

预计结束时间:2018.6.2

是否有延期风险:无

禅道:http://task.jnshu.com/zentao/project-task-687.html




返回列表 返回列表
评论

    分享到