让css设置的更具有合理性

一、合理性设置宽高

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

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

四、单词、数字换行处理

五、其他编码建议

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

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

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

一、合理性设置宽高

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

css 复制代码

<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>

效果图：

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

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

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

css 复制代码

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

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

css 复制代码

<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>

效果图：

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

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

css 复制代码

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

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

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

css 复制代码

<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宽度的增加还是按钮文字的变更都会影响距离左侧的距离。例如文字变成英文

css 复制代码

    .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>

修改：

方案1：调整 word-break

word-break: break-all;

方案2：调整 overflow-wrap

overflow-wrap: break-word;

五、其他编码建议

例子比较简单些，但确实是在项目中发生过的，当然也和自己写样式的习惯有关，写项目时除了关注实现，更应该考虑扩展。

除了上面几种避免覆盖情况，也应该注意一些编码坏习惯：

避免行内样式： 减少使用行内样式。虽然编写快速，但会影响标签可读性，尤其在多次迭代后。过度使用可能导致代码难以维护。
统一公共样式： 充分利用项目的公共样式库。例如，对于常用的flex布局，优先使用预定义的公共类，而非在业务代码中重复添加。
**滥用浮动布局：**过度依赖float，而不是使用更现代的flexbox或grid布局。
**选择器嵌套过深：**增加特异性，使样式难以重写，同时影响性能。
**过度使用!important：**滥用会破坏CSS的优先级规则，导致样式难以覆盖和维护。
**重复编写相似样式：**未充分利用CSS的继承特性，导致代码冗余。
**未使用CSS预处理器：**对于大型项目，不使用Sass或Less等工具，失去了代码复用和管理的便利。
滥用绝对定位：过度使用position: absolute，可能导致布局在不同屏幕尺寸下出现问题。