Маленькие секреты для удобной и быстрой вёрстки

css, html

Однажды, получив совет от Google по поводу уменьшения CSS кода, стал пытаться минимизировать кот, например, практически не использую префиксы для других движков, в надежде на то, что со временем браузеры начнут читать код одинаково. Одинаковые параметры вывожу в несколько строк, просто перечисляя классы, где они содержатся.

Если у нас есть одинаковые блоки, например, внешнее отображение полной новости, короткой новости и комментария одинаково, то можно не расписывать всё отдельно, а написать вместе, а разные параметры отдельно, например так:

.fullnews, .shortnews, .comments {
font-size: 18px;
padding: 3px 5px 6px;
background: rgba(255,255,255,0.9);
vertical-align: top;
box-shadow: 0 3px 8px rgba(0,0,0,.6);
}

.fullnews {
width: 100%;
}

.shortnews {
width: 33.333%;
display: inline-block;
}

.comments {
width: 90%;
margin: 0 auto;
}

Как видите из примера, код гораздо компактней, чем если бы мы к каждому классу давали одинаковое описание.
Еще одним интересным способом является использование нескольких классов. К примеру, у вас есть один класс, который вам нужен, есть еще один, который нужен, но в данном случае нужно их объединить. Многие пишут новый класс совмещая параметры двух классов, а можно воспользоваться двумя классами через пробел:

<div class="class_1 class_2"></div>

В данном случае у нас будет использоваться два класса одновременно.
Недавно столкнулся с одним очень интересным примером. Мне нужно было, чтобы в одном блоке разный текст был разного размера. Конечно, можно каждому p дать класс. Но тогда код увеличится как в CSS, так и в HTML:

<div class="block">
<p class="class_1">Основной текст</p>
<p class="class_2">Дополнительный текст</p>
</div>

.block {
width: 200px;
margin: 0 auto;
display: inline-block;
}

.class_1 {
font-size: 18px;
}

.class_2 {
font-size: 11px;
}

Так будет выглядеть наш блок. И в таком виде его сверстает 90% людей, занимающихся вёрсткой.
Но оказывается, тот же p можно группировать.

<div class="block">
<p>Основной текст</p>
<p>Дополнительный текст</p>
</div>

.block {
width: 200px;
margin: 0 auto;
display: inline-block;
}

.block p {
font-size: 18px;
}

.block p+p {
font-size: 11px;
}

Вы можете сказать, что данный блок остался таким же по размеру. Это не совсем так. Во-первых, исчезли пара байт потеряв слово class и описание класса. А в вёрстке нам важен каждый байт. Во-вторых, если блок содержит изображение во всю свою длину, то в классе block нет возможности выставить шрифт, цвет шрифта, и всё, что с ним связано. А это значит, что используя первый вариант, вам придется использовать в каждом классе данные цвета, тени и т.п. А это уже нарушает первый наш пример в статье. В данном случае, в первом p можно написать все параметры, а в p+p только то, что нужно изменить.
Продолжение следует.

Уважаемые читатели! Если вы обнаружили в тексте ошибку, не поленитесь, выделите слово и нажмите CTRL+Enter. Сделаем язык чище!

  • 0
comments powered by Disqus

Ваше Имя:

Ваш E-Mail:

Или войтите с помощью социальных сетей

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
  • Введите два слова, показанных на картинке: