Skip to content

Commit

Permalink
От Единиц измерения до Cокращённой записи
Browse files Browse the repository at this point in the history
  • Loading branch information
Ser-Gen committed Dec 17, 2012
1 parent e6f1836 commit 7580545
Showing 1 changed file with 10 additions and 11 deletions.
21 changes: 10 additions & 11 deletions README Russian.md
Original file line number Diff line number Diff line change
Expand Up @@ -384,35 +384,34 @@

## Единицы измерения

Мы используем различные методы для задания размеров интерфейса: проценты, пиксели, `ems`, `rems` или вообще не задаем единицы измерения.
Я использую сочетание методов задания размеров интерфейса: проценты, пиксели, `ems`, `rems` или вообще не задаю единицы измерения.

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

Размеры шрифтов я устанавливаю в `rem` c запасным решением с использованием пикселей. Этот метод предоставляет доступность контента как с `em` и уверенность при использовании пикселей.
Простой Sass миксин для одновременной работы с пикселями и `rem` (вы должны определить переменную `$base-font-size` ранее в стилях):
Размеры шрифтов я устанавливаю в `rem` c запасным решением с использованием пикселей. Этот метод предоставляет доступность контента как с `em` и уверенность при использовании пикселей. Вот простой Sass-миксин для одновременной работы с пикселями и `rem` (вы должны определить переменную `$base-font-size` ранее в стилях):

@mixin font-size($font-size){
font-size:$font-size +px;
font-size:$font-size / $base-font-size +rem;
}

Я использую пиксели только для элементов, имеющих размеры и вне контекста сайта — в основном, это картинки и спрайты.
Я использую пиксели только для элементов, имеющих размеры и вне контекста сайта — в основном, это картинки и спрайты, чьи размеры изначально заданы в этих единицах.

### Типографские единицы измерения
### Размер текста

Я составил список классов (похожих на модульную сетку) для задания размера текста. Эти классы могут быть использованы стилизации текста в двухцепочечной иерархии. Моя статья «[Pragmatic, practical font-sizing in CSS](http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css)» расскажет вам, как это работает.

## Cокращенная запись
## Cокращённая запись

**Сокращенную запись следует с осторожностью.**
**Сокращённую запись следует использовать с осторожностью.**

Это может показаться заманчивым использовать правила похожие на `background: red;` но делая это, мы на самом деле говорим: «Я хочу, чтобы фоном была не одна картинка скролящуюся, спозиционированную вверх и влево и повторяющуюся по X и Y и чтобы цвет фона был красный». В девяти случаях из десяти это не высовет никаких проблем, но в 10% обязательно доставит достаточно неприятностей, чтобы не использовать сокращенные записи. Вместо этого используйте `background-color: red;`.
Это может показаться заманчивым использовать правила похожие на `background: red;`, но делая это, мы на самом деле говорим: «Я хочу, чтобы фоном не было скролящейся, находящейся сверху-слева и повторяющейся по горизонтали и вертикали картинки и чтобы цвет фона был красный». В девяти случаях из десяти это не вызовет никаких проблем, но в 10% обязательно доставит достаточно неприятностей, чтобы не использовать сокращенные записи. Вместо этого используйте `background-color: red;`.

Например, ситуация с правилом `margin: 0;` — оно ясное и короткое, но черезчур **специфичное**. Если вы на самом деле хотите сделать отступ снизу от элемента, то гораздо более подходящим будет использовать `margin-bottom: 0;`.
Например, ситуация с правилом `margin: 0;` — оно ясное и короткое, но черезчур **точное**. Если вы на самом деле хотите воздействовать на нижний отступ элемента, то гораздо более подходяще будет использовать `margin-bottom: 0;`.

Старайтесь сохранять чёткое представление о свойствах, которые вы устанавливаете и следите за тем, чтобы случайно не сбросить свойства других элементов, используя сокращенную запись. Например, если вы хотите сбросить нижний отступ, то нет никакой необходимости в агрессивном сбрасывании всех отступов с помощью `margin: 0;`.
Старайтесь сохранять чёткое представление о свойствах, которые вы устанавливаете и следите за тем, чтобы случайно не сбросить свойства других элементов, используя сокращенную запись. Например, если вы хотите сбросить нижний отступ, то нет никакой необходимости в сбрасывании всех отступов с помощью `margin: 0;`.

Сокращённая запись сама по себе хороша, но легко используется неправильно.
Сокращённая запись хороша, но ей легко злоупотреблять.

## Идентификаторы

Expand Down

0 comments on commit 7580545

Please sign in to comment.