| |
|
|
| | Заданы стили:
.v {
font-family: Verdana, Geneva, sans-serif;
font-size: 48px;
font-style: normal;
font-weight: bolder;
color: #AE6FB9;
}
.v1 {
text-align: left;
}
.v2 {
text-align: center;
}
|
Требуется составить код на две строки, чтобы у обеих строк был шифт, указанный в селекторе v, но при этом в одной строке выравнивание было слева, а в другой по центру.
Вижу первый вариант, не требующий изменения селекторов:
<p class='v v1'>Выравнивание слева</p>
<p class='v v2'>Выравнивание по центру</p>
|
И второй вариант:
.v1, .v2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 48px;
font-style: normal;
font-weight: bolder;
color: #AE6FB9;
}
.v1 {
text-align: left;
}
.v2 {
text-align: center;
}
<p class='v1'>Выравнивание слева</p>
<p class='v2'>Выравнивание по центру</p>
|
Во втором варианте комбинация с точками несколько смущает.
Что правильно?
(Или всё неверно?) | |
| |
|
|
| |
|
|
| |
для: Владимир55
(12.03.2012 в 18:40)
| | | >несколько смущает.
Все нормально, у вас же и в первом случае класс .v1 и .v2 с точками, только тут они перечислены через запятую.
Оба варианта правильны, смотрите как вам удобнее, но во втором случае у вас только два класса, а в первом их три получилось - это плохо, просто потому, что энтропия выше (больше элементов, связей, обозначений, больше хаоса), а вы занимаетесь обратной задачей - созиданием, поэтому лучше использовать второй вариант. Хотя два класса в атрибуте class тоже имеют место быть и иногда удобнее донести эту мысль в верстке, только v, v1 и v2 ненаглядны. Вот если бы было так
.v {
font-family: Verdana, Geneva, sans-serif;
font-size: 48px;
font-style: normal;
font-weight: bolder;
color: #AE6FB9;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
<p class='v left'>Выравнивание слева</p>
<p class='v center'>Выравнивание по центру</p>
|
я бы уже отдал предпочтение первому варианту, так как он более самодокументируемый. Что такое v1 и v2 вы спустя некоторое время уже не вспомните, а вот что обозначают left и center вы вряд ли забудете и наверняка еще не раз и не два используете эти классы в верстке (даже не заглядывая в css-файл), поэтому их выгодность резко возрастает (они вдвоем заменять собой массу других строк). Если left и center смущают совпадением со значениями стилей можно использовать lft и cnt (только придется сделать усилие, чтобы запомнить их). | |
| |
|
|
| |
|
|
| |
для: cheops
(12.03.2012 в 19:17)
| | | что обозначают left и center вы вряд ли забудете и наверняка еще не раз и не два используете эти классы в верстке
Это мудрое решение! Добавить еще два оставшихся вида выравнивания и это будет типовым набором!
А эти обозначения - left, center, right и justify - ни с какими зарезервированными или стандартными обозначениями не совпадают?
Обозначение классов словами .left - .justify чего-то другого не нарушат? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(12.03.2012 в 21:13)
| | | >Обозначение классов словами .left - .justify чего-то другого не нарушат?
Нет, все должно быть нормально, и валидаторы пропустят и на практике ни разу с трудностями не сталкивался (в том числе и из JavaScript). | |
| |
|
|
| |
|
|
| |
для: Владимир55
(12.03.2012 в 18:40)
| | | Всегда первым пользовался, очень удобно. Описав почти все самые распространеные стили один раз можно "набирать" их через пробел практически для любых элементов и не писать дополнительный css.
Другими словами, стиль "v" я бы разобрал на 4-5 отдельных свойств с короткими названиями и так же их перечислил бы в классе.
Правильно это или нет - это к знатокам, но google такое практикует, плюс этот подход хорошо минимизирует исходный css файл. Для не очень сложных дизайнов у меня выходит менее килобайта css, я его даже в отдельный файл не выношу. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(12.03.2012 в 18:40)
| | | Допустимы оба варианта, но первый симпотичнее ) Особо подход deimand'a нравится. Почему-то сам так не делал раньше. Теперь буду )
___
[UPD] Вот только не выносить в отдельный файл... я бы все равно вынес. При включенном кешировании, че его грузить 100 раз? | |
| |
|
|
