Мы все так делали.
Когда на вас сваливается новый проект, нужно по-быстренькому накидать дизайн. Это кажется простым и хочется начать работу с быстрого написания пары строк. Вы выбираете проверенный метод, поскольку не хочешь говорить себе “Хоть бы это заработало”. Вы понимаете, что в обеденный час это даст вам дополнительное время, чтобы пройти лишние два квартала за любимым сэндвичем с беконом. Вы представляете, как покидаете офис в 5 часов и все вам завидуют.
Это будет хороший день.
И затем, внезапно, вы за десять часов выпиваете больше кофе, чем среднестатистическая итальянская семья, и вы тупо смотрите на экран, борясь с осознанием того, что вы понятия не имеете, что делать. Родительские элементы рушатся, каждый браузер отображает страницу по разному, изменение размеров окна заставляет вас плакать, ваш CSS работает так же нелепо, как квотербек поющий Ave Maria.
Нет никакого способа обойти это, если вы не планировали заранее и не продумали свой подход. Вот 5 вещей, которые вы всегда должны делать при запуске нового проекта:
Да, правда. Это может показаться утомительным в начале, но выделяя время для планирования архитектуры вашей веб-страницы сэкономит вам часы (в долгосрочной перспективе).
На бумаге изображена структура HTML страницы
Это поможет вам:
Не пропускайте эти пункты, независимо от вашего опыта. Эти начальные 20% работы приведут к 80% качества готового проекта.
Цветные палитры, шрифты, изображения, сторонние платформы и библиотеки — все, что должно быть настроено до начала написания кода. Нет ничего более неприятного, чем попадание в зону, только чтобы понять, что одно изображение отличается от остальных одиннадцати, и вам нужно найти дизайнера или обрезать его самостоятельно.
Проверьте размер, отсортируйте все в соответствующие папки, подключите все что нужно к своему коду и затем двигайтесь вперед.
Большинство веб-сайтов разделены на разные секции, такие как: «Панель навигации», «О нас», «Галерея изображений», «Обратная связь» и т. д. И некоторые программисты (например, я) пользуются подходом, включающим в себя собственноручное создание архитектуры HTML и стилизации конкретного раздела с помощью CSS. Делайте, как я говорю, и не так, как делаю я.
Предпосылка имеет смысл, особенно для новых программистов, потому что вы думаете, что можете создавать отдельные компоненты и, по сути, «складывать» их друг над другом. Но, серьезно, не делай этого.
Вы, скорее всего, будете повторяться, иметь плохо организованную архитектуру и потеряете реализацию классов, которые будут держать ваш CSS в чистоте по мере роста вашей таблицы стилей.
Напишите весь свой HTML, прежде чем вы даже подумаете, что все выглядит красиво.
Выясните, как вы хотите, чтобы ваш CSS организовал и реализовал ваши основные требования (например, clearfix и box-sizing). Со временем вы найдете то, что вам больше подходит, приведу несколько примеров (один простой и еще один сложный) для начала.
Два примера секционирования CSS
Как только вы начнете писать код, вы, скорее всего, столкнетесь с проблемными областями, с которыми вы испытываете трудности с отладкой. Когда это произойдет, вы либо:
Когда вы вернетесь к этой первоначальной проблеме, а вам нужно будет вернуться к ней, эти заметки позволят вам вернуться к вопросу быстрее. Как только ты разберешься с проблемой, запишите решение тоже.
Чаще перечитывайте свои заметки и если вы снова столкнетесь с этой проблемой, вы будете знать как исправить ее.
Эти вещи могут показаться очевидными и простыми… но вы будете удивлены тем, сколько программистов этого не делают. Разработчики с 20-летним опытом разрушали целые проекты, потому что они не сформулировали план разработки и поэтому приходилось все переделывать с нуля.
Помните, что гораздо важнее придерживаться основ и делать это правильно каждый раз. Ваши клиенты и команда будут вам благодарны за это.
Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается проектированием ПО (вот примеры ТЗ: раз, два, три), а так же созданием ПО для крупных заказчиков (микротомограф, мобильная связь, освещение города).
Когда на вас сваливается новый проект, нужно по-быстренькому накидать дизайн. Это кажется простым и хочется начать работу с быстрого написания пары строк. Вы выбираете проверенный метод, поскольку не хочешь говорить себе “Хоть бы это заработало”. Вы понимаете, что в обеденный час это даст вам дополнительное время, чтобы пройти лишние два квартала за любимым сэндвичем с беконом. Вы представляете, как покидаете офис в 5 часов и все вам завидуют.
Это будет хороший день.
И затем, внезапно, вы за десять часов выпиваете больше кофе, чем среднестатистическая итальянская семья, и вы тупо смотрите на экран, борясь с осознанием того, что вы понятия не имеете, что делать. Родительские элементы рушатся, каждый браузер отображает страницу по разному, изменение размеров окна заставляет вас плакать, ваш CSS работает так же нелепо, как квотербек поющий Ave Maria.
Нет никакого способа обойти это, если вы не планировали заранее и не продумали свой подход. Вот 5 вещей, которые вы всегда должны делать при запуске нового проекта:
1. Изобразите вашу структуру на бумаге
Да, правда. Это может показаться утомительным в начале, но выделяя время для планирования архитектуры вашей веб-страницы сэкономит вам часы (в долгосрочной перспективе).
На бумаге изображена структура HTML страницы
Это поможет вам:
- Определите схожие разделы и элементы дизайна и создайте для них классы.
- Определите области, которые могут быть более сложными, чем они изначально казались.
- Хорошо продумайте, насколько удобен ваш сайт. Не будьте тем разработчиком, который делает красивые и отзывчивые веб-сайты, которые ограничивают людей, которые не думают как вы.
- Пишите чистый и понятный код.
- Составьте список технологических платформ, сторонних служб или библиотек, которые необходимо настроить и использовать для проекта.
Не пропускайте эти пункты, независимо от вашего опыта. Эти начальные 20% работы приведут к 80% качества готового проекта.
2. Организуйте ресурсы
Цветные палитры, шрифты, изображения, сторонние платформы и библиотеки — все, что должно быть настроено до начала написания кода. Нет ничего более неприятного, чем попадание в зону, только чтобы понять, что одно изображение отличается от остальных одиннадцати, и вам нужно найти дизайнера или обрезать его самостоятельно.
Проверьте размер, отсортируйте все в соответствующие папки, подключите все что нужно к своему коду и затем двигайтесь вперед.
3. Сперва напишите HTML
Большинство веб-сайтов разделены на разные секции, такие как: «Панель навигации», «О нас», «Галерея изображений», «Обратная связь» и т. д. И некоторые программисты (например, я) пользуются подходом, включающим в себя собственноручное создание архитектуры HTML и стилизации конкретного раздела с помощью CSS. Делайте, как я говорю, и не так, как делаю я.
Предпосылка имеет смысл, особенно для новых программистов, потому что вы думаете, что можете создавать отдельные компоненты и, по сути, «складывать» их друг над другом. Но, серьезно, не делай этого.
Вы, скорее всего, будете повторяться, иметь плохо организованную архитектуру и потеряете реализацию классов, которые будут держать ваш CSS в чистоте по мере роста вашей таблицы стилей.
Напишите весь свой HTML, прежде чем вы даже подумаете, что все выглядит красиво.
4. Предварительные разделы CSS
Выясните, как вы хотите, чтобы ваш CSS организовал и реализовал ваши основные требования (например, clearfix и box-sizing). Со временем вы найдете то, что вам больше подходит, приведу несколько примеров (один простой и еще один сложный) для начала.
Два примера секционирования CSS
5. Ведите и сохраняйте список заданий и ошибок
Как только вы начнете писать код, вы, скорее всего, столкнетесь с проблемными областями, с которыми вы испытываете трудности с отладкой. Когда это произойдет, вы либо:
- Отойдите от компьютера на минут 20 или
- Перейдите к чему-то более легкому
Когда вы вернетесь к этой первоначальной проблеме, а вам нужно будет вернуться к ней, эти заметки позволят вам вернуться к вопросу быстрее. Как только ты разберешься с проблемой, запишите решение тоже.
Чаще перечитывайте свои заметки и если вы снова столкнетесь с этой проблемой, вы будете знать как исправить ее.
Эти вещи могут показаться очевидными и простыми… но вы будете удивлены тем, сколько программистов этого не делают. Разработчики с 20-летним опытом разрушали целые проекты, потому что они не сформулировали план разработки и поэтому приходилось все переделывать с нуля.
Помните, что гораздо важнее придерживаться основ и делать это правильно каждый раз. Ваши клиенты и команда будут вам благодарны за это.
Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается проектированием ПО (вот примеры ТЗ: раз, два, три), а так же созданием ПО для крупных заказчиков (микротомограф, мобильная связь, освещение города).