«Не научишься ходить, следуя правилам. Вы учитесь, делая и падая ». - Ричард Брэнсон

Я могу сказать вам, что каждый человек, начинающий веб-разработку, вероятно, совершал эти ошибки, независимо от того, думали ли они о них ранее или нет.

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

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

А пока остановимся на HTML и CSS.

Чаще всего новички, изучающие CSS и HTML, часто делают ошибки, из-за которых они теряются в своем коде. (И нет, комментирование - это не способ помочь вам обойти свой код. Если вы все сделали правильно, вам даже не понадобятся комментарии - по крайней мере, мне так сказали.)

Ошибка №1: использование единиц измерения в пикселях.

Любой, кто впервые начинает работать с CSS, знает, что «самый простой» способ разметки веб-страницы - использовать пиксели. Вы просто устанавливаете значение и меняете его до тех пор, пока оно не будет хорошо выглядеть при предварительном просмотре.

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

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

Выше приведен пример абсолютных значений. Это не то, как нужно. Эту ошибку совершает каждый новичок. Кажется, намного проще иметь возможность просто изменить некоторые значения px, чем использовать rem и устанавливать значение root, хотя это не так сложно, как кажется.

Чтобы объяснить приведенный выше код:

Rem используется, когда у вас есть корневой элемент, которому вы назначаете базовое значение. Итак, выше у меня есть корневой HTML-код, и я заявил, что размер шрифта составляет 20 пикселей. Устанавливая значение для моего div, я просто говорю, что хочу, чтобы размер шрифта этого div был 1rem, то есть ровно 1 из 20 пикселей.

Rem используется для глобального масштаба, а em - для локального.

Проблема с использованием px при изменении размера в CSS: почти у всех на устройстве экран разного размера. Вот почему нам нужно убедиться, что наш веб-сайт доступен для просмотра на любом устройстве и, следовательно, доступен для всех.

Ошибка № 2: следование документообороту.

Вкратце объясним: людям нравится следить за своим потоком DOM при написании CSS, однако это приводит к образованию огромного кластера бесконечных деревьев селекторов.

Вот пример некоторого HTML-кода:

Много раз я видел, как новички хранят div внутри div внутри div… и так далее. Они смотрят несколько руководств на YouTube, где используют контейнер, а затем div содержимого, и начинают следить за ним, как будто это соревнование за то, у кого больше всего div в их HTML.

Затем они делают что-то вроде этого в своем файле CSS:

Хотя может показаться, что вы делаете свой HTML организованным и чистым, на самом деле вы просто собираетесь загромождать свой CSS-файл. Файл CSS просто добавляет стиль вашей странице, нет необходимости копировать дерево DOM вашего HTML-кода в ваш CSS.

Это все, что вам нужно сделать:

Ошибка № 3: Именование.

Новички в веб-разработке - или фактически новички в любых языках программирования - всегда делают ошибки при именовании переменных, в данном случае классов или идентификаторов.

Именование нужно делать осторожно. Вы хотите, чтобы ваш код был читабельным и понятным.

Многие люди пишут имена для функций или классов как первое, что приходит им в голову, поскольку они думают, что запомнят, для чего это нужно. Через неделю они возвращаются к своему коду и понимают, что понятия не имеют, что что-то делает.

Вот некоторые примеры:

somethingHappened := <some message expression>.

somethingHappened ifTrue: [...]

Ниже представлен жемчужный код. Удачи в попытках понять, что он делает.

my $search_key = $something_else;
  foreach (keys %some_hash) {
 if ($_ eq $search_key) {
 do_something($_);
 }
  }

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

/**
  * FOR CLASS INTERNAL USE ONLY
  */
 public void someMethod() {
 ... some code...
 }

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

Именование особенно важно, когда дело касается CSS. На данный момент нет инструмента статического анализа для CSS. Это позволит нам выполнять автоматический рефакторинг или переименование. Javascript может динамически добавлять, удалять и переименовывать классы в CSS. Это может вызвать проблемы, поскольку не все селекторы будут использоваться в CSS постоянно, очень сложно найти части кода, которые никогда не будут использоваться.

Ошибка №4: создание потока и стиля DOM одновременно.

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

Ваш HTML-документ обеспечит правильное размещение всей вашей информации. Вы хотите, чтобы все это было вниз, чтобы у вас была опора для вашего веб-сайта. Ваша детализация идет после.

Многие новички проводят слишком много времени на своих веб-сайтах, они пишут один раздел своего HTML-документа, а затем мгновенно переходят в свой CSS-файл, чтобы он выглядел красиво. Не делай этого. Вы сэкономите столько времени, если будете делать это шаг за шагом.

Ошибка № 5: Дизайн и верстка в CSS.

Большая ошибка в том, как делают начинающие веб-разработчики: им легко объединить дизайн и верстку в своем коде CSS.

Вам не следует зацикливаться на том, как изначально выглядит ваш сайт. Возвращаясь к ошибке 4 - люди тратят слишком много времени на создание сегментов своего HTML-кода, затем на стилизацию для этого сегмента, затем на выполнение следующей части и возвращение назад. Однако вам следует сделать кое-что, если вы знаете, что не будете тратить все свое время на код CSS: вам следует сделать отдельный макет в своем файле CSS. Разделите дизайнерскую часть и макет.

Вот пример:

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

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

Если вы сломаете свой код, вам будет намного проще обновить его позже. Не только это, но вы сможете легко найти что угодно в своем CSS. Вы будете знать, ищете ли вы детали или макет, и тогда сможете найти именно тот элемент, который вам нужен.

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

Я делал каждую из этих ошибок, когда только начинал. Теперь я понимаю, сколько времени потратил зря. Хотя сначала они кажутся незначительными, все второстепенные складываются и в конечном итоге сбивают вас с пути к достижению успеха в веб-разработке.