前端开发布局规范---笔记

一、公共样式 base.css

每个网站都会一个相对统一的风格，那么在开发过程中，经常会重复使用到同一个字体颜色、字体大小、背景颜色、a标签以及它们的伪类样式等等的样式，所以就要求我们前端在开发之前，把要做的那个网站重复率高的代码样式写在一个公共类里，这样我们很容易就可以做到网站布局的规范性。
不同网站的公共样式各有不同，以下代码仅供参考，开发前可做适当修改！

* -- 样式说明 -- 
* 最大优先实现法，全局能实现不用区域，区域能实现不用模板， 
* 模板能实现不用界面，界面能实现不用标签 
* g - 全局 
* t - 区域 
* m - 模板 
* ui - 界面 
* lb - 标签 
* 特殊标签 
* j - 脚本 
* fix - 浮窗 */ 

//格式化页面
html, body, ul, li, ol, dl, dd, dt, p,  h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}

body {
    font: 14px "Helvetica Neue", Helvetica, "Microsoft YaHei", Arial, "sans-serif";    
    color: #333;
    background-color: #f3f4f6;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,img,table{
	outline: none;
	border: none;
	margin: 0;
	padding: 0;
}

ul,li{
	text-decoration: none;
	list-style: none;
}

a {
    color: #333;
    text-decoration: none;
}

a, a:hover {
    transition: all .3s ease-out 0s;
}

a:hover, a:focus {
    color: #509524;
    text-decoration: none;
}

//定义各种字体大小
.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}
//定义浮动和清除浮动
.fl{
	float:left;
}

.fr{
	float:right;
}

.clearfix{
	content: '';
	clear: both;
	display: block;
	overflow: hidden;	
}

//页面定位
.pos-re{
	position: relative;
}

.pos-ab{
	position: absolute;
}


