在参观了 xLog 里的其他博客后，发现了许多自定义的 CSS 效果。今天来给大家分享一下我博客的样式优化。
遇到的问题#
博客页面无法加速，需要加载的资源太多了1，而且无法使用 CloudFlare 等 CDN 缓存服务2。
既然这样，全站只能优化用户的视觉效果了，在测试网站打开速度之后，发现首页会有 3~5 秒的白屏时间，那么这一段时间能否利用起来呢？在测试站点上测试了一小会后发现 ——并不能，因为不支持自定义 JavaScript。
解决方案#
下面我来说一下我的优化方案，仅供参考。
使用远程资源#
每次更新自定义 CSS，都会在链上留下一条标记，因此我采用了@import url(...)的方式，较完美的解决了自定义 CSS 需要刷新两下3才能更新的问题，并且更方便调试了。
使用层叠样式表的伪元素#
WARN: 不建议学习
编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的 —— 设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
CSS 布局主要是基于盒子模型。
—— 源站点
-
::after
伪元素 ::after 能够在指定元素的后面插入一些内容，在::after中需要使用content属性来定义要追加的内容，而且在::after中必须定义 content 属性才会生效4。 -
::before
伪元素::before能够在指定元素的前面插入一些内容。与::after相似，::before中也需要使用content属性来定义要追加的内容，而且在::before中必须定义content属性才会生效4。 -
::first-letter -
::first-line -
::selection -
::placeholder
之所以只讲前两个，是因为我们只用到它们，下面是一个示例代码，将 “赞助” 按钮后面添加一个字 “我”：
/* 由于 xLog 可能会更新样式，您需要自行复制选择器 */
body > div.xlog-page.xlog-page-index.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.flex.py-12.w-full > div > div > div.flex.space-x-0.sm\:space-x-5.space-y-2.sm\:space-y-0.flex-col.sm\:flex-row.text-sm.sm\:text-base > span.xlog-site-patron > button > span > span::after {
content: "我";
color: grey;
}
body > div.xlog-page.xlog-page-post.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.flex.py-12.w-full > div > div > div.flex.space-x-0.sm\:space-x-5.space-y-2.sm\:space-y-0.flex-col.sm\:flex-row.text-sm.sm\:text-base > span.xlog-site-patron > button > span > span::after {
content: "我";
color: grey;
}
/**
* 复制元素选择器的方法
* 1. 打开 Chrome 控制台
* 2. 导航到“元素”Tab 页面
* 3. 右键单击某个元素 -> 复制 -> 复制选择器
* 下方是图片演示
*/
| 演示 (Mac English) | 演示 (Windows Chinese) |
|---|---|
实例：去除首页的小铃铛#
使用 CSS 的 display:none 即可，后来发现小铃铛的位置会变，因此采用列举法5把所有可能的元素全部 display:none 了。
代码如下：
/* https://github.com/xiaozhu2007/cdn/blob/60b809e092fc2dac569bf5c6527d900168f3a36d/xLog/main.css#L92-L97 */
body > div.xlog-page.xlog-page-index.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.text-gray-500.flex.items-center.justify-between.w-full.mt-auto > div.xlog-site-connect.pl-1 > div > div > svg {
display: none;
}
body > div.xlog-page.xlog-page-post.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.text-gray-500.flex.items-center.justify-between.w-full.mt-auto > div.xlog-site-connect.pl-1 > div > div > svg {
display: none;
}
总结#
这篇文章详细介绍了如何优化博客的样式。作者首先提到了博客页面无法加速，需要加载的资源太多了，而且无法使用 CloudFlare 等 CDN 缓存服务。然后，作者提出了使用远程资源和使用层叠样式表的伪元素来优化博客的样式。最后，作者总结了这些优化方法的效果。
这篇文章对博客作者来说很有帮助。博客作者可以通过这些优化方法来提高博客的加载速度，改善用户的体验。
我希望这篇博客文章对你有所帮助。