Зачем нужен кодстайл в веб верстке статья

Кодстайл HTML — правила хорошего тона при вёрстке

«Магия, не трогать!», «Когда я писал этот код, только Бог и я понимали, что он означает. Теперь понимает только Бог» — смешные, но реальные комментарии, которые встречались разработчикам в коде. Чтобы коллегам по проекту было проще разобраться в вашем коде, он должен быть не только свободным от «костылей», но ещё читабельным и однообразным. В этом помогает кодстайл — общие правила написания кода. Они могут отличаться от продукта к продукту, тем не менее мы постараемся объяснить наиболее общепринятые моменты.

Теги

Обычные теги. Теги оформляются строчными буквами. Давайте посмотрим на примерах.

В примере выше теги div и Img прописаны с заглавных букв — такое написание не соответствует общим правилам, а читать код становится сложнее. Нужно опустить всё в нижний регистр.

Атрибуты. Это же правило распространяется на атрибуты тегов.

Самозакрывающиеся теги. Есть два варианта написания самозакрывающихся тегов — тех, которые не нужно закрывать повторным тегом.

Оба варианта допустимы с точки зрения валидации, но в коде лучше придерживаться единообразия. Если вы выбрали вариант без слеша (/), то и другие теги в проекте нужно оформлять без него. Также стоит упомянуть, что вариант без слеша является более новым и убирает ненужный символ, поэтому многие выбирают его. Но если вы планируете использовать XML, то лучше использовать слеш.

Атрибуты

Атрибуты оформляются через один пробел с использованием одного типа кавычек. Как правило, ставят двойные кавычки («»).

Давайте разберем, как можно улучшить код. Во-первых, нужно нужно проставить один пробел между атрибутами и именами тегов, после тегов src, alt и названия a. Во-вторых, нужно поправить тип кавычек у атрибутов alt и width.

Порядок атрибутов

Нет четких правил оформления именно порядка атрибутов. Но для удобства можно придерживаться правила, что класс задаётся всегда после оформления имени тега.

Отступы

Начинающие разработчики часто забывают про отступы, без которых сложно отследить вложенность элементов. Разберём на примере.

Можно ли тут сходу определить, какой тег в какой завёрнут? К сожалению, нет. Чтобы поправить нашу разметку, воспользуемся правилом: к каждому новому вложенному тегу добавлять ещё один отступ.

Отступ может быть равен двум или четырём пробелам — число пробелов в одном отступе можно настроить в среде разработки. Чаще всего для отступов используют два пробела, потому что так код получается более компактным. Чтобы поставить отступ, вы можете нажать нужное количество раз кнопку space (пробел) или же tab.

Проверить себя поможет расширение indent-rainbow, которое будет подсвечивать отступы.

Теперь расскажем о правилах, которые не совсем относятся к кодстайлу, но являются хорошими практиками в HTML.

Кнопки

Как правило, по умолчанию у кнопок указан тип submit, то есть кнопка для обработки формы. Но если кнопка находится вне формы, то нужно указывать button — так мы отключаем событие отправки формы, которой у нас нет. Даже если кнопка находится в форме, рекомендуется указывать тип submit в разметке, так как в разных браузерах может быть по умолчанию другой тип.

Секции

У тега section должен быть заголовок — это правило, о котором часто забывают. Если заголовка нет в макете, то он делается скрытым. Подробнее об этом можно прочитать на developer.mozilla.

Изображения

Указывать название (alt) и размеры (width и height) для изображений. Alt является обязательным атрибутом и, в основном, служит для того, чтобы при «битой» картинке пользователь мог понять, что именно должно было отобразиться на странице.

Атрибуты width и height являются необязательными, но указав их, мы можем предотвратить:

• «скачок» страницы при медленной загрузке, так как пространство под картинки уже будет зарезервировано до их получения;
• модификацию сетки при «битом» изображении, так как при таком сценарии будет использован alt, который явно по размерам будет уступать изначальному размеру изображения.

