Спецификации пока не в Candidate Recommendation, что-то еще может поменяться, как, например, это недавно случилось с синтаксисом градиентов — оттого и наличие вендорных префиксов.
И да, позвольте сделать мне пару замечаний — всё же первое, что вы должны написать при создании нового документа — это доктайп. Хоть в данном случае это ни на что не влияет, тем не менее ) И почему вы реализовали положение элемента сердца на странице путем добавления тегов <br> и <center>, а не путем добавления обычного margin?
У меня почему-то по ссылке на пример открывается пустая страница. Точнее, страница-то на месте, только вот сердца никакого нет. Появляются только некоторые элементы при уменьшении высоты вьюпорта. Такой предмет женского туалета — максимально приближенное к тому, что должно было бы отобразиться )
Вопрос автору — исходя из чего вы сделали вывод, что дивная вёрстка, без использования header и footer, считается несемантичной? Насколько более семантичным, по вашему мнению, является употребление тегов header и footer, нежели использование дивов с классами .header и .footer? Да и чем вообще является семантика — в вашем понимании?
Не все сайты переделываются, но, тем не менее, браузер должен понять и правильно обработать любую запись кода. Выше в ветке вам привели пример кода с главной Гугла.
Раньше так и верстали — не особо задумываясь о кавычках и прочем. Помню, когда начинал учить HTML году этак в 2002-м, в книге, которую тогда читал, так всё и обстояло. И чтобы обеспечить максимальную обратную совместимость кода — в том числе и с таким, доктайп html5 разрешает запись атрибутов любым способом.
И всё же, .color_blue — плохое название. Название класса для элемента в первую очередь должно служить пояснением, для чего этот элемент вообще нужен на странице и что он из себя представляет.
Возьмем даже ваш пример — берем основным классом для всех этих кнопок класс .header__button, для трёх различных размеров — добавляем классы .header__button_small, .header__button_normal, .header__button_large, .header__button_blue, .header__button_red, .header__button_green, .header__button_yellow. Всё сразу становится понятным, даже для человека, который первый раз видит ваш код.
Я могу ошибаться, но судя по тому, какой код и какие селекторы у вас представлен в примерах, вы не очень заботитесь об оптимизации. Здесь не особо важно уже, как именно вы пишете код — на CSS или на LESS/SASS. Важно то, что очень часто люди, использующие LESS/SASS, пишут тяжелые селекторы, используют каскадность там, где без неё прекрасно можно обойтись, — в угоду лаконичности кода, причем лаконичности только в исходном LESS/SASS файле — а это уже плохо.
Наблюдаю такое в Chrome, в лисе всё хорошо.
Возьмем даже ваш пример — берем основным классом для всех этих кнопок класс .header__button, для трёх различных размеров — добавляем классы .header__button_small, .header__button_normal, .header__button_large, .header__button_blue, .header__button_red, .header__button_green, .header__button_yellow. Всё сразу становится понятным, даже для человека, который первый раз видит ваш код.