Требования к верстке

Стили для новых блоков (не предусмотренных в теме дизайна) прописываются в файле user.css (уже создан). А при изменении стиля существующего блока — достаточно скорректировать файлы css/megashop.shop.css или css/megashop.site.css.
Например, если целиком меняется футер, то все стили для него следует прописать в файле user.css. А для изменения размера H1 — подправить существующий файл.

Внутри CSS- и JS-файлов нужно делать отступы между участками стилей, использующихся для разных блоков. А так же добавлять комментарии: для какой части сайта используются те или иные стили или скрипты. Крупными мазками, конечно. Уровня: {* Футер *}, {* Фото в доставке *} и т.п.

Недопустимо использовать «говнокод». Говнокод — это когда нужно было выровнять элемент по границе другого, а его просто сдвинули на условные 74 пикселя (как будто бы выровняли).Говнокод — это явно избыточная вёрстка (например, несколько вложенных тегов ).

Говнокод — это любые костыли и заплатки в вёрстке вместо изящных решений!

Важно! Разработчик понимает и принимает, что сайт должен выглядеть и работать адекватно. Даже если это прямо не сказано в отдельном пункте ТЗ, всё должно аккуратно смотреться и на десктопе, и на моб. устройствах. Ничего не должно съезжать, наезжать, не должны образовываться пустоты и т.д. Проверка — в последних версиях Chrome, Safari, Firefox. Если аккуратно по ТЗ невозможно, то об этом нужно предупредить — перепишем-исправим, доплатим. А не: «вот какое говно заказали, такое мы вам и сделали». :-)

Супер-пупер-мега-архи важно
Пожалуйста, старайтесь по-максимуму сохранить стандартный код темы дизайна. Не стоит просто удалять (или комментировать) существующий код, а вместо него заново писать свой. Подумайте: может быть, можно обойтись корректировкой CSS? Или заменить порядок вывода блоков в шаблоне?

Может, вообще стоит заглянуть в настройки темы дизайна, вместо того, чтобы писать код.

А кроме того, стоит обращать внимание на уже существующие подобные элементы. Скажем, если в фильтре уже есть всплывающие подсказки: с их цветами, шрифтами и тенями, то для других подсказок стоит использовать те же или аналогичные стили. Чтобы всё смотрелось одинаково.

Пример описания в коде

ios = boolean /* характеристика (переменная) и её тип */
  color = #f00 /* цвет контура круга */
  img = url(“ios.svg”) /* url изображения */
  text = “iOS-приложение” /* текст подписи */
  text.mob = “iOS App” /* подпись в моб. версии */
  hint = “Приложение для iPhone” /* всплывающая подсказка */

 

country = text /* характеристика (переменная) и её тип */
  country.text = “usa” /* возможное значение переменной */
  color = rgb(255,0,128) /* цвет контура круга */
  img = url(“country/usa.svg”) /* url изображения */
  text = “Произведено в США” /* текст подписи */
  text.mob = “Сделано в США” /* подпись в моб. версии */
  hint = “Товар произведен в США” /* всплывающая подсказка */

 

country.text = “russia” /* возможное значение переменной */
time = number /* характеристика (переменная) и её тип */
  color = #00f /* цвет контура круга и цвет самого числа */
  text.0 = “Часов работы” /* текст подписи для чисел с «0» и «5-9» в конце + «11-12»*/
  text.1 = “Час работы” /* текст подписи для числа с «1» в конце */
  text.2 = “Часа работы” /* текст подписи для числа с «2-4» в конце */
  text.mob.0 = “Часов работы” /* подпись в моб. версии */
  text.mob.1 = “Час работы” /* подпись в моб. версии */
  text.mob.2 = “Часа работы” /* подпись в моб. версии */
  hint = “Приложение для iPhone” /* всплывающая подсказка */
Last update: 9 сентября 2019
Was this article helpful? Yes No

0 comments


    Add comment

    To add a comment please sign up or login