让css设置的更具有合理性

news2025/1/7 13:29:35

一、合理性设置宽高

二、避免重叠情况，不要只设置最大宽

三、优先使用弹性布局特性

四、单词、数字换行处理

五、其他编码建议

平常写css时，除了遵循一些顺序、简化、命名上的规范，让css具有合理性也是重要的一环。

最近的需求场景：国际化翻译，从中文转换英文的转换结果，大部分的长度也会增加1.5～3倍，复杂的单词可能会增加的更多，也就导致了出现换行、文字覆盖/溢出的场景。

出现的这些问题只是内容的长度增加了,其实在书写样式时都可以避免大部分情况。

一、合理性设置宽高

场景1：宽、高并非都需要设置成固定值

<style>
   .tag {
        padding: 2px 3px;
        width: 136px;
        height: 28px;
        color: #000;
        box-sizing: border-box;
        border-radius: 6px;
        background: orange;
    }
</style>
<body>
    <div class="tag">目前没有可用数据</div>
</body>

效果图：

这可能是我们从设计平台中直接复制过来的代码，看起来平平无奇，事实上不更改内容确实没什么问题，但是某个需求上的一次文字变更都会导致样式适配的不完美。

改进建议：若非绝对场景，宽高是没必要进行添加的，而是否换行可以根据实际场景设置。

推荐做法：宽度设置为自身可以空间 + 设置最大宽度，好处：文字少的时候不会空出剩余的空间，超出最大宽文字才会换行。若不想换行，可直接去掉最大宽。

 .tag {
        max-width: 160px;
        width: fit-content;
    }

二、避免重叠情况，不要只设置最大宽

<style>
    .box {
        display: flex;
        width: 300px;
        padding: 10px;
        border: 2px dashed #000;
        border-radius: 10px;
    }

    .label {
        max-width: 80px;
    }

    .value {
        width: 220px;
        background: orange;
    }

</style>
<body>
    <div class="box">
        <div class="label">身份信息：</div>
        <div class="value">是一名特务，爱吃小熊饼干</div>
    </div>
</body>

效果图：

由于左侧只设置成了最大宽，当内容发送变化的时候限制了宽度，换成英文字符长度增加后后会出现重叠情况

推荐做法：给宽和不给宽可以参考实际场景，注意不要只设置最大宽！

    .label {
-      //  max-width: 80px;
+        width: fit-content; 
         word-break: break-all;
    }

三、优先使用弹性布局特性

场景1: 弹性对其方式替掉边距

<style>
    .box {
        display: flex;
        width: 300px;
        padding: 10px;
        border: 2px dashed #000;
        border-radius: 10px;
    }

    .btn {
        padding: 2px 4px;
        background: orange;
        border-radius: 3px;
    }

    .btn1 {
        margin-left: 210px;
    }
    
    .btn2 {
        margin-left: 10px;
    }
</style>
<body>
    <div class="box">
        <div class="btn btn1">取消</div>
        <div class="btn btn2">确定</div>
    </div>
</body>

效果图：

这个出现的问题就比较明显了，不管是box宽度的增加还是按钮文字的变更都会影响距离左侧的距离。例如文字变成英文

    .box {
         display: flex;
+        justify-content: flex-end;
    }

    .btn1 {
-        /* margin-left: 210px; */
    }

场景2: 沾满剩余空间

<style>
    .box {
        display: flex;
        width: 390px;
    }

    .label {
        width: fit-content;
        word-break: break-all;
    }

    .value {
        padding: 0 4px;
        width: 220px;
        box-sizing: border-box;
        background: orange;
    }
</style>

<div class="box">
    <div class="label">Identity information：</div>
    <div class="value">He is a spy who loves to eat teddy bear cookies</div>
</div>

由于右侧把宽度写死，当盒子宽度发生变化时，会导致右侧存在空白。

推荐做法：为了避免整体盒子的调整，对于label-value类似场景，可以使用flex:1让value沾满剩余空间

    .box {
        display: flex;
        width: 390px;
    }
		.value { 
+    	 flex:1;
       ...
		}

四、单词、数字换行处理

在中文字符下大多数浏览器会默认允许在字符间换行，而英文单词和数字通常不会在内部断开换行。一般在弹窗场景出现问题居多。

  <style>
    .box {
      width: 300px;
      padding: 10px;
      border: 2px dashed #000;
      border-radius: 10px;
    }

    .value {
      padding: 0 4px;
      box-sizing: border-box;
      background: orange;
    }
  </style>

  <div class="box">
    <div class="value">
      This is a long and Honorificabilitudinitatibus
      califragilisticexpialidocious
      Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
      グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
      123123115615615616156156161616165165161615
    </div>
  </div>