CSS good/bad практики на английском языке?

Question

[vism]

У заказчика есть верстальщик, который выдаёт очень интересный css код.
Если я ему буду просто говорить делай/ не делай без должной аргументации, будет не корректно.
Посоветуйте ссылки, что ему накидать. Гугл не помог, слишком всё расплывчато там в топе ссылок.

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

Comments

[Василий Банников]

Просто кинь ссылку на какую-нибудь методологию вёрстки, типа БЭМ, atomic-css, итд.

[vism]

Василий Банников, слишком сложно ему, свалит. Хоть чего-то бы добиться от него.

[Василий Банников]

vism, тогда мб попробуй какой-нибудь линтер прикрутить, чтобы перед ручным код-ревью надо было ещё пройти через всякие правила.

Вообще, какой цели нужно достичь? Из-за плохого кода это сложно всем остальным поддерживать? Он сам из-за этого продалбывает сроки?

[vism]

Василий Банников, Когда-нибудь он свалит, и это добро надо будет поддерживать:)
так сказать, соломку хочу постелить заранее:)

[Froggyweb]

vism,ну как бы не все так страшно как ты рисуешь :)
.sidebar__item - тоже не панацея....

[vism]

Froggyweb,
я отвечу цитатой

.widget_edit__preview .mCustomScrollBox > .mCSB_container > .container > .row > [class^="col"] > .card > .card-footer