关于组织自定义皮肤/主题的一点思考

写这篇随笔的动机是之前实习的时候出了自定义皮肤的需求，但是由于整个项目一开始前端基础就没打好，导致很多地方根本无法由前端程序猿控制，最后需要后端进行大量的重复劳动。在实习期间通勤的时候我一直在看Pro CSS for High Traffic Websites，结合里面的经验加上自己的思考就有了这篇随笔。

在前端开发中，标题栏、按钮、图标等元素经常需要使用图片来展现样式，并且这些东西常常会有类似自定义皮肤或者随季节性新主题更换的需求。如果使用HTML的img标签来插入它们，在遇到需要更改皮肤或主题的时候就要“伤筋动骨”，修改HTML里的大量img标签，这通常就需要后端修改相当多的代码。

实际上，这些图片应当属于“样式”，而不属于“内容”，因此不应该以img的形式出现在HTML里。这时候更好的做法是用语义化的HTML元素为它们留下空位，使用CSS的背景来添加图片。如果需求变动的时候，更换CSS，或者利用CSS的优先级覆盖掉默认样式即可。

在使用img的时候，可以用alt来保证accessibility，但是如果使用CSS添加图片，还要加上给屏幕阅读器或者爬虫留下提示性文字的话，一般的做法是在用于添加背景的HTML元素里留下文字，并且使用CSS将这些文字从页面上隐藏，如：

.hide-text {text-indent: -9999px;
}

这样做还有一个好处，当用户网络出现问题，无法加载CSS，但是依然想使用网站的基础功能时，这些留下的文字可以替代背景图片作为指引。

注意：如果想要通过设置 text-indent 来隐藏文字，包含文字的元素的 display 应为 inline-block 或者 block。如果是 inline 则无法生效。此外还需要用CSS预留下图片的宽和高，因为 text-indent 之后，这个元素就几乎没有大小了。

一种简洁有效的做法是在需要使用新主题时，为<body>加上新的类名，然后在默认CSS代码中涉及更改的部分的基础上，创建新的覆盖样式。举例来说，假如需要创建圣诞主题，先为body加上类名（如果后端使用了可嵌套的HTML模版，通常来说这里只要修改一处）：

<body class="xmas"></body>

如果为一个模块的小标题使用了img标签显示，那么原来可能是这样的

<div class="popular-title"><img alt="Popular" src="/some/path/popular.png">
</div>

重新组织一下，应该是

<h3 class="popular-title hide-text">Popular</h3>

然后利用CSS加上背景并隐藏文字

.popular-title {background: url(/some/path/popular.png) no-repeat left top;height: 100px;width: 330px;
}.hide-text {text-indent: -9999px;
}

那么，到了圣诞节的时候，需要更换主题，只需要在主题用的CSS里加上：

.xmas .popular-title {background: url(/some/path/popular-xmas.png) no-repeat left top;
}

用原来的选择器加上之前为新主题添加的body的类名，就可以获得更高的优先级，覆盖默认的样式。

后端在修改的时候，也只需要加入一个新的link。原来可能在head里引入的CSS是

<link rel="stylesheet" type="text/css" href="/some/path/index.css">

那么只需要加多一句，变成

<link rel="stylesheet" type="text/css" href="/some/path/index.css">
<link rel="stylesheet" type="text/css" href="/some/path/index-xmas.css">

即可。同样地，如果后端使用了可嵌套的HTML模版，通常也只需要修改一处。这样一来，就能减少不少重复劳动和重复代码。

转载于:https://www.cnblogs.com/joyeecheung/p/3989697.html

关于组织自定义皮肤/主题的一点思考相关推荐

android 自定义皮肤,Android Studio 自定义皮肤主题和背景
新的一年,新的开始,在这里先祝福大家在新的一年收获多多,多升职,多加薪,代码没BUG. 第一 Android Studio自定义皮肤主题-ColorThemes 寒假期间有人问我, "你代码 ...
android studio 皮肤,Android Studio 自定义皮肤主题和背景
Android Studio自定义皮肤主题-ColorThemes 最近有人问我, "你代码这是用的什么字体? 看着好舒服", 其实这是用了自定义皮肤主题包,主题包下载网站 htt ...
android studio修改皮肤,Android Studio 自定义皮肤主题和背景
新的一年,新的开始,在这里先祝福大家在新的一年收获多多,多升职,多加薪, 第一寒假期间有人问我, "你代码这是用的什么字体? 看着好舒服",其实这是用了自定义皮肤主题包,主题包 ...
自定义 Typora 皮肤主题
如果对你有帮助的话,记得给博主点个赞哟! 也欢迎各位土豪朋友打赏博主,博主会继续分享优质的内容给大家的! 不管是对于CSDN的小伙伴,还是其他网站的小伙伴,相信大家大多数都是采用的 MarkDown ...
关于c语言结构体偏移的一点思考
注:此处只是利用了编译器的特性来计算结构体偏移这句话就一笔带过,说得有点牵强附会.以后有时间自己再详细了解一下编译器的特性... more exceptional c++ 中文版 26页 https ...
对zebra的一点思考Think_Of_ZEBRA
目录对zebra的一点思考(Think Of ZEBRA 对zebra的一点思考(Think Of ZEBRA 此文并不针对zebra的应用,甚至不是一个架构的分析,只是对于Zebra的一点儿思考. ...
有自定义皮肤的计算机,QQ音乐怎么自定义皮肤丨QQ音乐自定义皮肤图解
在使用QQ音乐的时候,突然觉得自己的播放器主页面不是那么精彩怎么办,这时候你可以通过皮肤的更换来解决,那么QQ音乐怎么自定义皮肤,为此电脑系统城为你带来一个详细的QQ音乐自定义皮肤方法介绍,让你可以轻 ...
android+自定义皮肤,android studio自定义更换皮肤详细图文教程
android studio这款app程序开发软件内也内置了多种皮肤主题,程序开发人员如果感觉一种皮肤太过单调乏味,可以选择使用软件内的其他皮肤风格,软件默认的皮肤是IntelliJ,还有黑色的Dra ...
ExtJs皮肤主题定制 sencha Themer
ExtJs皮肤主题定制 sencha Themer 1 介绍在Ext JS中创建自定义主题一直是一项挑战.但是使用Sencha Themer可以大大提高你的开发效率. 2 准备工作确保您拥有Sen ...
python主题更改_jupyter notebook更换皮肤主题的实现
jupyter notebook更换皮肤主题您是否厌倦了jupyter notebook的默认主题呢? 您是否想过能不能让jupyter notebook的界面更加高大上一点呢? 您是否想一天换一个 ...

关于组织自定义皮肤/主题的一点思考

关于组织自定义皮肤/主题的一点思考相关推荐

最新文章

热门文章