archelon

Не всё так радужно, как задумывалось, но смысл в их использовании есть.
От каких то тэгов больше - от каких то меньше.
Но если что-то можно сделать не прилагая почти никаких усилий и получить от этого пользу, то почему этого делать не стоит?

https://habr.com/ru/company/htmlacademy/blog/546500/

Основных поинтов использования семантики 3.
1) Использование подходящих элементов делает их использование удобнее. Несколько раз встречал когда ссылки делали дивами с js поверх. Нет возможности нажать на них колёсиком чтобы открылаьс в новой вкладке или правой кнопкой с соответствующем ссылке контекстным меню. Это отвратительно неудобно.
2) это помощь людям с ограниченными возможностями для понимания контекста происходящего на экране. Наглядный пример это ссылки внутри тэга nav. Можно побаловаться со скрин ридером и будет понятно о чём речь.
Если коротко: ссылки в div будут озвучены как: *ссылка*.
Ссылки в nav: "ссылка, навигация"
https://vc.ru/promo/132280-kak-zvuchat-sayty-nezry...
https://www.youtube.com/watch?v=RQiN1Hhrxu0
3) Помощь поисковым ботам понимать контекст и формировать снипеты в поисковой выдаче. Пример есть в статье выше.
https://siteclinic.ru/blog/technical-aspects/html5...

с какой-либо из «сторон дела»: пользователя, верстки, программирования, поисковых систем?

1) Про пользователей выше
2) Про вёрстку - удобнее читать
3) Про программирование - использование верных тэгов соответствующим образом влияет на работу с этими элементами в JS либо избавляет от необходимости в JS в принципе.
4) Про поисковые системы выше.

По идее диапазоны пишут так, чтобы не было перекрытия, т.е. если брейкпоинт на 768, то выделяем 2 диапазона:
1) 768+
2) 0 - 767

соответственно:

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}

Но тут есть нюанс, мы теряем пиксель между 767 и 768. В текущих реалиях, когда css и device pixels давно не равны, когда кругом все масштабируется ( и соответственно где-то внутри округляется) - все может быть. Поэтому дельту в пиксель уменьшают до 0.02px. Почему именно такая велична, сходу не нагуглю. Возможно , чисто эмпирическим путем выяснили что 0.01 не работает, например ))

похожая тема на стеке

upd:
а, ну вот там и ответ:

// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261

disallow: */?promo=*
но поисковики не обязательно учитывают robots для индексации или неиндексации, особенно гугл.
canonical обязательно - на основную страницу.
а редиректы не надо.
и всё должно быть норм.

Короче, забудь про абсолюты как про страшный сон. Очень редко, только когда другое ну никак нельзя.
Сделать можно разными способами, например на флексах

Можно задвоить картинку, нижнюю при этом размыть с помощью blur, а также поднять ей яркость и контраст, чтобы яркие участки были более выраженными и не теряли своей цветности. Это самый эффективный и простой способ создания таких теней:


Если лень включать VPN для JSFiddle, то результат такой:


Либо можно сделать примерно то же самое, но с абсолютно позиционированными элементами, расположенными под картинкой.

Либо можно геморроится с множественными box-shadow.

https://developer.mozilla.org/en-US/docs/Web/JavaS...

// Demonstrate selected international locales
var locales = [
  undefined,  // Your own browser
  'en-US',    // United States
  'de-DE',    // Germany
  'ru-RU',    // Russia
  'hi-IN',    // India
  'de-CH',    // Switzerland
];
var n = 100000;
var opts = { minimumFractionDigits: 2 };
for (var i = 0; i < locales.length; i++) {
  console.log(locales[i], n.toLocaleString(locales[i], opts));
}

результат

undefined '100 000,00'
en-US 100,000.00
de-DE 100.000,00
ru-RU 100 000,00
hi-IN 1,00,000.00
de-CH 100’000.00

Intl.NumberFormat

const number = 123456.789;

new Intl.NumberFormat('ru-RU').format(number);
// "123 456,789"

по умолчанию { style: 'decimal' }

Но..

new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 6 })
  .format(123456.789012345);
// "123 456,789012" - после запятой не разделяет

Отбросить лишние разряды с нужной точностью:

function truncInteger(number, precision) {
  return number - (number % precision);
}
console.log(truncInteger(1000040, 100));
console.log(truncInteger(1200040, 100));

Математическое округление:

