Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Варианты верстки
 
 автор: Владимир55   (12.03.2012 в 18:40)   письмо автору
 
 

Заданы стили:
.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>


Во втором варианте комбинация с точками
.v1, .v2 
несколько смущает.

Что правильно?
(Или всё неверно?)

  Ответить  
 
 автор: cheops   (12.03.2012 в 19:17)   письмо автору
 
   для: Владимир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 (только придется сделать усилие, чтобы запомнить их).

  Ответить  
 
 автор: Владимир55   (12.03.2012 в 21:13)   письмо автору
 
   для: cheops   (12.03.2012 в 19:17)
 

что обозначают left и center вы вряд ли забудете и наверняка еще не раз и не два используете эти классы в верстке

Это мудрое решение! Добавить еще два оставшихся вида выравнивания и это будет типовым набором!

А эти обозначения - left, center, right и justify - ни с какими зарезервированными или стандартными обозначениями не совпадают?

Обозначение классов словами .left - .justify чего-то другого не нарушат?

  Ответить  
 
 автор: cheops   (13.03.2012 в 00:03)   письмо автору
 
   для: Владимир55   (12.03.2012 в 21:13)
 

>Обозначение классов словами .left - .justify чего-то другого не нарушат?
Нет, все должно быть нормально, и валидаторы пропустят и на практике ни разу с трудностями не сталкивался (в том числе и из JavaScript).

  Ответить  
 
 автор: deimand   (12.03.2012 в 19:25)   письмо автору
 
   для: Владимир55   (12.03.2012 в 18:40)
 

Всегда первым пользовался, очень удобно. Описав почти все самые распространеные стили один раз можно "набирать" их через пробел практически для любых элементов и не писать дополнительный css.

Другими словами, стиль "v" я бы разобрал на 4-5 отдельных свойств с короткими названиями и так же их перечислил бы в классе.

Правильно это или нет - это к знатокам, но google такое практикует, плюс этот подход хорошо минимизирует исходный css файл. Для не очень сложных дизайнов у меня выходит менее килобайта css, я его даже в отдельный файл не выношу.

  Ответить  
 
 автор: Sfinks   (12.03.2012 в 20:55)   письмо автору
 
   для: Владимир55   (12.03.2012 в 18:40)
 

Допустимы оба варианта, но первый симпотичнее ) Особо подход deimand'a нравится. Почему-то сам так не делал раньше. Теперь буду )
___
[UPD] Вот только не выносить в отдельный файл... я бы все равно вынес. При включенном кешировании, че его грузить 100 раз?

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования