从我刚开始接触前端时写的 css，和从事前端以来接触过的实习生 or 新人写的 css 抽了一部分代码来举例子。

    1. class 命名规则混乱

    • 重复、近义命名
      在同一个文件中，混用含义相近或重复的名称来设置 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
    • 拼写错误、拼音命名

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

    1. /* 拼写错误 */ 
    2. .massage
    3. .slogen
    4. .penel
    5. .mian
    7. /* 拼音命名 */
    8. .lunbotu
    9. .kapian
    10. .guanyu
    • 大小驼峰、下划线、连接线混用
      在同一个项目中的 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
    • 过分强调语义和不合理的 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
    • 曲解滥用 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 编写的逻辑问题

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

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

    • 用内部元素的 margin 去控制容器内元素的间距
    • 随意设置 z-index 的值
    • 模仿别人的样式时，不思考 css 样式的实现原理，而是直接在开发者控制台 copy 人家的样式（甚至包括 class 命名）
    • 滥用通配符等来设置样式、覆盖样式

    3. 编码习惯问题

    • 无意义、无语义命名

    比如各种 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. }
    • 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. }
    • 滥用! important

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

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

    4. 使用 css 预处理器时

    • 嵌套层级过深，滥用选择器进行嵌套
    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. }
    • 在预处理器源文件中，重复 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. }
    • 因使用 & 嵌套过深导致可读性较差或造成混乱
    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. }

    最后，知乎上已经给出一些关于 css 规范的回答了。关于这一块可以参考：

    如何规范 CSS 的命名和书写？www.zhihu.com一个没有经验的前端工程师，写CSS的时候有什么常见通病？ - 知乎 - 图1

    https://www.zhihu.com/question/322443498/answer/1608869388?utm_source=ZHShareTargetIDMore&utm_medium=social&utm_oi=53706733125632