css 的某些部分在添加 flex 后渲染

Posted 2023-02-22

【中文标题】css 的某些部分在添加 flex 后渲染

【英文标题】：Some parts of css renders later after adding flex

【发布时间】：2021-05-10 15:23:59

【问题描述】：

我正在开发一个博客，我最近添加了一个 div 元素和 display: flex; 以使元素出现在同一行中。

但是，在每次加载页面时进行此更改后，元素会向右移动一点，字体加载有点晚。这种情况只会发生一段时间，在页面加载后它们都会回到预期的位置。

注意：这不会出现在我的本地主机上，而只会出现在生产版本中（或部署时）

请观看下面的视频亲自观看：

https://imgur.com/XY0SHPM

或者如果在桌面上亲自见证：https://lucid-brown-a29dc1.netlify.app/

JSX

<li>
        <Link to=slug key=slug className="link">
            
          <h1 className="title">
            title
          </h1>
          
          <p className="meta">
            <span>
              <FaCalendar size=18 /> prefix
              </span>
            
            <div className="tags">
              tags && tags.map(tag =>
                <Link to=`/tag/$tag.split(" ").join("-").toLowerCase()`>
                  <span key=tag> <FaTag size=18 /> tag </span>
                </Link>
              )
            </div>
          </p>
          
          <p> excerpt</p>
        </Link>
</li>

对应的css：

<style jsx>`
        :global(.link) 
          width: 100%;
          color: $theme.text.color.primary;
        
        li 
          border: 1px solid transparent;
          // border-radius: $theme.size.radius.default;
          margin: $theme.space.l 0 $`calc($theme.space.l * 3)`;
          padding: $theme.space.inset.s;
          position: relative;
          transition: all $theme.time.duration.default;
          background: transparent;
          
          &::after 
            // border-top: 1px solid $theme.line.color;
            content: "";
            height: 0;
            position: absolute;
            bottom: $`calc($theme.space.default * -1.5)`;
            left: 50%;
            transform: translateX(-50%);
            transition: all $theme.time.duration.default;
            width: 50%;
          
          &:first-child 
            margin-top: 10px;   
          
          &:last-child 
            margin-bottom: 10px;
          
        
        .title 
          padding: $theme.space.m $theme.space.s 0;
          line-height: $theme.blog.h1.lineHeight;
          font-size: $theme.blog.h1.size;
          text-remove-gap: both;
          :global(.arrow) 
            display: none;
            position: relative;
            top: 7px;
          
        
        .meta 
          // display: block;
          font-size: 0.8em;
          padding: $theme.space.s $theme.space.s;
          margin: $theme.space.m 0;
          background: transparent;
          .tags 
            display: flex;
            flex-flow: row wrap;
            // flex-shrink: 0;
          
          :global(svg) 
            // fill: $theme.icon.color;
            fill: $theme.text.color.primary;
            opacity: 0.5;
            margin: $theme.space.inline.xs;
            position: relative;
            bottom: -0.4em;
          
          span 
            // align-items: baseline;
            // display: flex;
            text-transform: uppercase;
            margin: $theme.space.xs $theme.space.s $theme.space.xs 0;
            font-size: 0.8em;
          
        
        p 
          line-height: 1.5;
          padding: 0 $theme.space.s;
          text-remove-gap: both;
        
        @from-width tablet 
          li 
            margin: $`calc($theme.space.default * 3)` 0 $theme.space.xl;
            padding: $theme.space.default;
            &::after 
              bottom: $`calc($theme.space.default * -2)`;
            
            &:first-child 
              &::before 
                top: $`calc($theme.space.default * -1.75)`;
              
            
          
          .title 
            font-size: $`calc($theme.blog.h1.size * 1.2)`;
            padding: $`calc($theme.space.default * 1.5) $theme.space.default 0`;
            transition: all 0.5s;
          
          .meta 
            
            padding: $theme.space.default $theme.space.default;
          
          p 
            padding: 0 $theme.space.default;
          
        
        @below desktop 
          li 
            border: 1px solid $theme.line.color;
            box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
            margin-top: 20px;
            margin-bottom: 20px;
            
            &:first-child 
              margin-top: 0;
            
            &::after 
              border-top: 0px;
            
          
        
        @from-width desktop 
          li 
          
            margin: 0 0 0;
            padding: 0 0 $theme.space.l;
            &::after 
              bottom: $`calc($theme.space.default * -1.5)`;
            
            &:first-child 
              &::before 
                top: $`calc($theme.space.default * -2.75)`;
              
            
          
          :global(.blogItemLink:first-child) > li::before 
            top: $`calc($theme.space.default * -2.75)`;
          
          .title 
            font-size: 2.5em;
            padding: $`calc($theme.space.default * 1.2)` $theme.space.l 0;
          
          .meta 
          
              padding: 0 $theme.space.l 0;
          
          p 
            padding: 0 $theme.space.l 0;
          
          li 
            &:hover 
              border: 1px solid $theme.line.color;
              box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
              &:after 
                bottom: $`calc($theme.space.default * -2.5)`;
              
              :global(.gatsby-image-wrapper) 
                transform: scale(1.1);
              
              .title 
                color: $theme.blog.h1.hoverColor;
              
          
            
          
          
        
        @media (hover: hover) 
          .meta 
            :global(a svg) 
              transition: all 0.5s ease-in-out;
              -webkit-transition: all 0.5s ease-in-out;
              -moz-transition: all 0.5s ease-in-out;
            
            :global(a:hover svg) 
              transition: all 0.5s ease-in-out;
              -webkit-transition: all 0.5s ease-in-out;
              -moz-transition: all 0.5s ease-in-out;
              transform: scale(1.3);
              color: $theme.color.brand.primary;
            
          
        
      `</style>

