VisualIdeas

Я вас сейчас удивлю, но все сайты верстаются на HTMLи CSS (браузер отрисовывает все на их основе)!
Javascript это функционал.
Но при этом современный CSS позволяет сделать очень много всего что раньше делалось только на JavaScript.

Или вы про библиотеки, инструменты?
Можно все сверстать в блокноте - но зачем?

appearance: none;

Только префиксы расставить автопрефиксером или ручками тынц

overflow-y: scroll;

если делать
overflow: scroll;
то будет скролл по горизонтали тоже

Делайте работы за дешево и пишите что цена такая потому что для портфолио)
Желающие получить что-то задешего найдутся всегда)

ol 
    & > li 
        & > ul 
            & > li 
                стили

Но вообще это очень плохой стиль написания стилей (сорри за тавтологию)
Читайте про БЭМ

codepen.io/lewisvrobinson/pen/EyZwjR
codepen.io/sevilayha/pen/IdGKH
Чистый CSS3))

.pop_wrap
установите pointer-events:none

body nav a.or {
  color: rebeccapurple;
  flex-grow: 2;
}

Не идеально но так лучше. либо пустой разделитель с flex-grow: 2

www.flexboxpatterns.com
css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstvam-flexbox-iz-css3.html

Из последних bulma.io

ХМ, ваш пример это не совсем шахматный порядок))))
Шахматный порядок это вот так:


И тогда для него паттерн будет:


А для вашего примера паттерн будет такой:


codepen.io/anon/pen/NNGZOW

Коллега, ссылку нормально давайте)) https://habrahabr.ru/post/238449/
А вообще это кусок кода не cSS, а SCSS (я так понял вы про пример jsfiddle.net/serdidg/nfqg9rza/1/)