Как написать поддерживаемый HTML и CSS код?
Используйте LESS! Ну или там SASS/SCSS по желанию. + Сборщик проекта Grunt.
Это позволит вам разбить CSS код на неограниченное количество файлов и папок. А дальше Grunt все это обработает, собрав все это хозяйство в один файл, скажем style.css.
Чем удобен такой подход? У вас в директории проекта будет папочка ксс, внутри неё будут другие папочки или файлы, например defaults, header, footer, news и т.п. до бесконечности. В каждом из этих файлов будет только тот кусок кода, который отвечает за нужный вам блок. Проект в таком виде очень(!) удобно поддерживать и вносить правки. Кроме того удобно в этих же папочках рядом с нужным файлом стиля держать еще и нужные картинки. Скажем в папке header, лежат файлы: header.less, bg.png, logo.png и т.д. Очень удобно.
Далее, как это все работает:
LESS: www.lesscss.ru
Grunt: gruntjs.com + туториал: nano.sapegin.ru/all/grunt-0-4
Пользуйтесь!
Нужно гибко подходить к каждому проекту и исходить из его специфики. Если не пользоваться готовыми методологиями, то я обычно просматриваю прототипы и дизайн проекта и делю на смысловые блоки, они становятся фундаментом для систематизации CSS, это решает проблемы "пересечения свойств" и дает возможность разбить css используя определенную логику.