到目前为止我已经尝试过：

将 div 更改为 span 但这会使标签与上面的前缀对齐 删除了flex，但我还能如何将项目连续对齐？ 试图通过删除复杂的计算来提高 css 性能 读到应该使用grid 而不是flex，但看起来grid 不可用（也许需要使用一些css 框架？） 我还观察到字体颜色比页面加载稍晚，所以这可能与 flex 根本无关，我只是在找错树？

我是一个 CSS 新手，所以我可能没有在这里使用最佳实践。在此处粘贴整个 CSS，因为我无法找到问题的原因。是因为 flex box 性能很重吗？我该如何缓解这种情况？

如果有人想阅读整个代码：https://github.com/amita-shukla/blog-1/blob/master/src/components/Blog/Teaser.js

【参考方案1】：

FOUC（Flash OF Unstyled Component）来自多个来源。在您的情况下，我猜想将 CSS 作为 JSX 组件 <style jsx> 加载会阻止样式的呈现，直到它们被浏览器解析。请记住javascript is a render-blocking。此外，您的代码的最终行为应在gatsby build 环境中进行测试。

在浏览器可以呈现页面之前，它必须通过解析 html 标记来构建 DOM 树。在此过程中，每当解析器遇到脚本时，它必须停止并执行它，然后才能继续解析 HTML。

尝试将样式添加为Gatsby docs suggest:

Global CSS Files：网站样式的传统方式。 CSS 规则是全局声明的，样式的应用取决于具体性和继承性。 Modular Stylesheets：CSS 规则是传统编写的，但使用 JavaScript 并在本地范围内使用，以避免在其他地方出现意外的副作用。与 Gatsby 开箱即用。 CSS-in-JS：用 JavaScript 编写和使用的局部范围的 CSS，可以更轻松地使用动态样式和其他功能。需要使用第三方库。

作为初始方法，我建议使用 CSS 文件：

import './styles.css'
// other imports


<li>
        <Link to=slug key=slug className="link">
            
          <h1 className="title">
            title
          </h1>
          
          <p className="meta">
            <span>
              <FaCalendar size=18 /> prefix
              </span>
            
            <div className="tags">
              tags && tags.map(tag =>
                <Link to=`/tag/$tag.split(" ").join("-").toLowerCase()`>
                  <span key=tag> <FaTag size=18 /> tag </span>
                </Link>
              )
            </div>
          </p>
          
          <p> excerpt</p>
        </Link>
</li>

假设 styles.css 与你的 React 组件在同一个文件夹中。在那里，在你的styles.css：

:global(.link) 
  width: 100%;
  color: $theme.text.color.primary;

