Как повысить скорость верстки?

Иван Еремеев
  · 5,6 K

Занимаюсь версткой сайтов больше года. Но никак не могу достичь желаемой скорости. Один экран лэндинга могу 3 часа делать. Препроцессоры, шаблонизаторы использую, но это не помогает. Хотелось бы услышать ваши реальные истории, как вы развивались в этом направлении. И как удалось повысить скорость верстки.

Илья Трушков
Эксперт
319
Web-разработчик, репетитор по информатике  · repetitor-informatika.ru

Доброго времени суток.

Для начала, хочу уточнить, что бывают такие насыщенные лендинги, что и 3 часа делать один экран - норма :) То есть понятие скорости достаточно субъективно.

И все же, что помогло конкретно мне ускорить процесс:

  1. Я слез с sublime и перешел на visual studio code и поставил плагин emmet. VSC - потому что когда не тормозит редактор, не тормозит и верстка. Emmet - потому что создание шаблонной страницы в 2 строчки

!

.wrapper>(h$[title=item$]{Header $}+p*3>lorem5^(ul#list$>.cool-list*3))*3

это прекрасно. Не стоит конечно заучивать все возможные комбинации, но .>^$+*# - значительно упрощают жизнь.

Хорошая шпаргалка по эммету есть тут: https://dwstroy.ru/stail/raznoe/emmet-shpargalka/

  1. Перестал преследовать постраничную css-разбивку типа '.page1 .btn' '.page2 .btn', т.е. в scss код выглядел так:

common.scss :

.btn {

cтили для любой кнопки

}

page1.scss :

.page1 {

шрифты и прочие общие для страницы свойства

&.btn {

свойства кнопки для этой страницы, иногда переопределяющие изначальные стили

так что приходилось либо строго следить за подключением файлов, либо использовать !important, что вообще атата

}}

Cтал любой проект, даже лендинги, разбивать на модули. В итоге на scss у меня код выглядит иногда так:

common.scss :

.btn {

cтили для любой кнопки

&.m--page1 {

что добавить\переопределить для страницы1 // переопределять плохо, по-хорошему здесь только добавление

}}

page1.scss :

.page {

шрифты и прочие общие для страницы свойства

}

.m--page1 {} // фейковый класс для реализации модульности

Преимущество видно не сразу, особенно учитывая, что в html теперь вместо

<div class="page1">

<div class="btn">

</div></div>

приходится писать

<div class="page1">

<div class="btn m--page1">

</div></div>

Но со временем привыкаешь просто ко всем модульным элементам (кнопкам, инпутам, селектам и т.д.) дописывать модульный класс и все становится на свои места. Суть этих модулей в переиспользовании кода как внутри одного проекта, так и между проектами, достаточно лишь изменить\удалить классы m--**.

  1. Выбрал для себя идеологию названий классов и строго придерживаюсь ее на всех своих проектах. БЭМ в его первоначальном виде мне не подошел, т.к. просто лапша из кода получалась, но во многом основываюсь на нем.

  2. Из автоматизаторов использую только gulp для написания scss вместо прямого css. Этот пункт к тому, что, возможно, Вы используете наоборот слишком много инструментов в работе и в итоге их настройка под каждый проект не окупает трудозатраты на эту самую настройку.

  3. Перестал браться за проект, если заказчик просит резину и pixel perfect в одном. Поначалу пробовал объяснять, что это несовместимые понятия, потом забил и жизнь стала намного проще. Потихоньку замечаю тенденцию вымирания pixel perfect-проектов на рынке (да зравствует flex и, возможно, grid).

  4. Больше всего времени у меня уходило на починку "внезапно полетевшей" верстки, так что...хабр, stackoverflow, toster, csstricks, пара своих тестовых проектов с самыми странными видами, но полностью покрывающие редко используемые свойства - наше все. Пункт скорее для тех, кому, как и мне, верстка нужна как неизбежное зло в работе front-end'ера, но может и Вам он будет полезен.

P.S. Все пункты по сути субъективны и помогли конкретно мне. Плюс возможно они противоречат Вашему восприятию мира, предпочтениям и т.д., так что сами попробуете и решите, что работает, а что нет.

2 эксперта подтверждают
Зачем вообще на страницы разбивать? Файлы стилей для отдельных страниц только в крайнем случае создаются. Для... Читать дальше
Комментировать ответ…
Ещё 4 ответа
Курсы веб. Обучение веб программированию, курсы html css с нуля, бесплатные лекции...  · creativcode.ru
Отвечает
Алексей Б

Для ускорения верски служат различные библиотеки, одна из наиболее популярных это bootstrap.
В любом случае очень полезен LESS - легок в использовании, позволяет разбить файлы верстки на модули, повторно использовать различные константы, например цвета, тени и т.д.

30 января  · < 100
Комментировать ответ…
Разработка корпоративных сайтов и интернет-магазинов с 2013 года. Большой опыт в сфере...  · pavelorekhov.ru
Отвечает
Павел Орехов
Скорость приходит с опытом, рекомендую выбрать один из популярных фреймворков например bootstrap изучить его полностью, перед началом верстки делать его настройку и выбирать только необходимые компоненты под проект чтобы не перегружать его большими файлами это можно сделать тут: http://bootstrap-3.ru/customize.php Создавать собственный архив с... Читать далее
25 августа  · < 100
Комментировать ответ…
SEO продвижение сайта в ТОП выдачи Google и Яндекс
Отвечает
Александр Л.
Верстка "пиксель перфект" требует много времени и может быть 3 часа - это хороее время, особенно если вы сразу под все разрешения делает за эти 3 часа. Но если хочется быстрее, то попробуйте верстать прямо в браузере Google Chrome с открытыми Инструментами разработчика (Открываются по кнопке F12). Это полноценная среда для разработки html/css/js с... Читать далее
Комментировать ответ…
Имею естественно научное образование, в юношестве прикипел к литературе, сейчас...
В вашем случае больше практиковаться советовать не имеет большого смысла, думаю, можно попробовать изменить подход к работе, попробуйте составлять планы на каждый проект, те вы рисуйте схему сайта на бумаге, продумывайте интерактивные элементы, а к ним уже JS код, так же набрасывайте разметку стилей, после чего для каждого этапа разработки... Читать далее
Комментировать ответ…
Вы знаете ответ на этот вопрос?
Поделитесь своим опытом и знаниями
Войти и ответить на вопрос
Читайте также

Как повысить скорость интернета на Windows 10?

Меломан, киноман, самоучка - программист, любитель расширять свой кругозор.

С настройками по умолчанию в «десятке» максимальная скорость интернет-канала уменьшена на 20% (скорее всего, они используются для получения обновлений и передачи конфиденциальной информации Microsoft). Изменить ситуацию поможет редактирование соответствующего ключа реестра, например, через «Редактор локальной групповой политики» (для Home-версии не актуально).

1. Запускаем утилиту, выполнив «gpedit.msc» в строке поиска или окне командного интерпретатора (Win+R).

2. В разделе «Конфигурация компьютера» разворачиваем ветку «Административные шаблоны».

3. Идем в «Сеть».

4. Переходим в «Планировщик пакетов QoS».

5. Выполняем двойной клик по параметру «Ограничить резервируемую пропускную способность».

Ограничения резервируемой пропускной способности

6. Заходим в «Свойства параметра» и активируем опцию.

7. В качестве ограничения пропускной способности вводим «0» и сохраняем новую конфигурацию системы.

Ограничения пропускной способности до 0

Осталось проверить, используется ли планировщик пакетов QoS активным сетевым соединением.

Вызываем «Панель управления» (Win→X).

Переходим в «Сетевые подключения».

Жмём по пункту «Настройка параметров подключения».

Переходим в окно свойств активного сетевого соединения и проверяем, чтобы возле «Планировщик пакетов QoS» стоял флажок.

Настройка сетевого подключения Realtek

Низкая скорость обмена файлами

Скачивание файлов через торрент-клиент или менеджер загрузки может происходить долго из-за настроек самых приложений или отсутствия достаточного количества источников раздачи (в случае работы с пиринговыми сетями).

Первым делом, что касается торрент-клиентов (Bit-, qBit-, uTorrent), необходимо проверить наличие достаточного количества сидов (доступность раздачи). Второй момент — ограничение скорости приема/передачи в приложении или для раздачи. Убирается оно в настройках самой программы.

Отрываем наш клиент для скачивания файлов через торрент-трекер.

Вызываем контекстное меню программы через иконку в трее (возле часов).

Из списка поочередно выбираем команды «Ограничение загрузки/приема» и «Ограничение отдачи/раздачи» и устанавливаем их значения как 0 или «Не ограничено».

28 июня 2018  · 64,5 K
Прочитать ещё 3 ответа

Как настроить seo для сайта?

«Как уйти из офиса и не умереть с голоду?» — Телеграм канал про фриланс и удаленную...  · t.me/deletefromoffice

Начать нужно с внутренней и внешней оптимизации сайта под поисковик.

Внутренняя оптимизация:

  • создать грамотный файл robots.txt (в нём прописывается, какие страницы и файлы поисковому боту стоит индексировать, а какие нет)
  • улучшите дизайн и юзабилити
  • повысьте скорость загрузки сайта и страниц
  • добавьте ссылки на соцсети и возможность делиться материалами в соцсетях
  • уделите внимание микроразметке
  • соберите семантическое ядро и распределите поисковые запросы по страницам
  • используйте ключевые фразы из семантического ядра для написания грамотных title/ description/ keywords
  • составьте URL ЧПУ (URL — адрес страницы, ЧПУ — человекопонятный URL)
  • структурируйте все тексты (абзацы <p>, заголовки и подзаголовки <h1>...<h6>, маркированные и нумерованные списки <ul>/ <ol>, таблицы <table>, изображения <img>)
  • оптимизируйте все тексты и фотографии (пропишите ЧПУ и описания для них)
  • используйте внутреннюю перелинковку (ГРАМОТНУЮ)

Внешняя оптимизация - комплекс последовательный действий, направленных на продвижение в топ поисковой системы. К примеру, закупка ссылок, упоминающих ваш сайт. Или же, настройка рекламной кампании в Яндекс.Директ и Google Adwords. Продвижение в соцсетях, прогонка по каталогам и форумам, отзывы.

2 февраля 2019  · 8,7 K
Прочитать ещё 26 ответов

Какие правила нужно соблюдать для верстки сайтов в 2020?

Разработка корпоративных сайтов и интернет-магазинов с 2013 года. Большой опыт в сфере...  · pavelorekhov.ru
Отвечает
Павел Орехов

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

Все мелкие изображения и иконки по возможности использовать в формате svg

Если есть возможность вместо png использовать jpg, но учитывать дисплеи retina и делать картинку в два раза больше по размеру указанному в стилях.

Не делать сброс стандартных настроек для заголовков, списков, параграфов. Когда сайт готов добавленный контент выглядит сплошной простыней текста.

Использовать распространенные фреймворки и форматы сеток.

Не объединять весь css и js в один файл с минимизацией которые в дальнейшем не пригодны для редактирования.

Первый экран носить в style в head остальные CSS файлы можно разместить в footer

Прочитать ещё 1 ответ

Как улучшить свой почерк?

профессионально опаздываю

до восьмого класса был отвратительный почерк, поняла, что так дальше нельзя. завела себе блокнот, довольно долго выписывала алфавит так, чтобы мне нравилась каждая буква. потом писала какие-то небольшие тексты, используя исключительно "придуманные" мной буквы. в восьмом же классе нам давали огромный объём текстов под запись, довольно быстро привыкла писать новым почерком. прошло уже семь лет, до сих пор пишу точно так же, разборчиво и красивенько, всем нравится (:

Прочитать ещё 3 ответа

Что такое "адаптивная верстка"?

Лучше один раз увидеть, чем 100 раз услышать:

https://www.paralinestudio.ru/wp-content/uploads/2018/01/responsive-design-example1.jpg

В основном это правильное позиционирование элнментов сайта (html тегов) под все виды устройств (ПК, планшеты, телефоны).

Различают 2 подхода к адаптивной верстке:

  1. Отдельная директория шаблона под соответствующее устройство, здесь можно менять архитектуру DOM документа
  2. Адаптивность при помощи CSS медиа запросов (существует множество готовых бидлиотек, например bootstrap)

Самое важное, что без адаптивной верстки сейчас нельзя! Поисковые системы определяют этот показатель как важный, неотъемлемый фактор для ранжирования вашего сайта в поисковой выдаче.

https://toxadab.ru/wp-content/uploads/2018/12/toxadab.png

toxadab

5 марта 2019  · 2,8 K
Прочитать ещё 5 ответов