copy form
吐槽大会，对号入座，看看说的是不是自己

1. class 命名规则混乱

1.1 重复、近义命名

在同一个文件中，混用含义相近或重复的名称来设置 class ，将维护难度大大提升。我遇到的情况是，每一个分类下的 class 名称都同时存在于同一个文件中。

  1. /* 容器 */
  2. .box
  3. .container
  4. .wrapper
  5. .outside
  7. /* 列表 */
  8. .list
  9. .lists
  10. .list-container
  12. .list
  13. .li
  14. .item
  15. .list-item
  16. .list-child
  18. /* 文字 */
  19. .txt
  20. .text
  21. .texts
  22. .label
  23. .msg
  24. .message 
  26. /* 按钮 */
  27. .btn
  28. .Btn
  29. .button
  30. .Button

1.2 拼写错误、拼音命名

考虑到拼写问题，原来上面存在的 .massage 拼写错误归类到下面了

  1. /* 拼写错误 */ 
  2. .massage
  3. .slogen
  4. .penel
  5. .mian
  7. /* 拼音命名 */
  8. .lunbotu
  9. .kapian
  10. .guanyu

1.3大小驼峰、下划线、连接线混用

在同一个项目中的 class 命名，大小驼峰、下划线、双下划线、连接线等不同的命名风格混搭，让 css 的可阅读性非常低。

  1. .PageCard-container
  2. .pageCard__Header__text-active
  3. .carousel__slider--img
  4. .carousel_pagination__full-width
  5. .carousel-navigation--bottom_active
  6. .carousel-slider-TEXT

自己也常犯这样的错误
image.png

1.4 过分强调语义和不合理的 HTML 标签嵌套导致的 class 命名冗余

  1. .index-card
  2. .index-card-header
  3. .index-card-header-title
  4. .index-card-header-title-text-left
  5. .index-card-header-title-text-right-gray
  6. .index-card-header-title-text-right-active

1.5 曲解滥用 BEM

没错，真的会有很多人初次接触过 BEM 之后，曲解 BEM 的含义，以为要将所有单个的单词替换成 BEM 的命名方式，我自己也做过类似的事情。

  1. /* 修改前 */
  2. .card-header-title
  3. .card-header-subTitle
  6. /* 修改后 */
  7. .cardHeader-cardHeaderTitle
  8. .cardHeader-cardHeaderSubTitle
  10. .card-header__card-header-title
  11. .card-header__card-header-sub-title
  13. .card-header--card-header-title
  14. .card-header--card-header-sub-title

2. css 编写的逻辑问题

2.1 实现效果的逻辑存在问题

以常见的元素在容器内居中为例子，常见的非正常逻辑写法如下面所示。这些写法在某些理想情况下确实可以实现让元素居中，但实际上这样的代码非常难以维护。一旦容器或者内部元素的宽高发生变化，相应的属性值就需要重写。

  1. /* 容器 */
  2. .container {
  3.     position: relative;
  4.     width: 100px;
  5.     height: 100px;
  6. }
  8. /* 居中元素不推荐的写法1 */
  9. .center{
  10.     height: 80px;
  11.     width: 80px;
  12.     position: absolute;
  13.     top: 50%;
  14.     left: 50%;
  15.     margin-left: -40px;
  16.     margin-top: -40px;
  17. }
  19. /* 不推荐的写法2：自己算出大概需要移动的 top 和 padding 值 */
  20. .center {
  21.     height: 80px;
  22.     width: 80px;
  23.     position: absolute;
  24.     top: 10%;
  25.     left: 10%;
  26. }
  29. /* 更加奇怪的写法1：
  30.  * 手动算出容器 padding 值，以此实现居中
  31.  * 注：这里的情况属于 box-sizing: border-box;
  32.  */
  33. .container{
  34.     padding : 10px;
  35. }
  38. /* 更加奇怪的写法2：
  39.  * 手动算出元素的 margin 值，以此实现居中 
  40.  * 注：这里的情况属于 box-sizing: content-box;
  41.  */
  42. .center{
  43.     margin : 10px;
  44. }

