---

先看问题

原子化 CSS 样式丢失问题及解决方案

在使用原子化 CSS（如 Less.js、UnoCSS 或 TailwindCSS）时，可能会遇到页面刷新后所有样式类丢失，再加载时体验较差的问题。这是因为样式通过 JavaScript 动态加载渲染，页面初始时 JavaScript 尚未解析完成，导致样式无法获取。

解决方案

通过给 body 元素设置 visibility: hidden;，等到 JavaScript 完成解析后再显示页面内容，可以解决这个问题。

CSS 部分：

body {
    
     
    visibility: hidden; 
}

JavaScript 部分：

<script>
    window.onload = function() {
      
      
        document.body.style.visibility = 'visible';
    };
</script>

引入 JavaScript 文件：

<script src="./js/uno.global.js"></script>
<script src="./js/less.js"></script>

这样，页面在加载完成后才显示内容，避免用户看到样式丢失的过程，提升了用户体验。

---