Форматирование текста HTML CSS

05.05.2019

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

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

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

Несколько примеров

После прочтения “The Programmers’ Stone ”, я еще долгое время ставил скобки таким образом:

If (food === "pizza") { alert("Pizza ;-)"); } else { alert("Not pizza ;-("); }
Но потом я понял, что я, наверное, единственный, среди пользователей, кто так делает. Все остальные придерживаются этого стиля:

If (food === "pizza") { alert("Pizza ;-)"); } else { alert("Not pizza ;-("); }
Или этого

If (food === "pizza") { alert("Pizza ;-)"); } else { alert("Not pizza ;-("); }
Так что я поменял свой стиль на вышеупомянутый.

Мне очень нравится использовать этот стиль для создания цепочек:

Const food = [ "pizza", "burger", "pasta", ]
Но, наверное, в использовании этого стиля я даже более одинок, нежели в случае со скобками.

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

Есть еще кое-что, что никто кроме меня не делает. Я всегда использую двойной пробел перед комментарием в конце строки.

Const volume = 200; // ml
Я думал, это улучшает читабельность кода. Но, на самом деле, это делает кодовую базу несогласованной, потому что остальные разработчики ставят только один пробел.

Что делают разработчики JavaScript

К сожалению, у JavaScript нет официального стиля кодирования. Есть несколько популярных стилей написания кода , таких как Airbnb или Standard . Вы можете использовать их для того, чтобы ваш код выглядел знакомым для других разработчиков.

Кажется, что у JavaScript наконец-то имеется решение этой проблемы. Новый инструмент под названием Prettier переформатирует ваш код в соответствии со своими правилами. Он совершенно не учитывает изначальный вид кода.

Давайте опробуем работу Prettier на моих примерах:

If (food === "pizza") { alert("Pizza ;-)"); } else { alert("Not pizza ;-("); } function foo(items) { return items.filter(item => item.checked).map(item => item.value); } const volume = 200; // ml
Вы можете оспорить этот стиль. Мне, например, не нравится размещение else , сомнения вызывает также написание функциональной цепи в одну строку. Однако я вижу огромные преимущества во внедрении Prettier’а:

нечего даже обсуждать - у Prettier’а несколько опций;
никаких споров о конкретных правилах, если вы работаете в команде;
вашим напарникам не нужно изучать стиль кодирования вашего проекта;
нет нужды исправлять стилевые ошибки, о которых сообщает ESLint;
есть возможность установить сохранение автоформата.

Заключение

Prettier уже используется некоторыми популярными проектами , такими как React или Babel. И я начинаю переделывать свои проекты , отходя от своего привычного стиля кодирования, в пользу Prettier’a. Я бы порекомендовал использовать его вместо стиля кодирования Airbnb.

В начале моей работы с Prettier’ом было много моментов, когда я думал “фу, это ужасно”. Но когда я думаю, что мне нужно было бы, например, вручную форматировать код JSX из однострочного вида в многострочный, если я добавляю еще один prop и это не умещается в одну строку - тогда я понимаю, что оно абсолютно точно стоит того.

Prettier форматирует ваш код, когда вы сохраняете файл.

Прочитайте, как внедрить Prettier в свой проект.

P.S. Посмотрите на мое новое средство , которое упростит добавление ESLint, Prettier и других инструментов в ваш проект, а также хранение и синхронизацию их настроек.

Перевод выполнен при поддержке компании EDISON Software , которая профессионально занимается разработкой сайтов на Amiro.CMS и WordPress и для крупных заказчиков.

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

HTML -документ не является исключением. Здесь точно также нужно правильно расположить каждый элемент. Текст, прежде всего, следует разбить на абзацы. Он не должен выглядеть как сплошное полотно.

Чтобы это сделать, надо научиться пользоваться тегами. Тег – элемент документа, который указывают браузеру, как следует показывать страницу. Все, что внутри тега называется содержимым этого тега. Новый абзац в HTML документе следует делать с помощью тега

Также нужен закрывающий тег в конце абзаца

Чтобы форматирование текста было интереснее, ему можно придать дополнительные свойства с помощью CSS . Причем, свойства можно задать как всему документу в целом, так и отдельным тегам. Так, тегу

Можно дополнительно указать шрифт, размер, отступ по всем сторонам и ряд других свойств.

Свойство font-family подскажет браузеру, какой будет использоваться шрифт, а text-indent укажет на размер отступа. Причем, значение может указываться как в пикселях, так и в процентах или в прочих единицах измерения.

Есть и другие интересные свойства. Например, text-align задает выравнивание текста, который по умолчанию выстраивается по левому краю, но верстальщик может изменить это состояние.

Допустимо использовать одно из четырех значений:

Left – Текст выравнивается по левому краю. Справа текст получается неровным.

Right – Текст выравнивается по правому краю, а неровным становится левый.

Center – Текст выравнивается по центру. Оба края остаются неровными. Как правило, свойство используется для заголовков.

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

Но и это еще не все! Здесь, также можно изменить расстояние между словами с помощью свойства word-spacing и интервал между строк с помощью letter-spacing .

Чтобы форматирование текста осуществлялось должным образом, в HTML предусмотрена целая группа тэгов:

^и . Тег верхнего индекса.

_и . Тег нижнего индекса.

И

. Текст отображается на экране точно также как пишется. (Пользоваться этим тегом следует для отображения программного кода, в остальных случаях считается «дурным тоном».)

и . Наклонный текст.

и . Полужирный текст.

и . Содержимое контейнера будет отображаться кодовым текстом.

и . Моноширинный текст.

Аббревиатура.

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

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

Для форматирования текста в документах HTML присутствуют и другие теги. Например, тег