//文字截取
.conceal {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.conceal2{
	display: block;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
}

//定义下划线和上划线，我觉得#f2f2f2颜色挺适合用来定义线的
.bb{
	border-bottom: 1px solid #f2f2f2;
}

.bt{
	border-top: 1px solid #f2f2f2;
}

//定义各种margin和padding值
.mg10{
	margin:10px;
}
.mg10_0{
	margin:10px 0;
}

.mgt10{
	margin-top:10px;
}

.mgb10{
	margin-bottom:10px;
}

.pdt10{
	padding-top:10px;
}

.pdb10{
	padding-bottom:10px;
}

//显示与隐藏
hide{
	display:none;
}

block{
	display:block;
}

二、css书写顺序

1、位置属性（position，top，right，z-index，display，float等）
2、大小（width，height，padding，margin等）
3、文字系列（font-size，line-height，letter-spacing，color，text-align等）
4、背景（background，border等）
5、其他（animation，transition等）

例子:

.example{
	z-index:-1;
	display:inline-block;
	font-size:1.5em;
	color:red;
	background-color:red;
}

三、css书写规范

1、使用css缩写属性：margin、padding等
margin：上 右 下 左

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

font-size:0.5px;   ===>    font-size:.5px;

3、简写命名，但前提要让别人看得懂你的命名

（X）.navigation{                  
		margin:0 0 1px 1px;
	}
	.atr{
		color:#93c;
	}

（O）.nav{
		margin:0 0 1px 1px;
	}
	.author{
		color:#93c;
	}

4、十六进制的颜色代码缩写

color:{color:#ffffff}  ===>  color:{color:#fff}

5、连字符css选择器命名规范
（1）长名称或词组可以使用中横线来为选择器命名，不建议使用“_”下划线来命名css选择器：

  a.输入的时候少按一个shift键
  b.浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）
  c.能良好区分javascript变量命名（js命名是用“_”）

（2）不要随意使用id

Id在js是唯一的，不能多次使用，而使用class选择器却可以重复使用，另外id的优先级优于class，所以id应该按需使用，而不能滥用。

6、为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更加明了：

.is-loginout{
	background:#fff;
}

四、css命名的一些规范

1、常用的css命名规则

头：header
内容：content/container
页面主体：main
导航：nav
子导航：subnav
侧栏：sidebar
栏目：colum
页面外围控制整体布局宽度：wrapper
左右中：left right center
尾：footer

友情链接：friendlink
版权：copyright
登录条：loginbar
登录：login
注册：reg
标志：logo
广告：banner
热点：hot
新闻：news
下载：download
搜索：search
滚动：scroll
标签：tags
列表：：lists
提示信息：msg
小技巧：tips
标题：title
指南：guide
服务：service
状态：status
图标：icon
当前的：active/currtent
注释：note

2、注释的写法

/* header S */
内容区
/* header E */

3、css样式表文件命名

主要的：main.css
模块：module.css
基本共用：base.css
布局、版面：layout.css
主题：themes.css
专栏：columns.css
文字：font.css
表单：forms.css
补丁：mend.css
打印：print.css

五、分享一些我觉得很实用的样式

1、::-webkit-input-placeholder ：
改变placeholder文字颜色，配合opacity使用效果更好
例如：

::-webkit-input-placeholder{
	/*chrome、opera、safari*/
	color: red;
	opacity: .5;
}
::-moz-placeholder{
	/*firefox 19+*/
}
:-ms-input-placeholder{
	/*IE 10+*/
}
:-moz-placeholder{
	/*firefox 18-*/
}

2、contenteditable ：
设置元素是否可编辑：<p contenteditable=”true”>可编辑</p>

3、position：absolute，让margin有效
如：<div></div>
下面样式，给div定义了position为absolute后，margin的属性就会失效，无法居中。

div{
	width: 100px;   
height: 100px;
	background-color: red;
	margin: 100px auto;
	position: absolute;
}

解决办法：加上left:0; right:0; 即可，文字position居中解决text-align:center；失效，也可同理。

4、user-select禁止用户选中文本

{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

5、box-sizing让元素的宽度、高度包含border和padding

{
	box-sizing:border-box;
}

6、calc()计算属性

div{
	 width:calc(100%-100px);
}

7、css3 linear-gradient 线性渐变，默认开始在top，也可以自定义方向

div{
  linear-gradient(red,yellow);
}


{
    /* Safari 5.1 - 6.0 */
    background: -webkit-linear-gradient(left, #00b4d5, #02d6d9);
    /* Opera 11.1 - 12.0 */
    background: -o-linear-gradient(right, #00b4d5, #02d6d9);
    /* Firefox 3.6 - 15 */
    background: -moz-linear-gradient(right, #00b4d5, #02d6d9);	
    /* 标准的语法 */
    background: linear-gradient(to right, #00b4d5, #02d6d9);
}

8、常用选择器：nth-child()
可以选择父类下某个子节点，或选择多个倍数的节点
p:nth-child(3){} //选择父类下第三个节点
p:nth-child(3n){} //选择父类下第3、6、9…个节点

9、让图片不变形

img{
  object-fit:cover;
}

六、html页面常用布局

一个好的前端页面，布局一定是整体看上去统一规范的。我们开发的时候，要先把布局搭建好，在往里面填写内容，这个框架我们可以称它为一个组件，组件形式的开发可以大大地提高前端开发的效率，并且代码的可复用强，不仅是对开发人员，包括用户的体验都是棒棒的。

我们开发前应该先想好怎么去搭建一个整体的架构：

（一）两列布局

<div class="main">
	<div class="col-left">
		<div class="box"></div>
	</div>
	<div class="col-auto">
		<div class="box"></div>
	</div>
</div>

//在框架里，我们要注意，不要写死height值，要让它自适应
.main{
	display: block;
    width: 960px;
    margin: 0 auto;
}
//如果是两列布局，我们可以设置左边的width固定，右边为自适应
.main .col-left {
    width: 700px;
    margin-right: 10px;
}
.col-left {
    float: left;
}
.col-auto {
    overflow: hidden;
    _zoom: 1;
    float: left;
}
.box {
    background-color: #fff;
}
.box {
    border: 1px solid #c3d4e7;
    zoom: 1;
    overflow: auto;
}

单行布局：这里我们使用h5规范的section和article来搭建

<div class="section">
	<article class="wrapper "></article>
</div>

//不唯一，只是写一些可能用上的样式作为参考
.section{
    background-color:#fff;
    height: calc(100% - 349px);
    min-height: 452px;
    position: relative;
	//或者不固定高度
	padding-top: 150px;
    padding-bottom: 150px;
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
}

.wrapper {
    width: 1200px;
    margin: 0 auto;
    max-width: 80%;
}

七、前端多人参与合作–规范

有时在做一个项目的时候，可会有多个前端开发共同参与，所以有个规范和标准是很重要也是很必要的。
（1）先更新代码后修改
重要

（2）避免代码命名重复
1、建议在给css命名的时候在前面加上自己的标签，比如我是r-*****
2、好处：
A：别人在看代码时一看就知道是哪个开发人员写的，有问题也可以很快定位到这个人
B：避免通用命名的代码样式覆盖，比如.main .r-main就不怕了

（3）Layui框架的学习
在我做的几个项目里面，重复使用频率较高到的框架之一是layui，然后写一些建议：
A：前端开发都先去学习一下这个框架的基本使用方法，相关文档：https://www.layui.com/doc/
B：做项目前先引入对应的layui.css和layui.js
因为做好页面再引入，会出现很多样式强制覆盖的问题，提前引入，就可以减少后期优化的成本。
C：使用这个框架可以参考可可DJ的网站，通用的一些功能，都有代码示例

（3）一个项目核心的css和js
一个项目做下来会发现头部底部引入了很多css和js，有些js插件也不是每个页面都需要的。所以我的建议是：
A：css引入

框架样式layui.css
公共样式base.css
主要样式main.css

（PS: 还有其他框架样式，根据页面需要引入,框架样式要放在base.css和main.css之前，首页index.css和底部footer.css的样式一般不做拆分，都写在main.css里面，如果有其他模块要拆分，视情况而定。）
B：js引入

框架功能 jquery.min.js   layui.js
主要功能 main.js

（PS：其他js视情况而定）

必要性：
上面提到的css和js是每个页面都要引入的，一是通用的样式或者功能可以复用；二是后面优化的时候需要增加某个全局样式或者功能，可以直接写在里面，不用害怕哪一个页面没有使用到。