Очевидные вещи, которые выделил для себя. Хотелось бы, чтоб грамотные люди дополнили этот небольшой список. Цель — сделать код и свой, и других — более красивым, валидным, легко понимаемым и семантически грамотным.
В основном это бывает нужно, для улучшения восприятия текста, точнее для форматирования одного элемента. Поэтому, когда нам нужно разделить несколько элементов или просто, чтоб новый элемент был в новой строчке, нужно использовать блочный элемент (div, p, h1..., у которых по умолчанию css-свойство display:block, но при этом, старайтесь не плодить лишних элементов). И если нужно сделать отступ, не нужно вставлять десять <br>, а нужно описать в css свойство margin.
Это нужно в исключительных случаях, когда место уникальное. Почти всегда нужно использовать css-класс со свойствами вынесенными в css-файл. И даже если вам нужно спрятать элемент (display:none), лучше создать универсальный класс, (например css: .hidden {display:none;}), и писать <span class=”error hidden”>.
В описании класса, если у вас не применяется какое-то свойство, не нужно писать !important, чаще всего достаточно впереди дописать родительский селектор, и желательно — class, а не id.
<CENTER>, <FONT>, border, color, cellpadding, cellspacing, width (для таблиц)
Все они заменяются свойствами в CSS, поэтому не используйте вышеперечисленные элементы. Также, атрибут name для XHTML не валидный — его не нужно использовать (все делается через id).
Специально, чтоб описывать назначение инпута есть элемент <label> (в HTML5 для этой цели можно использовать атрибут placeholder). Поэтому везде, где есть input, почти всегда, должен быть <label for=”input_id”>.
Старайтесь предвидеть возможность переноса слов и, где это нужно, используйте чтобы предотвратить разрыв. Если контент динамический и нужно держать его одной строчкой, можно использовать css-свойство, которое предотвращает перенос слов в новую строку — white-space:nowrap;
Справа должна быть наиболее вероятная для нажатия кнопка. (Например 1.Cancel 2.Ok), это не относится к выводу информации — впереди должно быть самое важное. Но поскольку пользователь проверяет все возможные действия, то не нужно заставлять его возвращаться назад, даже взглядом.
Старайтесь придерживаются правила — отдельный элемент — новое предложение и соответственно — пишите его с заглавной буквы (Submit, Order now). Также не нужно писать целиком заглавными слово, предложение или абзац. Если это нужно, есть css-свойство text-transform:uppercase;
Не подчеркивайте никакие элементы кроме ссылок. Для выделения используйте <strong>, <em> с соответствующими им css-свойствами font-weight:bold, font-style:italic или изменяйте сам шрифт. Если семантически фрагмент не выделяется, а только визуально, используйте <span>.
Сюда не вошли, может, более очевидные вещи, такие как форматирование или как выбирать названия для id элементов, но это относиться, на мой взгляд, к стилю, а не к культуре написания кода. CSS может и не нужно всем знать досконально, но структуру HTML-документа должны понимать все разработчики.
Надеюсь, данная заметка будет полезна и дополнена/исправленна Вашими коментариями.
Использование тега <br />
В основном это бывает нужно, для улучшения восприятия текста, точнее для форматирования одного элемента. Поэтому, когда нам нужно разделить несколько элементов или просто, чтоб новый элемент был в новой строчке, нужно использовать блочный элемент (div, p, h1..., у которых по умолчанию css-свойство display:block, но при этом, старайтесь не плодить лишних элементов). И если нужно сделать отступ, не нужно вставлять десять <br>, а нужно описать в css свойство margin.
Использование атрибута style и свойство !important
Это нужно в исключительных случаях, когда место уникальное. Почти всегда нужно использовать css-класс со свойствами вынесенными в css-файл. И даже если вам нужно спрятать элемент (display:none), лучше создать универсальный класс, (например css: .hidden {display:none;}), и писать <span class=”error hidden”>.
В описании класса, если у вас не применяется какое-то свойство, не нужно писать !important, чаще всего достаточно впереди дописать родительский селектор, и желательно — class, а не id.
Устаревшие элементы и атрибуты HTML
<CENTER>, <FONT>, border, color, cellpadding, cellspacing, width (для таблиц)
Все они заменяются свойствами в CSS, поэтому не используйте вышеперечисленные элементы. Также, атрибут name для XHTML не валидный — его не нужно использовать (все делается через id).
Элемент <label>
Специально, чтоб описывать назначение инпута есть элемент <label> (в HTML5 для этой цели можно использовать атрибут placeholder). Поэтому везде, где есть input, почти всегда, должен быть <label for=”input_id”>.
Неразрывный пробел и перенос слов
Старайтесь предвидеть возможность переноса слов и, где это нужно, используйте чтобы предотвратить разрыв. Если контент динамический и нужно держать его одной строчкой, можно использовать css-свойство, которое предотвращает перенос слов в новую строку — white-space:nowrap;
Расположение кнопок
Справа должна быть наиболее вероятная для нажатия кнопка. (Например 1.Cancel 2.Ok), это не относится к выводу информации — впереди должно быть самое важное. Но поскольку пользователь проверяет все возможные действия, то не нужно заставлять его возвращаться назад, даже взглядом.
Названия колонок, кнопок, действий
Старайтесь придерживаются правила — отдельный элемент — новое предложение и соответственно — пишите его с заглавной буквы (Submit, Order now). Также не нужно писать целиком заглавными слово, предложение или абзац. Если это нужно, есть css-свойство text-transform:uppercase;
Подчеркивание и выделение
Не подчеркивайте никакие элементы кроме ссылок. Для выделения используйте <strong>, <em> с соответствующими им css-свойствами font-weight:bold, font-style:italic или изменяйте сам шрифт. Если семантически фрагмент не выделяется, а только визуально, используйте <span>.
Сюда не вошли, может, более очевидные вещи, такие как форматирование или как выбирать названия для id элементов, но это относиться, на мой взгляд, к стилю, а не к культуре написания кода. CSS может и не нужно всем знать досконально, но структуру HTML-документа должны понимать все разработчики.
Надеюсь, данная заметка будет полезна и дополнена/исправленна Вашими коментариями.
