兼容性

满足，Chrome，Firefox，Safari，IE10+，Edge，包括手机端、iPad的（Chrome，Safari）
意味，需要些更多的兼容性代码。
Autoprefixer这个网站可以自动生成兼容性代码。

CSS初始化样式表

需要高兼容性的初始化样式表以保证各种浏览器的样式统一。
可使用
https://code.1pxeye.com/download/code/reset.min.css

基本CSS

html {
	font-size: 62.5%
}
body {
	font-size: 1.6rem;
	line-height: 1.7;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Sans Japanese', 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	background: #fff;
	color: #444;
	letter-spacing: .094em;
	font-feature-settings: 'palt' 1;
	font-kerning: auto;
}

最小字号

网站中最小字号为14px

单位

尽可能，合理使用相对单位。 参考代码：

.concept span {
    width: 1.67vw;
    margin-left: 1em
}
.figure h1 span {
    font-size: .85vw;
    left: -1.2em
}
.area {
    font-size: 11px;
    top: calc(3.5% - 2px)
}
.content {
    width: 75%
}

参考来源：
https://1pxeye.com/works/beef/

CSS编写规则

1. 合理使用标签（如：body,a），属性选择器（如：input[type=text]），伪类选择器（如：a:hover），一定要准确使用保证维护人员快速对应。
2. 命名时能很好地表述此名称代表的是什么部分的样式。如: .header-brand{ margin-bottom: 20px; }
3. 合理使用英文单词命名，不可过度使用继承，伪类方式命名。如：.box>ul>li>a:nth-child(3)>div~h3{ margin-top:5px }是不提倡的。
4. 建议写注释，要简单易懂。
5. 颜色代码要小写，如果可以使用3位简写。如：body{ color:#89e }
6. 其它代码声明，也建议使用简写。如：body{ background:#666 url(sample.jpg) 0 0 / contain no-repeat border-box content-box fixed; }

客户端分界线

如果一定要区分SP或PC的话，建议在768px的节点上进行分割。SP使用的宽度是768px宽度以下的宽度。如：@media（max-width:767px or min-width:768px）{}

英语的使用

用到英语的地方，如果有大写，一定要使用代码来实现大写：text-transform: uppercase。不建议直接使用大写文本。

type属性

HTML5的标准中，样式表与js调用时不需要加type="text/css"与type="text/javascript"了。建议去掉。

使用路径

一定要使用相对路径。

关于网站的首页

1. 如果内容超过两屏一定要加上返回顶部按钮。实现快速返回顶部的功能。
2. 手机上点击电话号码时要实现拨打功能。

注释

适当使用注释。使源码更有可读性。

画像/图片/字体的使用

• 网站通常使用系统默认字体，如果使用特殊字体，一定要使用免费商用的字体。尤其在导航的位置。
• 制作PSD的时候，图片一定要用智能对象，不要栅格化图片。
• 在图片上做各种效果时，能用css实现的一定要使用代码实现其效果。不得直接将图片切出来。这样不利于维护。
• 图片要优化，合理使用媒体查询。不同客户端或分辨率下使用不同尺寸的图片。如：@media (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){}

画像/图片的命名规则

规则：类型简写_名称（颜色，编号）
例如：

• 图片 img_01 或 image_01
• 按钮 btn_red 或 button_red
• 背景 bg_header 或 background_header
• 文本 txt_concept 或 text_concept
• 标题 ttl_01 或 title_01
• 图标 ico_facebook 或 icon_facebook
• Banner bnr_contact 或 banner_contact

更多的编码常用单词

https://10.1pxeye.com/common-words-of-front-end-coding/