Насколько семантична ваша разметка XHTML / CSS?

Question

Я думаю, что я довольно хорошо использую семантическую разметку на своих страницах, но у меня все еще есть несколько таких классов:

/**** Aligns ****/
.right_align  { text-align: right; }
.left_align   { text-align: left; }
.center_align { text-align: center; }

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

Answer 1

Почему вы хотите выровнять текст?

Ответом на вопрос является имя идентификатора или класса, который вы должны иметь для своего селектора. Вы хотите выровнять это правильно, потому что это цена?

table .price {
  text-align: right
}

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

Я, вероятно, перестарался, но мой последний рабочий проект был довольно близок к 100% семантическому - все, что мне было нужно, не являлось семантическим (скажем, div-наполнитель, без которого я не мог обойтись для требования макета), я добавил динамически, используя jQuery .

Answer 2

Я пытаюсь понять, почему я хочу, чтобы столбец выравнивался по правому краю в таблице. Например, если столбец содержит суммы в валюте, я бы использовал стиль с именем currency вместо right_align.

Answer 3

Если вам нужна тесная связь между ячейками таблицы и выравниванием, вы можете просто присвоить атрибут style="text-align:right" непосредственно тегу. Нет смысла проходить дополнительный уровень косвенности через класс, если вы все равно не используете его для уровня абстракции.

Answer 4

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

Редактировать: Люди, кажется, неправильно понимают мою точку зрения в этом. Вы должны использовать семантическую разметку, где это возможно. Однако есть случаи, когда это действительно просто стилистический выбор, и нет данных, присущих данным, которые вы можете использовать для их описания или классификации. Это наиболее типично для больших разделов табличных данных, особенно если они генерируются динамически.

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

Answer 5

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

Я использую следующие обозначения

matcher,¶
matcher¶
{¶
··attribute:·property;¶
}¶

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

Это связано с тем, что DIFF в SCM ориентирован на ряды, и если у вас есть все содержимое в 1 ряду, вы получаете 2 варианта, один комплект шланга или другой.

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

Для страховки найдите опечатки:

matcher 
matcher, 
{
    attribute property 
  attribute
}

В этом случае код, который просто проверяет соответствие пробелов и разделителей, также обнаруживает ошибки кодирования !.

Answer 6

100% семантическая разметка - глупая цель. Ваш графический дизайнер скажет: «Давайте правильно выровняем это», и причина будет «потому что так это выглядит хорошо». Что вы должны сделать, добавить класс div-ов? Просто выровняйте это и продолжайте жить! :)