本知识学习用时:2小时,总第75/10000小时
前言:编码是否规范,直接影响代码的可读性、可维护性、可交接性等。一份好的代码,可以做到:不管有多少人共同参与同一项目,都可以确保每一行代码都像是同一个人编写的。
一、CSS命名技巧
-- 语义化标签优先
-- 基于功能命名、基于内容命名、基于表现命名
-- 简略、明了、无后患
( 看这个东西中文名字是什么,然后试着翻译成英文。)
① 常见命名1:
② 常见命名2:
③ 常见命名3:
④ 常见命名4:
二、CSS 书写规范
① tab 用两个空格表示
② css 的 : 后加个空格, { 前加个空格
③ 每条声明后都加上分号
④ 换行,而不是放到一行
⑤ 颜色用小写,用缩写, 如: #fff
⑥ 小数不用写前缀, 0.5s → .5s;0不用加单位
⑦ 尽量缩写, margin: 5px 10px 5px 10px → margin: 5px 10px
三、CSS 声明顺序
相关的属性声明应当归为一组,并按照下面的顺序排列:
Positioning
Box model
Typographic(印刷)
Visual (视觉)
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。
例如:
后记:本篇文章探讨完也就意味着,我们把 HTML 和 CSS 的零碎基础知识点基本上掌握了。那接下来的几篇文章,理论结合实践,一起临摹“简书”的静态首页。
很有挑战,但等我们耐心的写完,我们会发现,其实所有需要的知识点和技巧,我们都是学过的。加油!
欢迎继续关注下文 :
(19)大实战——临摹“简书”静态首页:① 页面结构+header
(本文版权归 “公号 | Oli的前端一万小时” 所有,转载需说明来源)
领取专属 10元无门槛券
私享最新 技术干货