—»     —»   Различные пути форматирования CSS
  Раздел: CSS/Style Sheets   Нет комментариев  

Различные пути форматирования CSS

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

Форматирование не имеет ничего общего с функциями CSS. Это лишь придание эстетически привлекательного вида коду. Правда, это не значит, что форматирование вовсе не важно. Это все равно что сказать, что художнику нет разницы на каком полотне рисовать. Это влияет на удобство во время написания кода CSS, на легкость при просмотре кода, при его дальнейшем редактировании.

По причине того, что существует множество различных путей форматирования CSS, не существует каких-то жестких правил и рамок, касающихся интервалов и переноса строк. Например:

div        {       width:      50px         }

Это то же самое, что и:

div{width:50px}

Как и:

div

{

      width: 50px

}

Многострочное форматирование

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
}
#navigation_rss li {
    display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
    color: #fffffe;
    text-decoration: none;
    padding: 0px 2px;
    letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
    color: #eed2a1;
    text-decoration: none;
}

Держу пари, что такой вариант наиболее часто применимый. Его очень легко читать, потому что он предоставляется короткими отрывками, именно поэтому обучаемые статьи чаще всего отформатированы именно таким методом. В примере, предоставленном выше, нет пустой строки между закрытием скобки и следующим отрывком, и это на самом деле используется чаще всего.

Многострочное форматирование с расстановкой абзацев

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
}
    #navigation_rss li {
        display: inline;
    }
        #navigation_rss li a:link, #navigation_rss li a:visited {
            color: #fffffe;
            text-decoration: none;
            padding: 0px 2px;
            letter-spacing: -0.05em;
        }
        #navigation_rss li a:hover {
            color: #eed2a1;
            text-decoration: none;
        }

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

Форматирование в одну строку

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

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

Форматирование в одну строку с табуляцией

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

Форматирование в одну строку с расстановкой абзацев

#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol             { list-style: lower-alpha; }
#content-area ul                    { margin: 0 0 0 5px; list-style: none; }
    #content-area ul li             { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li     { background: none; padding: 0; }

Выделенный отрывок кода указывает на то, что в нем содержится информация, дочерняя информации с предыдущего абзаца.

Обычное форматирование в одну строку

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

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1                                    { font-size: 36px; }
h2                                    { font-size: 30px; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        text-align: left; }

Вариации

Форматирование в одну строку может быть выполнено посредством простого открытия последующей скобки на той же строке, что также часто наблюдается в коде PHP:

div
{
    padding: 10px;
}

В многострочном форматировании с табуляцией можно наблюдать открывающуюся скобку в роли разделителя:

#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol          {       list-style: lower-alpha; }
#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }
    #content-area ul li          {       padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li  {       background: none; padding: 0; }

Комбинирование

Комбинирование многострочного и однострочного форматирования может привести только к группированию схожих атрибутов в одной строке:

.navigation_rss_icon {
    position: absolute;
    top: 10px; left: 10px; bottom: 10px; right: 10px;
    font-size: 12px; font-weight: bold;
}

Читаемость vs. Скроллинга

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

Вообще, я считаю многострочный вариант форматирования легким в поиске того или иного отрывка кода, но построчно такой документ занимает намного больше места, раз в 5-8. Но в общем счете, я считаю такие документы менее читаемыми, потому что появляется этот надоедливый вертикальный скроллинг, и вам приходится носиться от одного куска кода к другому. В то время как форматирование в одну строку иногда даже намного удобнее за счет того, что большая часть кода у вас на виду.

Лучший вариант форматирования для себя самого принято считать тот, который представляет большую читаемость и меньший скроллинг. А вообще, смотрите на собственные ощущения комфорта.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 5850   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2020    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031