Верстка

18-08-2019

1. Верстка

Главный тег Никакой логики в атрибуте id Кастомные атрибуты Обработчики событий Пробелы и переводы строк CSS1. Короткие стилевые правила Не использовать

HTML

Вот несколько главных правил при верстке UI компонента:

Правило 1. Главный тег. С точки зрения HTML структуры компонент должен быть либо одним тегом, либо, если компонент сложный, несколькими тегами, объединенными одним тегом пусть даже не несущим никакой смысловой нагрузки. Так, например, в нашем случае верстка будет выглядеть следующим образом:

Здесь внешний div не имеет никакой смысловой нагрузки, (смысл имею только поле ввода и две кнопки) он нужен только как объединяющий тег для смысловых тегов компонента. Объединяющий тег нужен для многих целей, самая главная их них – у каждого UI компонента должен быть id, который связывает HTML часть с JS частью. То есть у каждого JS компонента будет уникальный id и точно такой же будет у главного тега HTML структуры представляющий этот компонент. Таким образом:

this.mainTag = document.getElementById(this.id);

Правило 2. Никакой логики в атрибуте id. Никогда не закладывайте в id-шники никакую логику. Вот, например, характерное рассуждение:

В JavaScript'е самая быстрый способ обратиться к DOM узлу – это по его id-шнику. А я как раз хочу получить ссылку на кнопочки. Дайка я им тоже поставлю id-шники.

В итоге мы получаем, что в id-шнике зашита некая дополнительная информация, а значит, возникает двойственность информации, ведь найти кнопки плюс и минус можно и по-другому:

Первая кнопка – это первый (отсчет от нуля) ребенок главного тега. Вторая кнопка – это второй ребенок главного тега. Вывод: нужно пользоваться встроенными в DOM механизмами навигации, а не добавлять логику к id-шникам. Подробнее о способах поиска DOM узлов в главном теге см. в главе "Оживление" компонента.


Смотрите также:
 Artmoney
 Сделал сайт. Что дальше
 Русская версия ICQ 7.7 бесплатно
 QIP Mobile
 Спутниковый интернет, спутниковое телевидение

Добавить комментарий:
Введите ваше имя:

Комментарий:

Защита от спама - решите пример:


Онлайн-игры для социальных сетей:

Понравились обзоры? Читайте еще!

Новые обсуждения на форуме:

Парк аттракционов "Сегодня парки отдыха практически повсеместно вытесняются тематическими парками, хотя обычно эти два определения смешивают.."
Зачем надо учиться играть в шахматы? "Шахматы долгое время считались игрой королей и аристократов.."