Проверять вёрстку на валидность позволяет валидатор. Если не знаете, как его настроить, помогут онлайн-сервисы, например — validator.w3.

Советы по стилю кода

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

Синтаксис

Шпаргалка с правилами синтаксиса (подробнее смотрите ниже по тексту):

Не всё здесь однозначно, так что разберём эти правила подробнее.

Ни одно правило не является жёстко обязательным

Здесь нет железных правил. Это стилевые предпочтения, а не религиозные догмы.

Фигурные скобки

В большинстве JavaScript проектов фигурные скобки пишутся в так называемом «египетском» стиле с открывающей скобкой на той же строке, что и соответствующее ключевое слово – не на новой строке. Перед открывающей скобкой должен быть пробел, как здесь:

if (condition) < // делай это // . и это // . и потом это >

А что если у нас однострочная запись, типа if (condition) doSomething() , должны ли мы использовать фигурные скобки?

Вот различные варианты расстановки скобок с комментариями, посмотрите сами, какой вам кажется самым читаемым:

�� Такое иногда бывает в коде начинающих. Плохо, фигурные скобки не нужны:

if (n < 0) не поддерживается`);>

if (n < 0) alert(`Степень $не поддерживается`);

if (n < 0) alert(`Степень $не поддерживается`);

if (n < 0) < alert(`Степень $не поддерживается`); >

Для очень короткого кода допустима одна строка. Например: if (cond) return null . Но блок кода (последний вариант) обычно всё равно читается лучше.

Длина строки

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

// обратные кавычки ` позволяют разделять строку на части let str = ` Рабочая группа TC39 организации Ecma International - это группа JavaScript-разработчиков, теоретиков и авторов движков JavaScript, которые вместе с сообществом занимаются поддержкой и развитием языка JavaScript. `;

if ( 123 && moonPhase === 'Waning Gibbous' && zodiacSign === 'Libra' )

Максимальную длину строки согласовывают в команде. Обычно это 80 или 120 символов.

Отступы

Существует два типа отступов:

Горизонтальные отступы: 2 или 4 пробела. Горизонтальный отступ выполняется с помощью 2 или 4 пробелов, или символа табуляции (клавиша Tab ). Какой из них выбрать – это уже на ваше усмотрение. Пробелы больше распространены. Одно из преимуществ пробелов над табуляцией заключается в том, что пробелы допускают более гибкие конфигурации отступов, чем символ табуляции. Например, мы можем выровнять аргументы относительно открывающей скобки:

