CSS-10 代码规范；CSS编写顺序的思路；组件化开发思路；meta元素；link图标；CSS样式的字符编码；类名的单词拼接符号

1_代码规范

• 参考凹凸实验室代码规范：https://guide.aotu.io/

• 平常学习和敲项目代码的时候多学习借鉴

2_CSS编写顺序的思路

1. 确定盒子本身布局： position: absolute、 float: left/right、 display: flex

2. 盒子的特性和可见性： display: block/inline-block/inline/none、 visibility/opacity

3. 盒子模型： width/height、 box-sizing、 margin/border/padding/content、 box-shadow/text-shadow

4. 内部的文本文字： * font/text

5. background：例如 background-image/size/position/color

6. 其他，例如 transform/transition/overflow/white-sp

3_组件化开发思路

目前Vue、React、小程序都采用的是组件化开发思路；

项目整体思路 – 各个击破

4_meta元素

4.1_用于定义元数据：

• 在之前讲解head的时候说过，head中用于定义元数据；

• 比如标题title、样式style、link外部资源等；

• meta用于定义那些不能使用其他定元相关（meta-related）元素定义的任何元数据信息；

4.2_ 定义的元数据的类型包括以下几种：

• 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。

• 如果设置了 http-equiv 属性，meta 元素则是编译指令。

• 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页

4.3_http-equiv属性

看官方文档的解释：

• 告知IE浏览器去模仿哪一个浏览器的行为；

• IE=edge，告知IE8区使用最高有效模式来模仿；

4.4_name属性

值非常多，可以查看文档： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta/name

常用的：

robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。

author：文档作者的名字。

Copyright：版权声明；

description：一段简短而精确的、对页面内容的描述。 一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。

keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录；

5_link图标

Favicon是favorites icon的缩写，亦被称为website icon（站点图标）、page icon（页面图标）；

用法格式如下：【王者荣耀图标为例】

<link rel="icon" href="https://pvp.qq.com/favicon.ico">

还有很多兼容性用法，此处暂不具体讲述

6_CSS样式的字符编码

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

1. 文件的开头的 Unicode byte-order（字节顺序标记） 字符值。

https://en.wikipedia.org/wiki/Byte_order_mark

2. 由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。

3. CSS @规则 @charset。

4. 使用参考文档定义的字符编码： 元素的 charset 属性。

   该方法在 HTML5 标准中已废除，无法使用。

5. 假设文档是 UTF-8。

开发中推荐在CSS文件的开头编写@charset指定编码：

@charset "UTF-8"

类名的单词拼接符号

• 公共的css类名单词拼接，一般用中杠“-”，例如 header-wrapper

• 详细具体类名的单词拼接，一般用下杠“_”,例如 top_logo