作为一个开发者，每次对接设计图关于背景色，字体大小，字体颜色，活动状态，hover状态都是一件头大的事情，本来那些个数据中name、title、content、status、createTime…………这些个重复作着对应对应对应的事已是心烦意乱，还要考虑大屏小屏的长宽高、位置大小，动效实现，逻辑正确，对于不同地方用到相同颜色，难免会有出入，设计师一时兴起，修改了一个地方的颜色、状态，没有统一的规范，造成的结果就是界面风格不统一，甚至造成张冠李戴的视觉效果，所以不管是在设计方面还是在开发方面，都应该预先做好主题设计；内容做一下汇总，以后便于参考：

一、设计方面

1.1、样式汇总：

背景

字体颜色

字体大小

活动状态背景色

活动状态字体颜色

hover状态背景色

hover状态字体颜色

1.2、不同模块下的样式细分：

整体背景色

默认字体颜色

模块

    模块A类（如导航）

        背景色

        字体颜色

        选中时字号|字体色

        选中时背景色

        hover状态背景色

        hover状态字号|颜色

    模块B类（如二级导航）

        背景色

        字体颜色

        选中时字号|字体色

        选中时背景色

    模块C类

        背景色（如列新闻列表板块）

        字号|颜色

    模块D类

        背景色（如列表元元素素）

        字体颜色

        hover状态背景色

        hover状态字体颜色

二、开发时将设计规范内容设置成全局变量，局部使用时，只需引入对应的变量即可；

比如：

css中设置变量

:root{

    --main-font-color:#000

}

局部引用

div{

    font-size:var(--main-font-color)

}

如此，修改主题时，只需修改全局变量，引用的部分便会跟随变动了，造成张冠李戴的概率也会大大减小

Powered by Froala Editor