番外篇——②编码规范

本知识学习用时: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的前端一万小时” 所有,转载需说明来源)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180716G1KHJ800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券