Почему у них в styles.css есть куча описания классов, которых нет в HTML?

Есть несколько подходов к созданию разметки сайта.

1) Взять готовую библиотеку что-то типа bootstrap или w3css, и на основе этого сделать разметку со стилями. Этот подход хорош, когда нужно быстро и относительно качественно. Сам его использую, особенно нравится w3css. В стилевых файлах будет каша того, что никогда не будет использоваться. В этом же подходе можно сгенерировать стили под конкретный класс, выкинув все, что не нужно. Правда смысла в таком подходе не очень много - захотелось использовать элемент, который выкинули из стилей, а его нет.

2) Использовать LESS/SASS/Stylus и набор базовых стилей, например JEET/Skeleton и т.д. Данных фреймворков для css - мириад. Получите достаточно красивый css под конкретную разметку с минимумом лишнего. Достаточно большой порог вхождения, нужно поставить немного инструментария типа node.js 

3) Использовать генерацию CSS/HTML налету на серверной стороне. Это делают почти все языки программирования начиная от clojure и заканчивая ruby. В зависимости от используемого инструмента можно получить как развесистый css на все случаи жизни, так и очень компактный и быстрый.

4) Делать все ручками - но это сейчас совсем не в моде, куча браузеров, куча ограничений у каждого, куча дополнительных свойств. Так что здесь всегда лучше смотреть как минимум на пункты 1) и 2) в первую очередь, и на пункт 3) если разрабатываете не просто разметку и верстку, а что-то большее и интерактивное.