function roundInteger(number, precision) {
  return Math.round(number / precision) * precision;
}
console.log(roundInteger(1000040, 100));
console.log(roundInteger(1200040, 100));
console.log(roundInteger(1000080, 100));
console.log(roundInteger(1200080, 100));

Откройте настройки и введите в поиск Editor: Format On Save
Там либо отключите форматирование при сохранении, либо настройте его, чтобы форматировался не весь файл а только изменённые строки.


Ну либо сделайте рефакторинг проекта отдельным коммитом и договоритесь в команде о соблюдении стиля в дальнейшем.

Вы можете обеспечить единство форматирования в своей команде, создав файл конфигурации Prettier для вашего проекта. После создания такого файла и его добавления в проект вы можете быть уверены, что все члены команды используют одинаковые правила форматирования.

Можно. Но, например, когда проект начнет работать вам понадобится добавить новую фичу, а следовательно у вас появится 2 версии и нужно будет их как-то легко разделять. Пока вы будете делать эту новую фичу, нужно будет сделать еще одну побыстрее, уже 3 версии. Можно наделать отдельные директории и переключаться между ними, использовать внешние утилиты сравнения, а можно использовать git.
Когда через год понадобится разобраться, а зачем так было сделано, можно найти коммит, в рамках которого было внесено изменение и понять зачем. Еще лучше, если коммиты связаны с тасками в системе управления проектом.
Когда наскучит вручную таскать код на сервер. Когда устанешь копировать файлики между версиями для переноса функционала. Когда все сломал, и понимаешь, что легко бы нашел причину, если бы фиксировал предыдущее стабильное состояние. И это только то, что первое приходит в голову.

Вам дизайнер в каждый пункт меню специально положил по прямоугольничку. Который показывает ширину каждой ссылки. И их ширина на удивление одинаковая. И отступы между элементами тоже одинаковые.

А вы его небрежным обзываете. Ну как так?

https://doka.guide/css/combined-selectors/

Вы ведь сами понимаете, что это ваш косяк, а не заказчика? А чего ему за него платить?

Мне прям вспомнилась ситуация, когда я пришёл к стоматологу вылечить кариес (пусть будет 2 000 рублей), мне рассверлили весь зуб и заявляют "батюшки, да тут же пульпит!" (12 000 рублей).
Помогите Маше найти фразу для стоматолога, которая позволила бы сохранить хорошие отношения.

И вот вы сейчас, по прошествии 2 месяцев, оставите заказчика один на один с незавершённым проектом, в котором никто не разберётся (то есть по сути ни с чем) - то вы поступаете как чудак. Я же вижу по тексту, что понимаете.
А сюда вы за индульгенцией пришли? :)

Хотите "сохранить отношения" - доделывайте как есть, в будущем будете мудрее.

Если совсем невмоготу - возвращаете оплату целиком и сильно извиняетесь (можно даже сверху накинуть).
В таком случае о хороших отношениях говорить не приходится, но послевкусие хотя бы как от порядочного человека.

Два совета на будущее:
1) Перезакладывать стоимость и время разработки;
2) Если понимаешь, что всё идёт не по плану/пропал интерес / слишком сложно / некомфортно / whatever - сказать об этом сразу и отказаться от проекта, так всегда получается честнее

Опыт всегда стоит дорого, а 53 000 рублей - ну не самая большая цена его получения :)

Никакого reset.css , максимум normalize и то переделать так, чтобы не повышать специфичность
Ни в коем случае не применять стили ко всем элементам body * , мало того что ко всем элементам, так еще и вложенный селектор повышающий специфичность.
По разметке более-менее, но вот кнопка это ужас какой-то:

<div class="button__wrapper">
                    <div class="button capab__more">
                        <a href="#">
                            <button class="button__btn">All Services</button>
                        </a>
                    </div>
                </div>

Да и вообще вы все теги "a" как-то недооцениваете, в первую очередь надо описывать их, навешивать на них классы и стили, равно как и button, а не делать кнопки из оберток этих тегов, это не тот случай

input__input у вас не вызывает сомнения?, тут было бы более уместно задать например вместо news-signup__form отдельный блок form, а еще лучше subscribe, а там уже и subscribe__input, subscribe__field, subscribe__button да что угодно и будет это красиво и просто.
Тоже самое с соц сетями, это отдельный блок должен быть, можно просто social и микс если надо footer__social
Вообще с футером тоже большие проблемы footer-main / footer-part / footer-part-company / footer-part-links / footer-part-contact это безумие какое-то, вы либо делайте отдельные блоки без привязки к футер, либо делайте их элементами футера