Как правильно оформлять HTML код?

Question

[Александр]

Прочитал статью (перевод) "Руководство по оформлению HTML/CSS кода от Google".
Собственно, вопросы:
1.Действительно ли ипользуют подобные записи:

<ul>
  <li>Some text
  <li>Some text
  <li>Some text</li>
</ul>

А также отказ от header и body(если не применяются к тому стили)?
2.И имеет ли значение, сколько пробелов используется в ТАБе (у меня 4, рекомендуют 2, а то и 1), если все это можно впоследствии с помощью каких либо плагинов оформить, а то и вовсе минифицировать, избавившись от различных пробелов и кавычек, которые не обязательны, но удобны для чтения и восприятия?
_________________________________________________________________
Вопросы не по статье:
3. Используют ли !important в CSS, или же его использование означает изначально неправильное оформление (пересечение стилей)?
4. Можно ли для своих нужд кастомизировать размеры сетки Bootstrap, если та не подходит по дефолтным значениям к макету?
5. Где можно почитать о БЭМ с хорошими примерами (не спецификацию)?
P.s. Я новичок, так что не закидывайте помидорками сильно =) Если где-то ступил - буду рад выслушать!

Comments

[Сергей delphinpro]

Имейте ввиду, что гугл — это огромная посещаемость, они экономят на каждом байте. Отсюда вывод о незакрытых тегах — делайте как удобно, гугл не указ.
То же самое с табами. Если вы используете именно табы (\t), то без разницы как настроите свой редактор для отображения. Если пробелы, то так как принято в вашей команде. А пишут так, как нравится. Я люблю четыре пробела в html и javascript и два пробела в css/scss.

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

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

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

Answer 1

[Dima Polos]

Окей, гугл, давай с тобой поспорим))
1. Насчет не закрытых тегов, да, кто-то использует, но неужели так сложно его закрыть? Тем более, что закрытый тег ошибкой 1000% не будет, а вот незакрытый... Насчет body, тоже лучше оставить как есть. Для читаемости, ИМХО, закрытый тег лучше. + к сказанному - это рекомендация. Правило оформление кода важно если Вы в команде, и там так принято, тогда да, как сказали - так и пишем или увольняемся на вольные хлеба)
2. Опять же, если в команде принято 2, то 2, мне удобно 4 и меня в этом не ограничивают, так что я за 4ку, не 1, не люблю код плоский, как доска. 2 советуют, чтобы код далеко не уезжал при вложенности.
3. Я вот у Ильи Климова слышал неоднократно фразу, которая понравилась, думаю, это не его прям фраза, чтоб копирайт ставить, но, ближе к делу: "Все есть яды, все есть лекарства". !important надо употреблять также, как употребляете лекарства, если заболел, то что делать, если надо. Когда надо, тогда надо, но поверьте, надо крайне редко, и от !important, по умолчанию, откажитесь.
4. Бутстрап вроде бы нет, сетку нельзя. НО! Я пользуюсь Smartgrid. Полностью гибкая - пишете конфиг, меняете все параметры сетки, межколоночный отступ, количество колонок, препроцессор, парадигму "mobile first"/"desktop first", breakpoints, размеры контейнера....
5. Про БЭМ и писано переписано, почему бы не из первых уст?
PS желаю успехов в становлении профессионалом!

Comments

[Сергей delphinpro]

Бутстрап вроде бы нет, сетку нельзя.

Ну ладно вам. https://github.com/twbs/bootstrap/blob/master/scss...

[Dima Polos]

Сергей delphinpro, да может, не в курсе, не часто работаю с ним.

[Dima Polos]

Сергей delphinpro, буду знать, спасибо!

[Александр]

Спасибо за ответ =)
На самом деле, все, что касается офрмления - это не вопрос лени(сложности), а "оптимизации", как я понял.
А так, мне и самому приятнее писать читабельный код =) Да и плагины сами теги закрывают - не отключать же их ^_^
Ну а сами вопросы появились из желания узнать реалии разработки - а то уж слишком нереальными казались подобные советы, идеи =)

[Dima Polos]

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

Answer 2

[archelon]

1. незакрытые теги — допускается, но лучше не надо.
в некоторых случаях может улучшить читабельность кода.
2. кол-во пробелов — без разницы, но желательно соблюдать единый стиль.
3. !important — в самых крайних случаях, когда на скорую руку нужно что-то поправить, и пообещать себе, что обязательно, как только будет время, все начисто переписать :-)

Comments

[Dima Polos]

Пообещал и забыл, как-то так это работает)

Answer 3

[Alfieros]

1. Закрытие тегов обязательно для очистки кармы. Не критично, браузеры понимают, но ваш идеал это чистая консоль и чистый лог валидатора. header, body - так же нужно закрывать.
2. 4 пробела в табе используют в препроцессорах html, к примеру pug/jade - здесь это обязательно. В обычной верстке используйте так, как вам удобно. Чтобы проще было ориентироваться в своем коде. В конечном итоге на продакшен заливается минифицированный HTML/CSS/JS, для оптимизации скорости загрузки.
3. Этот вопрос больше подходит к самой методологии БЭМ. Когда у вас есть 1 основной блок с некими стандартными свойствами и вы используете к нему префикс классы для описания дополнительных свойств. Для того, чтобы сам блок можно было использовать неоднократно с разными свойствами. Для этого избегают глобальных свойств блока, если они могут изменяться. Соответственно неправильное понимание структуры и описания глобальных свойств блоку, вызывают !important, когда вы записываете префикс класс для блока, где нужно изменить уже записанное глобально свойство, к примеру фон блока.
4. Откажитесь в начале от Bootstrap сетки в пользу flex/grid. Для того чтобы в целом разобраться как работают стили. Учитесь в начале делать правильно и хорошо. Плохо делать вы и так умеете. К Bootstrap обычно обращаются в быстрой развертке проекта, и в основном для каких-то проектов где никто не будет париться на тему поддержки кода. Сделали и забыли.
5. - Статей о БЭМ в интернете полно, основной принцип БЭМ я описал в 3 пункте.

Comments

[Сергей delphinpro]

Закрытие тегов обязательно для очистки кармы.

Не преувеличивайте. Есть ряд тегов с необязательным закрытием. Законно, по спецификации. А также есть ряд необязательных тегов, к коим, в частности относятся html и body.
Нужно лишь помнить эти теги. Однако, чтобы случайно не запороть верстку, лучше все же иметь привычку закрывать все теги. А еще лучше использовать продвинутый редактор, который сам будет закрывать ваши теги.

[Alfieros]

Сергей delphinpro,

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

Да, они не обязательны. Но при работе с кодом возникнут проблемы с форматированием. Так что это прерогатива каждого делать ему так или нет. Дело в удобстве. Плагин на закрытие тегов конечно же будет удобен и полезен всем, для ускорения работы. А лучше использовать препроцессор, тот же pug, чтобы забыть об этом.