其他的一些常见情况，其他答主都有提及，在此就不赘述了。

2.2 用内部元素的 margin 去控制容器内元素的间距

2.3 随意设置 z-index 的值

语雀内容

2.4 模仿别人的样式时，不思考 css 样式的实现原理

而是直接在开发者控制台 copy 人家的样式（甚至包括 class 命名）

2.5 滥用通配符等来设置样式、覆盖样式

3. 编码习惯问题

3.1 无意义、无语义命名

比如各种 my - 开头的 class 命名，以及用 html 标签本身的名称来做 class 的命名

  1. .text1{
  2.     color:#fff;
  3. }
  5. .text2{
  6.     color:#000;
  7. }
  9. .div{
  10.     width:100%;
  11. }
  13. .h2{
  14.     font-weight:800;
  15. }
  16. .myClass{
  17.     width:100%;
  18. }
  19. .myCard{
  20.     border:5px;
  21. }

3.2 css 属性顺序随便乱放

  1. .example{
  2.     width: 100px;
  3.     color: #ffffff;
  4.     position: relative;
  5.     margin: 10px;
  6.     font-size: 20px;
  7.     height: 150px;
  8.     padding: 5px;
  9.     font-weight: 800;
  10.     background-color: #1f1f1f;
  11. }

这样也最容易直接导致的问题就是：css 属性重复且被覆盖。若样式行数较多，则被覆盖后不容易被发现。

  1. .example{
  2.     margin: 0;
  3.     position: relative;
  4.     width: 100px;
  5.     height: 100px;
  6.     background-color: #fff;
  7.     padding: 10px;
  8.     margin: 50px auto;
  9. }

3.3 滥用! important

包括但不仅限于，用! important 覆盖默认样式、覆盖第三方 ui 样式等。

  • 内联、css 大量混用导致维护较难
  • 大量使用 id

4. 使用 css 预处理器时

4.1 嵌套层级过深，滥用选择器进行嵌套

  1. .container{
  2.     .card{
  3.         .card-header{
  4.             .card-header-title{
  5.                 color:#fff;
  6.             }
  7.         }
  8.         .card-body{
  9.             height:300px;
  10.             width:100%;
  11.         }
  12.     }
  13. }
  15. .container{
  16.     * {
  17.         color:#fff;
  18.     }
  19. }
  21. .container{
  22.     ol{
  23.         list-style:none;
  24.         li{
  25.             margin:0;
  26.         }
  27.     }
  28. }

4.2 在预处理器源文件中，重复 copy 样式代码，不写公共 class，不做合并

  1. .card-main{
  2.     color: #222;
  3.     background-color: #999;
  4.     border-radius: 5px;
  5.     padding: 10px;
  6. }
  8. .card-result{
  9.     color: #222;
  10.     background-color: #999;
  11.     border-radius: 5px;
  12.     padding: 10px;
  13. }
  15. .card-order{
  16.     color: #222;
  17.     background-color: #999;
  18.     border-radius: 5px;
  19.     padding: 10px;
  20. }

4.3 因使用 & 嵌套过深导致可读性较差或造成混乱

  1. .container{
  2.     &-header{
  3.         color:#fff;
  4.         &:hover{
  5.             .text{
  6.                 &:after{
  7.                     content:'';
  8.                     width: 100%;
  9.                     height: 1px;
  10.                 }
  11.             }
  12.         }
  14.     }
  15. }

5. css 与 js 一起使用时

  • 写静态样式时，css 与 css-in-js 、内联样式等混用
    以 React 为例：
  1. /* react 组件 ,Example.js  */
  2. const Example(){
  3.     return (
  4.         <div 
  5.             className="demo"
  6.             style={{
  7.                 color:'#fff',
  8.                 fontSize:'20px'
  9.             }}
  10.         >...
  11.         </div>
  12.     )
  13. }

自己写的 css 就起不到作用了

  1. /* 引入的css样式 style.css */
  2. .demo{
  3.     color: #000;
  4.     font-size: 15px;
  5. }