Артур,
Вот это body main .footer .slide .img-1 .hover-block a h1
с большой долей вероятности заменяется на .slide h1
Препроцессоры не повод городить помойку в CSS.
Объясню: браузер читает селектор справа налево. Т.е. вначале он найдет ВСЕ h1 на странице, затем проверит есть ли у КАЖДОГО из них родитель ссылка, потом лежат ли они в блоке с классом .hover-block и т.д. по всей цепочке. Зачем ему такое развлечение и столько проверок?
tendkuh,
Есть подход программиста, утрированно звучит так: наоборачивать все в несколько слоев оберток для надежности.
Есть подход верстальщика, который помнит о том, что разметка это только структура документа, а не его визуальное представление.
Ну и различные комбо.
Также как с БЭМ. Каждый берет для себя то, что ему или команде удобно.
Мне, например, нравится только именование классов, да и то не по родной методике, а с --.
При этом я спокойно задам блоку display flex и не почувствую угрызений совести.
Но всё же предлагаю свернуть беседу и пойти спать.
Виталий, конечно, субъективным :) Это ш комментарий был.
Каким образом использование блоков, которые появились вместе с самим языком разметки внезапно стали бременем?
Не уверена, что напишу красивый литературный рассказ. Но попробую объяснить:
HTML предназначался для структурной и логической разметки текста. Чтобы программы могли нормально интерпретировать текст и передавать его на устройства вывода. Пи этом разные устройства по разному показывали этот текст, но тем не менее визуально отделяли заголовки от обычного текста в абзацах. Т.е. сначала текст, потом мы его размечаем: это просто текст, это таблица, это список и т.д. Это даже если не брать во внимание современные так называемые HTML5-теги.
И только совсем потом стилизация. И стилизация не является логической или структурной частью текстового документа. Она отдельна. Поэтому, всякие декорашки пишутся в стилях.
(На эту тему полно статей, думаю, вы их читали еще когда начинали изучать HTML)
Да, конечно, мы все (ну или почти все) делаем кучу оберток, которые нам нужны лишь для того, чтобы сделать фон на всю ширину окна, а контентное поле ограниченным. Делать это с помощью псевдоэлементов прямо скажем не с руки. И аналогичные фокусы.
Я (субъективно :) ) стараюсь действительно держать украшалки в стилях, а html-код чистым, там, где это делается абсолютно спокойно, как в ситуации описанной в вопросе.
Еще мне нравятся (пусть не на все 100%, но всё же) код-гайды некоторых вполне объективно уважаемых компаний. Например, Гугла https://google.github.io/styleguide/htmlcssguide.html
В нем даже есть прекрасная фраза о том, что менять HTML-документы и шаблоны всегда дороже, чем обновлять таблицы стилей и скрипты.
BD_ l3ftoverZ!, С отдельным блоком для текстов надежнее, иначе зависимость от размеров картинки и текста. Либо гриды, тогда размеры без разницы.
Отступу всё равно будет весь текст обернут в блок или нет.
Виталий,
Конечно, есть разные задачи и для некоторых из них можно спокойно плевать на быстродействие, валидатор, доступность, ИЕ и еще на что-нибудь. Это верно, сама так делаю.
Было время, когда во всю использовали атрибуты в тегах для различных раскрасок. Но потом вспомнили, что нужно разделять разметку и украшения (стилизацию).
С псевдо для итема https://codepen.io/anon/pen/YbExxe
С псевдо для контента https://codepen.io/anon/pen/zQPoQM
С шириной и flex-параметрами можно играть как душа дизайнера велит.
Первый вариант более удобный для управления шириной текстового блока, поэтому второй, так, ради развлечения и показать ТС, что так можно.
Виталий, DOM узлов меньше, вроде это очевидно.
Это с технической стороны.
Со стороны семантики - точечки это украшение, а никакой не смысловой блок, а значит его не должно быть в разметке.
Тоже самое я могу сказать о вас.
Не можете. Я отвечаю на все заданные мне вопросы. А от вас уже 2 поста только вода.
Виталий, я попросила привести пример усложнений или расширения конструкции, где псевдо помешал бы и его пришлось бы переделывать на div. Любой.
А не пустые слова.
tendkuh, что-то вы заблудились.
Вы сказали, что с псевдо не поработаешь как с дивом. Я ответила, что это касается только js. Для управления из CSS только одно различие между дивом и псевдо, но оно к вопросу не имеет отношения.
Антон Вебсайтовский, Продублируйте, пожалуйста, в следующий ответ, скрин/макет того как вы хотите, чтобы выглядело на разных разрешениях. Я его не вижу.
ince, это статика? Или сервер? Где корень проекта?
Покажите структуру папок.
А самый просто способ: открываете инструменты разработчика, вкладка Console, обновляете страницу и видите где браузер ищет этот файл и сравниваете с тем, где он лежит. После этого переписываете путь или название файла правильно.
Вот это
body main .footer .slide .img-1 .hover-block a h1с большой долей вероятности заменяется на
.slide h1Препроцессоры не повод городить помойку в CSS.
Объясню: браузер читает селектор справа налево. Т.е. вначале он найдет ВСЕ h1 на странице, затем проверит есть ли у КАЖДОГО из них родитель ссылка, потом лежат ли они в блоке с классом .hover-block и т.д. по всей цепочке. Зачем ему такое развлечение и столько проверок?