li 
  border: 1px solid transparent;
  // border-radius: $theme.size.radius.default;
  margin: $theme.space.l 0 $`calc($theme.space.l * 3)`;
  padding: $theme.space.inset.s;
  position: relative;
  transition: all $theme.time.duration.default;
  background: transparent;
  
  &::after 
    // border-top: 1px solid $theme.line.color;
    content: "";
    height: 0;
    position: absolute;
    bottom: $`calc($theme.space.default * -1.5)`;
    left: 50%;
    transform: translateX(-50%);
    transition: all $theme.time.duration.default;
    width: 50%;
  
  &:first-child 
    margin-top: 10px;   
  
  &:last-child 
    margin-bottom: 10px;
  

.title 
  padding: $theme.space.m $theme.space.s 0;
  line-height: $theme.blog.h1.lineHeight;
  font-size: $theme.blog.h1.size;
  text-remove-gap: both;
  :global(.arrow) 
    display: none;
    position: relative;
    top: 7px;
  

.meta 
  // display: block;
  font-size: 0.8em;
  padding: $theme.space.s $theme.space.s;
  margin: $theme.space.m 0;
  background: transparent;
  .tags 
    display: flex;
    flex-flow: row wrap;
    // flex-shrink: 0;
  
  :global(svg) 
    // fill: $theme.icon.color;
    fill: $theme.text.color.primary;
    opacity: 0.5;
    margin: $theme.space.inline.xs;
    position: relative;
    bottom: -0.4em;
  
  span 
    // align-items: baseline;
    // display: flex;
    text-transform: uppercase;
    margin: $theme.space.xs $theme.space.s $theme.space.xs 0;
    font-size: 0.8em;
  

p 
  line-height: 1.5;
  padding: 0 $theme.space.s;
  text-remove-gap: both;

@from-width tablet 
  li 
    margin: $`calc($theme.space.default * 3)` 0 $theme.space.xl;
    padding: $theme.space.default;
    &::after 
      bottom: $`calc($theme.space.default * -2)`;
    
    &:first-child 
      &::before 
        top: $`calc($theme.space.default * -1.75)`;
      
    
  
  .title 
    font-size: $`calc($theme.blog.h1.size * 1.2)`;
    padding: $`calc($theme.space.default * 1.5) $theme.space.default 0`;
    transition: all 0.5s;
  
  .meta 
    
    padding: $theme.space.default $theme.space.default;
  
  p 
    padding: 0 $theme.space.default;
  

@below desktop 
  li 
    border: 1px solid $theme.line.color;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
    margin-top: 20px;
    margin-bottom: 20px;
    
    &:first-child 
      margin-top: 0;
    
    &::after 
      border-top: 0px;
    
  

@from-width desktop 
  li 
  
    margin: 0 0 0;
    padding: 0 0 $theme.space.l;
    &::after 
      bottom: $`calc($theme.space.default * -1.5)`;
    
    &:first-child 
      &::before 
        top: $`calc($theme.space.default * -2.75)`;
      
    
  
  :global(.blogItemLink:first-child) > li::before 
    top: $`calc($theme.space.default * -2.75)`;
  
  .title 
    font-size: 2.5em;
    padding: $`calc($theme.space.default * 1.2)` $theme.space.l 0;
  
  .meta 
  
      padding: 0 $theme.space.l 0;
  
  p 
    padding: 0 $theme.space.l 0;
  
  li 
    &:hover 
      border: 1px solid $theme.line.color;
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
      &:after 
        bottom: $`calc($theme.space.default * -2.5)`;
      
      :global(.gatsby-image-wrapper) 
        transform: scale(1.1);
      
      .title 
        color: $theme.blog.h1.hoverColor;
      
  
    
  
  

@media (hover: hover) 
  .meta 
    :global(a svg) 
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
    
    :global(a:hover svg) 
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      transform: scale(1.3);
      color: $theme.color.brand.primary;
    
  

注意：当然要更改基于 CSS 的变量。或者，使用样式组件。

请记住，如果您想添加 global styles，最简单的本地方法是使用 gatsby-browser.js 文件：

import "./src/styles/global.css"

// or:
// require('./src/styles/global.css')