Для стилей используют препроцессоры, например:

• SASS
• LESS
• Stylus
• PostCSS

У каждого из них свой синтаксис и свои преимущества, я использую SASS, мне удобен его синтаксис и я ничего не использовал кроме него, поэтому я буду субъективен.

Расскажу немного про SASS, или же его вторую версию SCSS. Различия между SASS и SCSS это синтаксис, например в SCSS используется закрытие метода.

SCSS:

body {
    margin: 0;
    padding: 0;
    line-height: 0;

    .block {
        width: 50px;
        height: 50px;
        background-color: #000;
    }
}

SASS:

body
    margin: 0
    padding: 0
    line-height: 0

    .block
        width: 50px
        height: 50px
        background-color: #000

После сборки мы получим готовый CSS код:

body {
  margin: 0;
  padding: 0;
  line-height: 0;
}
body .block {
  width: 50px;
  height: 50px;
  background-color: #000;
}

Конечно это только синтаксис, дальше - лучше. Переменные, примеси, модульность, циклы и многое другое.

Расскажу по порядку на примере SASS. (по-моему личному мнению он лучше чем стиль SCSS)

Переменные:

$backgroundColor: #ccc

body
    background-color: $backgroundColor

После сборки:

body
    background-color: #ccc

Примеси:

@mixin reset-list
    margin: 0
    padding: 0
    list-style: none

 nav ul
    @include reset-list

После сборки:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

Модульность:

Файл header.sass

.header
  width: 100%
  height: 60px
  position: sticky
  top: 0

Файл footer.sass

.footer
    width: 100%
    height: 300px
    background-color: #c0c0c0

Файл main.sass

body
    margin: 0
    padding: 0

    @import './header.sass'
    @import './footer.sass'

Таким образом можно разделить проект на небольшие части, чтобы удобнее было работать, и с ними работать, а в конце получать готовый CSS код который будет включать в себя такие модули.

Циклы:

@for $i from 1 through 12
  .col-#{$i}
    width: 100 / 12 * $i

После сборки:

.col-1 { width: 8.3333333333; }
.col-2 { width: 16.6666666667; }
.col-3 { width: 25; }
.col-4 { width: 33.3333333333; }
.col-5 { width: 41.6666666667; }
.col-6 { width: 50; }
.col-7 { width: 58.3333333333; }
.col-8 { width: 66.6666666667; }
.col-9 { width: 75; }
.col-10 { width: 83.3333333333; }
.col-11 { width: 91.6666666667; }
.col-12 { width: 100; }

Это лишь малая часть для того, чтобы заинтересовать вас использовать препроцессоры, но дальше изучайте документацию по ссылке.

В качестве сборки используются такие сборщики как: gulp, webpack. Готовый boilerplate (шаблон) можно скачать с любого github репозитория. Вам так же понадобится NodeJS.

В итоге проект на 20 тысяч строк, может быть разбит на маленькие части и каждый файл может не занимать и больше 100 строк, нужно лишь правильно организовать проект.