show(parameters, aligned, // 5 пробелов слева one, after, another ) < // . >

function pow(x, n) < let result = 1; // //

Точка с запятой

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

Есть языки, в которых точка с запятой необязательна и редко используется. Однако в JavaScript бывают случаи, когда перенос строки не интерпретируется, как точка с запятой, что может привести к ошибкам. Подробнее об этом – в главе о структуре кода.

Если вы – опытный разработчик на JavaScript, то можно выбрать стиль кода без точек с запятой, например StandardJS. В ином случае, лучше будет использовать точки с запятой, чтобы избежать подводных камней. Большинство разработчиков их ставят.

Уровни вложенности

Уровней вложенности должно быть немного.

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

Например, вместо добавления вложенного условия if , как здесь:

for (let i = 0; i < 10; i++) < if (cond) < . // >

Мы можем написать:

for (let i = 0; i < 10; i++) < if (!cond) continue; . //

Аналогичная ситуация – с if/else и return .

Например, две нижеследующие конструкции идентичны.

function pow(x, n) < if (n < 0) < alert("Отрицательные значения 'n' не поддерживаются"); >else < let result = 1; for (let i = 0; i < n; i++) < result *= x; >return result; > >

function pow(x, n) < if (n < 0) < alert("Отрицательные значения 'n' не поддерживаются"); return; >let result = 1; for (let i = 0; i < n; i++) < result *= x; >return result; >

Размещение функций

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

Объявить функции перед кодом, который их вызовет:

// объявление функций function createElement() < . >function setHandler(elem) < . >function walkAround() < . >// код, который использует их let elem = createElement(); setHandler(elem); walkAround();

// код, использующий функции let elem = createElement(); setHandler(elem); walkAround(); // --- вспомогательные функции --- function createElement() < . >function setHandler(elem) < . >function walkAround()

В большинстве случаев второй вариант является предпочтительным.

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

Руководства по стилю кода

Руководство по стилю содержит общие правила о том, как писать код, например: какие кавычки использовать, сколько пробелов отступать, максимальную длину строки и так далее – в общем, множество мелочей.

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

Конечно, команда всегда может написать собственное руководство по стилю, но обычно в этом нет необходимости. Существует множество уже готовых.

Некоторые популярные руководства:

• Google JavaScript Style Guide
• Airbnb JavaScript Style Guide (есть перевод)
• Idiomatic.JS (есть перевод)
• StandardJS
• (и ещё множество других)

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

Автоматизированные средства проверки (линтеры)

Автоматизированные средства проверки, так называемые «линтеры» – это инструменты, которые могут автоматически проверять стиль вашего кода и вносить предложения по его улучшению.

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

Вот некоторые известные инструменты для проверки:

• JSLint – проверяет код на соответствие стилю JSLint, в онлайн-интерфейсе вверху можно ввести код, а внизу – различные настройки проверки, чтобы попробовать её в действии.
• JSHint – больше проверок, чем в JSLint.
• ESLint – пожалуй, самый современный линтер.

Все они, в общем-то, работают. Автор пользуется ESLint.

Большинство линтеров интегрированы со многими популярными редакторами: просто включите плагин в редакторе и настройте стиль.

Например, для ESLint вы должны выполнить следующее:

1. Установите Node.JS.
2. Установите ESLint с помощью команды npm install -g eslint (npm – установщик пакетов JavaScript).
3. Создайте файл конфигурации с именем .eslintrc в корне вашего JavaScript-проекта (в папке, содержащей все ваши файлы).
4. Установите/включите плагин для вашего редактора, который интегрируется с ESLint. У большинства редакторов он есть.

Вот пример файла .eslintrc :

< "extends": "eslint:recommended", "env": < "browser": true, "node": true, "es6": true >, "rules": < "no-console": 0, "indent": ["warning", 2] >>

Здесь директива "extends" означает, что конфигурация основана на наборе настроек «eslint:recommended». После этого мы уточняем наши собственные.

Кроме того, возможно загрузить наборы правил стиля из сети и расширить их. Смотрите https://eslint.org/docs/user-guide/getting-started для получения более подробной информации об установке.

Также некоторые среды разработки имеют встроенные линтеры, возможно, удобные, но не такие гибкие в настройке, как ESLint.

Итого

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

Когда мы думаем о написании «лучшего» кода, мы должны задать себе вопросы: «Что сделает код более читаемым и лёгким для понимания?» и «Что может помочь избегать ошибок?». Это – основные моменты, о которых следует помнить при выборе и обсуждении стилей кода.

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

Что такое CSS и для чего нужен веб-разработчику

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

Что такое CSS

Каждый HTML-документ имеет базовые параметры для тегов. Например, расположение параграфов для тега [p], точки для ненумерованных списков и линии разметки для табличек. Но сегодня этого недостаточно. Сайт должен быть привлекательным, красиво оформленным и наполненный графическими элементами. Так выглядит чистый HTML блога IT STEP За визуальное оформление Web-страницы отвечает следующая ступенька — CSS. Переводится как «Каскадные таблицы стилей». CSS — это набор команд, которые отвечают за визуализацию страницы. Например, добавить цвет тексту, разместить параграфы в строчку или колонками, изменить размер картинок. Задача CSS — украсить сайт, придать проекту завершённый вид. А так выглядит блог в связке разметки веб-страницы и продуманных стилей. Таблицы стилей не создают новые элементы, а работают с документом. Без HTML–документа, CSS не нужен. Код не будет работать, потому что визуализировать нечего. Если представить веб-страницу в виде строительства домика, то HTML — это голые стены, рамы для окон, незаурядный шифер и дверные проёмы. А CSS — это обои, цвет краски, стеклянные панели, побелка потолка и куча декораций. HTML задаёт элементы на веб-странице. CSS их украшает, размещает и придаёт вид готового проекта. Ещё есть анимации, но об этом в другой статье.

Зачем нужны команды CSS

В 90-х разделения на HTML и CSS не было. Существовали сайты в виде разметок – работа чистого ХТМЛ-документа. Так выглядело создание сайтов 30 лет назад на примере персонального блога. В начале 2000-х появились первые CSS-стили, с которыми сайт обрёл новый вид. Простая разметка стала моветоном — способ разработки морально и технологически устарел. Так появились первые веб-ресурсы со стилями. Смотреть сайт интереснее и проще, потому что каждый элемент отделён свойствами — размер текста, цвет, шрифт, размещение на странице Сейчас без CSS-стилей невозможно создать полноценный сайт. С развитием CSS он стал универсальным — его теги не нужно настраивать под браузер. Также он кэшируется после первого запуска и запоминается браузером. Это позволяет быстрее загружать страницы. И разработка на CSS сейчас смотрится лучше проектов прошлой эпохи Рассмотрим, как работают команды CSS на веб-странице. HTML формирует структуру веб-документов — текст, таблицы, гиперссылки. CSS — создает разметку, оформление и стиль. Поэтому ХТМЛ загружается первым, а стили за ним. Нашему глазу процесс незаметен — браузер обрабатывает информацию параллельно. Процесс занимает доли секунды. Но если сайт плохо свёрстан или есть проблемы в DOM-дереве, то возникают ошибки. Например, браузер первым показывает HTML-документ, а через 3-5 секунд после загрузки— стили. Это плохая вёрстка. Хорошая вёрстка — это когда HTML и CSS работают в синергии.

Как работает CSS

Начнём от простого к сложному: сначала рассмотрим подключение стилей, а после — устройство кода. Вариантов, как подключать код CSS, минимум три. Рассмотрим варианты по росту эффективности. Внутри тега стили CSS добавляют через атрибут Style Первый вариант: CSS-код можно написать внутри одного тега. Например, прописать цвет и размер шрифта для конкретного параграфа. Этот способ называется инлайн (inline) записью. Но у этого способа больше минусов — его невозможно читать и переиспользовать в других местах. Приходится писать больше кода, например, для каждого абзаца писать красный цвет. А чем больше кода — тем медленнее грузится веб-страница. Поэтому приём не используют в современной веб-разработке. В таком способе нужно ссылаться на тот элемент, который стилизуем. Пример с параграфом — указать тег [p]. Второй вариант — CSS-код вносят с помощью тега style в сам документ. Он применяется к любым тегам HTML: от параграфов до элементов таблицы. Стили подключают внутри разметки head. Получается, что стили находятся внутри документа HTML. Разметка увеличивается, читать трудно. Внутри проектной папки HTML-документ и папка со стилями. Как создать файл CSS — создайте текстовый документ и вместо расширения .txt установите .css. Третий вариант: стили веб-страниц прописывают в отдельном документе. Для этого в папке проекта создают текстовый документ с расширением .css. К HTML стили подключают с помощью тега link и свойства href внутри разметки документа, чтобы установить расположение файла. Это самый распространенный способ. Если файл подключен к нескольким страницам сайта, то вносить в них правки можно одновременно. В теге head подключают ссылки на файлы со стилями. А в body идёт разметка документа. Вместо дополнительного CSS внутри HTML получаем аккуратную ссылку При этом код CSS можно установить как по файлу проекта, так и по ссылке из Интернета. Так, например, делают для готовых элементов: разработчик переходит на сайт с шаблонами и копирует код разметки. Если стили его устраивают — просто копирует и вставляет ссылку со стилями в свой документ. Для готовых элементов, например, анимаций стили придумали сторонние разработчики. Поэтому можно прикрепить ссылку из Интернета, а не создавать новый файл CSS под анимацию Лучше — создавать отдельный файл и прикреплять его ссылкой в разметку. Мы не засоряем документ. А ещё стили так удобно читать и исправлять — лишняя разметка не мешает. �� Последний подход используют все профессиональные разработчики.

Правила построения кода CSS

• Выбор селектора — это то, что нужно стилизовать. Например, нужно добавить цвет параграфам текста. Тогда используем обобщенный для параграфов тег [p].
• Блоки объявлений (Declare) — то, как будем стилизовать селектор.

Чтобы работать с CSS, нужно знать свойства языка. Например, чтобы изменить цвет текста, используют свойство color, а размер шрифта определяет свойство font-size.

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

�� Ссылка на справочник, где расписаны все свойства CSS.

Что такое селекторы

Чтобы изменить элемент в разметке документа, его нужно найти и привязать к нему стили. Стили — это блоки объявлений, их рассмотрели выше. А сейчас нужно найти или создать свой селектор.

В примере Span — это селектор. А всё, что в скобках — блок объявления стиля: изменение цвета фона и общего цвета.

Селектор — это значок, отвечающий за конкретный элемент. Что-то вроде идентификационного кода элемента разметки. Различают селекторы по тегу, классу и идентификатору.

Описание тегов, классов, идентификаторов и их селекторов в коде

�� Селектор тега определяет все элементы указанного типа на странице проекта. Например, селектор для абзацев отвечает его названию в HTML — [р]. А для заголовков селектор — [h].

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

�� Селекторы класса обозначают конкретный элемент или часть сайта. Классам нет конкретных названий, поэтому разработчик создаёт их под своё предпочтение. Но чтобы было удобно читать другим — есть определённые правила, вроде кодстайла и методологии. Об этом позже.

Класс прописывается внутри нужного тега атрибутом Class. Если написать внутри одного абзаца класс — он будет принадлежать только этому абзацу. Если дописать во второй абзац — это общий класс для двух абзацев. Их паспорт.

Если к классу применить стиль — визуально обновится только часть сайта или элемент с этим классом. Других стиль не тронет. Поэтому разработку на CSS делают не по тегам, а по уникальным классам.

�� Селекторы-идентификаторы (ID) — класс, который можно использовать только для одного элемента. Идентификатор (ID) — это название элемента сайта, которое не должно повторяться на странице. Например, если возле списка написать то в другом месте айди использовать нельзя. Поэтому ID почти не используют, а стилизуют классами (class).

Как работает код CSS

Внутри каждого элемента может быть несколько классов. А у каждого класса — свой набор стилей. Чтобы не запутаться — в CSS придумали несколько правил. Они помогают правильно стилизовать элемент и не запутаться.

Селектор — это справочник для браузера. Он рассказывает, к какому элементу CSS применяет свойство. Например, это заголовок, абзац или кубики на сайте.

У каждого селектора должно быть свойство. На примере — свойство «Изменить цвет фона», а значение — на какой цвет нужно изменить.

Свойство не работает без значения — это то, как изменится элемент, когда его прочитает браузер. Если у абзаца цвет шрифта изменится на красный, то к нему применили значение «красный».

CSS — это каскадная таблица стилей.

Общее правило — к селектору можно сколько угодно применять свойств и значений. Например, к нашему параграфу [p] можно поставить три цвета шрифта, два варианта размеров, курсив, жирное начертание, размер в 20 пикселей и расположение по центру.

Если к одному элементу применить три одинаковых свойства, но разных значения — используется нижнее. Так работает правило каскада.

Но есть нюанс — если использовать три цвета или два варианта шрифтов, то работать будет один вариант. Это называется каскадностью стилей.

Например, в начале документа написали — цвет абзаца красный. Где-то в середине обратились к абзацу с классом и написали — изменим цвет на зелёный. Если перейти в документ и посмотреть — весь текст будет красным, а абзац — зелёным. Почему так?

Таков порядок в коде: правило, записанное ниже «перебивает» остальные. Если сверху написать для всех заголовков размер в 18 пикселей, а ниже для тех же заголовков написать 20 пикселей — браузер прочитает последнее. Все заголовки будут 20 пикселей.

Свойства параграфа ниже, но они не работают. Всё потому, что селектор по классу «сильнее» селектора по тегу

В примере с цветом абзаца есть ещё одно правило — исключение по специфике кода. Специфичность может быть одинаковой у всех, а может «весить» по-разному: допустим, обращение к классу «перебивает» обращение по тегу. Как это работает.

Если для тега написать размер в 18 пикселей, а для класса 20, то сработает размер в 20 пикселей по классу. Неважно, где находится класс: выше или ниже нового значения.

�� Класс важнее тега. То же самое с идентификатором — он важнее всех остальных. Поэтому идентификаторы используют в крайних ситуациях: например, когда стилей к одному элементу много, а нужны конкретные — «перебить остальные». А элементу пишут класс и уникальные значения стилей.

Так создают стили для веб-страницы: разработчик обращается к элементам документа и набирает свойства и значения, как слоёный пирог.

Для чего нужны методологии

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

Поэтому в обществе программистов придумали правила написания классов. Это называется стилем кода, или кодстайл.

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

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

Но назвать класс по ассоциации недостаточно. Внутри элемента может быть ещё с десяток других маленьких деталек. А всех одним классом не назовёшь.

Поэтому придумали список правил, вроде словаря для веб-разработчика. Это называется методологией.

На примере БЭМ-методологии: верхний класс написали как menu, а следующие (вложенные) написали как menu__link и menu__item. Разделение чёрточками обозначает основной класс и особый элемент.

Широкое распространение получила БЭМ-методология (расшифровывается как «Блок, Элемент, Модификатор») — это подход, основанный на простом правиле. Каждый элемент документа — самостоятельная часть. Если из документа нельзя взять блок и применить на этой же странице, но в другом месте — это не очень хорошо для работы веб-проекта.

Управляя блоками, как конструктором, разработчик может маневрировать в проекте: убирать одни блоки, добавлять другие и переиспользовать в других местах. Это ускоряет разработку. А документ легко читать.

Есть другая методология — атомарный CSS. У неё те же цели, как и у БЭМ — сократить код и сделать «человекопонятным».

В атомарной методологии используют не смысловые блоки, а отдельные правила. Например, если мы хотим изменить размер текста с 20 на 40 пикселей, цвет на жёлтый, то добавляем тегу с текстом классы font-size-40, и color-yellow. Фишка в том, что свойства заранее написали разработчики. Программисту осталось вставить нужный класс и свойство применяется к блоку.

Атомарный подход используют на автономных проектах. Например, на фреймворке Bootstrap используют Atomic CSS, чтобы верстать страницы можно было без профессионального разработчика. Вставил класс — значение и свойство подтянулось к классу.

Кто и как работает с CSS-кодом

В начале 2000-х жёсткого разделения на Front-end и Back-end не было. Программистов на HTML и CSS называли «верстальщиками». Слово оставили в обиходе, но разработчики прокачались дальше. Теперь их называют «веб-разработчик» или «фронтенд-разработчик».

А верстальщики занимаются рядовыми задачами. Например, пишут HTML-документы и прикрепляют стили. В другие языки они не суются.

На практике знания HTML и CSS пригодятся в любом сайтостроении и приложениях: от сложных платёжных систем до одностраничных сайтов. Основам CSS можно научиться с нуля, не будучи техническим специалистом. Например, в IT STEP есть курс «Front-end разработка», на котором можно разобраться с CSS, HTML. А ещё перейти на третью ступеньку и прокачаться в JavaScript.

Код-стайл

Теги и их атрибуты пишутся строчными буквами.
Для значений атрибутов всегда используются двойные кавычки.
Для отступов у вложенных элементов используется табуляция (рекомендуется выставлять размер табуляции - 2).

       
Моя первая страница
 
Описание моей первой страницы
    

Использование селекторов

Используйте в качестве основного селектора class . id нужны в основном в каких-то более специфичных местах, ведь уникальный id может быть лишь один на страницу.

Закрывающие теги

Закрывающий слеш у одиночных тегов ( ,
и другие) не ставится.
В остальных случаях (таких, как или ) обязателен закрывающий тег.

HTML-Doctype

В начале страницы обязательно должен быть указан актуальный , чтобы браузер отображал её в режиме соответствия стандартам. Сейчас версия html5.

Кодировка символов

Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. В нашем случае нужно utf-8 кодировка.

Атрибут языка

Для элемента в атрибуте lang должен указываться соответствующий язык документа.
Это нужно для правильной работы синтеза речи, для переводчиков и т.д.

Режим совместимости IE

Internet Explorer поддерживает специальный мета-тег, который указывает, в какой версии следует показать страницу. На данный момент целесообразно использовать так называемый Edge-мод.
Подробнее тут.

Подключение стилей

Стилевые файлы с помощью подключаются внутри . Атрибут type не указывается. А вот атрибут rel - обязателен, иначе страница "не поймет", что вы подключили.

Порядок атрибутов

Атрибут класса у HTML-элементов пишется первым. Это важно для идентичности написания кода. Так проще увидеть какой-либо class , id и т.д. Остальные атрибуты можно указывать в любом порядке, но желательно чтобы их порядок от элемента к элементу сохранялся.

Логические атрибуты

Для логических атрибутов (например, checked , disabled , required ) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.

Связи полей ввода

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

  Радио кнопка   Радио кнопка   

 /* Правильно: */ .selector < padding: 15px; margin: 0 0 15px; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; top: 0; >/* Неправильно: */ .selector

 /* Пример минимального сброса стилей */ /* Селектор * - обращение ко всем элементам в документе */ * < box-sizing: border-box; >/* Представим, что класс .title у заголовка h1, и нам нужно сбросить отступ сверху, а снизу поставить свой */ .title

 .element < /* Позиционирование */ position: relative; left: 0; right: 0; top: 0; bottom: 0; /* Блочная модель */ display: flex; align-items: center; margin: 10px; padding: 10px 20px; border: 1px solid red; width: 200px; height: 100px; box-sizing: border-box; /* Типографика */ font-family: Arial; font-size: 25px; font-style: italic; text-decoration: none; color: red; /* Оформление */ background: red; opacity: 1; /* Анимации */ transform: translateX(5px); animation: shake 0.3s infinite; > 

 /* Правильно: */ .header < . >.edit-button < . >.time < . >/* Неправильно: */ .t < . >.ssylka < . >.asd

 /* Хороший пример */ .nav < . >.list < . >/* Плохой пример */ nav.nav < . >ul.list

 // Неправильно var count = 10 var obj = var func = function() < //code here > // Правильно var count = 10; var obj = ; var func = function()< //code here >; 

 // Неправильно for(var i = 0; i < 10; i++) < if(a === b) > // Правильно for(var i = 0; i < 10; i++) < if(a === b) < doThisAction(a); >> 

 var name = 1; var secondName = 2; 

 // Неправильно if(условие) < //code here > // Правильно if(условие) < //code here > 

 // Неправильно var array = [ 1, 2, 3, 4 ]; var array = [1,2,3,4]; // Правильно var array = [1, 2, 3, 4]; 

 // Неправильно var foo = < a: 1 >; const < a, b >= someObject; // Правильно var foo = ; const = someObject; 

 // Неправильно var obj = < key : value >; var obj = < key: value >; // Правильно var obj =

 // Неправильно var my_variable = 5; var MYVARIABLE = 5; var myvariable = 5; // Правильно var myVariable = 5; var MY_VARIABLE = 5; 

 // Неправильно function myFunc() <>; function randomNumber() <>; // Правильно function getRandomNumber() <>; function validateForm() <>; function setNewColor() <>; 

 // Неправильно if (number == 5) < //code here > // Правильно if (number === 5) < //code here >