CSS good/bad practices in English?

Question

css

The customer has a coder who produces a very interesting css code.
If I just tell him do / do not do it without proper argumentation, it will not be correct.
Advise links what to throw to him. Google did not help, everything is too vague there in the top links.

.sidebar > .container {
    padding: 0;
  }

  .site-ratings-breakdown-item .progress {
    height: 7px;
    width: calc(100% - 115px);
    margin-left: 15px;
    margin-right: 20px;
  }

  .widget_edit__preview {
    width: calc(100% - 300px) !important;
  }

  /* 30 June 2021 */
  /*
    - changes on widget preview area: added white background and left border on div.widget_edit__preview; removed padding and border on .card and .card-body
  */
  .widget_edit__preview {
    background-color: #fff;
    border-left: 1px solid var(--card-border-color);
  }

  .widget_edit__preview > .container > .row > [class^="col"] > .card,
  .widget_edit__preview .mCustomScrollBox > .mCSB_container > .container > .row > [class^="col"] > .card {
    border-width: 0;
    border-radius: 0;
  }

  .widget_edit__preview > .container > .row > [class^="col"] > .card > .card-header,
  .widget_edit__preview > .container > .row > [class^="col"] > .card > .card-body,
  .widget_edit__preview > .container > .row > [class^="col"] > .card > .card-footer,
  .widget_edit__preview .mCustomScrollBox > .mCSB_container > .container > .row > [class^="col"] > .card > .card-header,
  .widget_edit__preview .mCustomScrollBox > .mCSB_container > .container > .row > [class^="col"] > .card > .card-body,
  .widget_edit__preview .mCustomScrollBox > .mCSB_container > .container > .row > [class^="col"] > .card > .card-footer {
    padding: 0;
  }

  /* 1 July 2021 */
  /*
      - vertical scrolls
    */
  .widget-page-title.editable-text {
    font-size: 19px;
  }

  .widget_edit__preview {
    padding-right: 0;
  }

  .has-sidebar-left .sidebar-left + main > .mCustomScrollBox > .mCSB_container > .container {
    padding: 0 25px 0 15px;
  }

  .widget_edit__preview.rocketScroll > .scrollDiv > .scrollContent {
    padding: 0 20px 0 0;
  }

  .page-widget-editor .main-wrapper {
    min-height: auto;
    height: calc(100vh - 74px);
  }

  .aside-widget-editor .tab-content {
    height: calc(100% - 38px)
  }

  .aside-widget-editor .tab-content > .tab-pane {
    height: 100%;
  }

  .aside-widget-editor .tab-content > .tab-pane .mCSB_scrollTools {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .aside-widget-editor .tab-content > .tab-pane > .mCSB_inside > .mCSB_container {
    margin-right: 5px;
  }

  .scroll-settings-tab-pane {
    height: 100%;
  }

  .scroll-settings-tab-pane .scrollContent {
    padding-right: 18px !important;
  }

  .widget_edit__preview > .mCSB_inside > .mCSB_container {
    margin-right: 10px;
  }