大型网站建设管理规范经验和好处分享模板 g381
时间:2023年11月28日
/来源:网络
/编辑:佚名
最近工作的重点是把之前写的一整套大型网站模板进行了一次重构,因为网站模块很多,有新闻、图片、视频、品牌、产品、tags、排行榜、搜索、栏目页、列表页、频道页、单页面等页面,加起来形形色色的有至少20个模板,这还没算后期还要开发的会员系统的模板。在开发这个大型网站前端的时候就开始发现规划和标准的重要性,不然代码太乱了,利用率也不高,管理乱七八糟,更重要的是开发好一段时间,对代码熟悉度不高了,后面在调整就更痛苦了,所以自己在写这个代码的时候开始给自己做标准化的管理规范,好处就是方便,代码易懂,扩展方便,使用高效。
色系标准
网站的颜色搭配是一个很重要的工作也是一个需要去规范的标准,好的色彩搭配让人感觉很舒服,页面看起来统一协调,写代码的时候也调用方便。
下面是我的一个网站配色方案。
#ff4b71 主色调红
#ee214b 微差异红
#151515 h1-h6字体颜色
#ebebeb 灰色线条
#f4f4f4 线框2 白色
#f93961 装饰性红色 ,红色btn背景
#f4385f 背景红色/鼠标经过H1-h6字红色
#808080 灰色smalltext文字使用
#b8b8b8 灰色 日期-发布人文字
#f5f5f5 淡灰色背景
#fff 黑色背景白字
rgba(255,255,255,0.7) 辅助 黑色背景白字
#e03558 黑色背景红色ICON
rgba(0,0,0,0.7) 背景黑色
代码类的命名规范
由于网站模块太多,所以css的样式是非常非常多的,所以规范化,也是便于后期的管理,我采用的是分模块的样式名标准化,比如文章模块的css类统一使用a-xxx,a-xxx-xxx的标准,然后文章还有列表,就用al-xxx,al-xxx-xxx的标准,一看就知道,而且代码最大程度的缩小到最少。
新闻 a
产品 p
搜索 s
排行 r
视频 v
首页 i
图片 g
tag t
品牌 b
店铺导航 e
按钮
底部公共 f
顶部公共 h
专题 z
单页面 o
公共模块 c
会员 m
单字母表示 是什么模块的类 ,列表页面使用字母+l 频道页面使用字母+c ,模块使用字母+b ,后期还考虑吧模块命名在更标准话一点,比如模块顶部统一命名为什么,更加方便管理和高效
字体规范
目前在这块还没有规范,准备调整下现有的代码,把这块的规范也要做好。
这是目前我再开发网站过程的目前的标准化,慢慢会更多的标准化,这样可以提升。
色系标准
网站的颜色搭配是一个很重要的工作也是一个需要去规范的标准,好的色彩搭配让人感觉很舒服,页面看起来统一协调,写代码的时候也调用方便。
下面是我的一个网站配色方案。
#ff4b71 主色调红
#ee214b 微差异红
#151515 h1-h6字体颜色
#ebebeb 灰色线条
#f4f4f4 线框2 白色
#f93961 装饰性红色 ,红色btn背景
#f4385f 背景红色/鼠标经过H1-h6字红色
#808080 灰色smalltext文字使用
#b8b8b8 灰色 日期-发布人文字
#f5f5f5 淡灰色背景
#fff 黑色背景白字
rgba(255,255,255,0.7) 辅助 黑色背景白字
#e03558 黑色背景红色ICON
rgba(0,0,0,0.7) 背景黑色
代码类的命名规范
由于网站模块太多,所以css的样式是非常非常多的,所以规范化,也是便于后期的管理,我采用的是分模块的样式名标准化,比如文章模块的css类统一使用a-xxx,a-xxx-xxx的标准,然后文章还有列表,就用al-xxx,al-xxx-xxx的标准,一看就知道,而且代码最大程度的缩小到最少。
新闻 a
产品 p
搜索 s
排行 r
视频 v
首页 i
图片 g
tag t
品牌 b
店铺导航 e
按钮
底部公共 f
顶部公共 h
专题 z
单页面 o
公共模块 c
会员 m
单字母表示 是什么模块的类 ,列表页面使用字母+l 频道页面使用字母+c ,模块使用字母+b ,后期还考虑吧模块命名在更标准话一点,比如模块顶部统一命名为什么,更加方便管理和高效
字体规范
目前在这块还没有规范,准备调整下现有的代码,把这块的规范也要做好。
这是目前我再开发网站过程的目前的标准化,慢慢会更多的标准化,这样可以提升。
新闻资讯 更多