10 важных советов от CSS мастеров

советы css

От Автора: Касаемо CSS в Сети полно ресурсов и мнимых “полезных советов экспертов”. Они от непроверенных, самопровозглашенных “гуру”, не признанных в мире веб-дизайна. Так как они могут быть похожими на правду, то откуда нам узнать, что совет по CSS – это надежный источник или непроверенное, на «скорую руку» слепленное решение?

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

Ниже приведены 10 отличных CSS советов, которые любой веб-разработчик или дизайнер может признать полезными, содержательными или стимулирующими. Рассмотрите эти мудрые рекомендации от квалифицированных профессионалов, которые прошли длительный и сложный путь к непревзойденному мастерству дизайна. Это – настоящие мастера CSS. Отведайте глоток их знаний и примените их знания в своем очередном дизайн-приключении.

1. Ваш CSS должен быть простым – Peter-Paul Koch (Питер-Поль Кох)


Что меня больше всего достает в складе ума дилетантов от CSS – то, как активно они ищут непростых решений. Ищите, и обретете, и если хотите сложностей, они станут вам поперек горла. Не отстанут от вас, а также и не помогут вам.


Питер-Поль Кох – крестный отец веб-разработки. Так как он является разработчиком старой школы и основная масса образцов в его портфолио пришлась на 1998-2002гг., он работал с такими тяжеловесами, как Apple. Он написал книгу по javascript, но даже и секунды не думайте, что ему нечего сказать о CSS.

Опасность CSS хаков.

Кох говорил о том, что каждый дизайнер и веб-разработчик должен усердно следовать правилу: Ваш CSS должен быть простым. Добиться простоты нелегко, особенно в CSS-дизайне. Можно найти несчетное множество особенностей реализации CSS в конкретном браузере, при помощи CSS-хаков во всех браузерах станицы выглядят одинаково, невзирая на версию или тип. Однако использование множества CSS-хаков имеет существенный недостаток. Поскольку веб-браузеры развиваются, так гораздо труднее успевать за переменами.

Кох высказывает интересное соображение по поводу разработки Сети. Интернет в целом очень непредсказуемое место, и попытки спрогнозировать направление его работы в будущем – весьма невыгодная линия поведения.


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

Браузеры не поддерживают CSS в совершенстве; это может привести в бешенство, особенно тех, кто только начал изучение CSS. Несмотря ни на что, CSS-хаки – это не решение проблемы. Принятие того пути, по которому сейчас идет работа Сети – лучшее, что можно сделать, потому что так ваши сайты останутся простыми.


Питер-Поль сделал ударение на том, что кажется верным не только для CSS, но и для веб-разработки в целом. Простота – это ключ к эффективному кодированию.

css советы

2. Выполняйте CSS-объявления в одной строке – Jonathan Snook (Джонатан Снук)

Джонатан Снук – невероятно популярный разработчик из г. Оттава (Ottawa) в Канаде, сделавший себе имя в сетевых стандартах и дизайне. Он выступал на престижных конференциях типа SXSW и опубликовал несколько технических ресурсов по дизайну на Sitepoint.

Одна из постоянных идей Джонатана в кодировании CSS состоит в том, чтобы ставить объявления в одну строку.


Разбиение на части может выглядеть более привлекательным, но, конечно, не помогает ничего найти. При поиске чего-либо в таблице стилей самое главное – это массив правил (т.е. часть перед { and } ). Я ищу элемент, id или класс. Расположение всего в одной строке делает просмотр документа намного более быстрым просто оттого, что вы больше видите на одной странице. Когда я нашел массив правил, который искал, найти нужное мне свойство обычно уже несложно, так как их редко бывает слишком много.


Джонатан продолжает свою мысль, давая пример объявлений одной строкой, которая выглядит так:

Хорошо

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Плохо

h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

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

css советы

3. Используйте сокращения CSS – Roger Johansson (Роджер Йоханссон)


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


Роджер Йоханссон знает кое-что о разработке Сети. Шведский веб-дизайнер работает с Интернетом с 1994 и имеет популярный блог о веб-дизайне. Если речь идет о простых и элегантных решениях, то Роджер — один из самых хорошо осведомленных людей в этой области.

Йоханссон написал очень исчерпывающую статью о важности сокращений CSS и дает довольно много примеров того, как их использовать в процессе кодирования CSS. Вот один из примеров:


Использование сокращенной записи для свойств может сэкономить много места. Например, чтобы выставить разные margin для сторон блока, можно использовать это:

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

Но вот это же самое гораздо более эффективно:

margin:1em 0 2em 0.5em;

Тот же самый синтаксис используется и для свойства padding.


Так как скоропись CSS сокращает размеры таблицы стилей, она также помогают организовать и поддержать код несложным. Красивый CSS – это простой CSS.

css советы

4. Дайте возможность блочным элементам естественным путем заполнить пространство – Jonathan Snook (Джонатан Снук).

У мистера Снука есть еще одна ключевая рекомендация, которой должен жить каждый веб-разработчик: дайте возможность блочным элементам заполнить пространство как можно более органически. Если и есть постоянно повторяющаяся тема при разработке CSS, то она звучит так: не заставляйте код делать те вещи, для которых он не предназначен. Это означает избегать CSS-хаков, находя наиболее простые решения.


Мое практическое правило заключается в следующем: если я устанавливаю ширину, я не определяю margin или padding. Таким же образом, если я устанавливаю margin или padding, я не определяю ширину. Работать с блочной моделью иногда такое мучение, особенно если вы имеете дело с процентами. По этой причине я устанавливаю ширину контейнеров, а затем margin или padding для элементов внутри них. Обычно это проходит гладко.


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

css советы

5. Устанавливайте и сбрасывайте float – Trevor Davis (Тревор Дэвис)


Float, возможно, одна из самых важных вещей, которые нужно понять в CSS, но знать, как сбросить float (clear)– так же необходимо.


Тревор Дэвис, может быть, и не такое великое имя в мире веб-дизайна, как Зельдман (Zeldman) или Снук (Snook), но он, конечно, заслуживает упоминания в связи со своим великолепным портфолио веб-разметок. Его блог – прекрасный ресурс для любого веб-разработчика, желающего избавиться от мусора.

Сбрасывайте float

В свою основную статью «6 Важнейших методик CSS, которые нужно знать», Тревор добавил настоящий самородок, который может спасти от головной боли при использовании столбцов в разметке.


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

Так как контейнер имеет margin: 0 auto, мы не хотим его делать плавающим, потому что это будет уводить его в сторону, от места, где он должен быть. Так что, другой способ ограничить плавающий объект – это вставить ограничивающий элемент. В этом случае я просто использую пустой div, установленный на clear: both. В настоящее время имеются другие способы очистить плавающий объект без разметки, но я заметил некоторую противоречивость этого приема, так что я просто жертвую пустым div’ом.


css советы

6. Используйте отрицательный margin – Dan Cederholm (Дэн Сидерхолм)


Иногда легче иметь дело с исключением из правила, чем добавлять объявления ко всем остальным элементам вокруг него.


Компания Дэна Сидерхолма SimpleBits — это энергичная команда дизайнеров. Дэн работал с:

Google

Blogger

MTV

Fast Company

Inc.com

… и множеством прочих выдающихся веб-компаний. К счастью, Дэн передает знания, полученные при работе с этими грандиозными именами, в своем блоге на SimpleBits. Вот практический метод для вас, веб-дизайнеры и разработчики: если Дэн Сидерхолм что-то говорит, вы слушаете. Считайте его цифровым проводником-шерпом, ведущим вас к вершине вашей дизайнерской горы.

Отрицательные margin

В то время, как может казаться алогичным поставить отрицание впереди любого объявления (как margin-left: -5px), в действительности это довольно хорошая идея. Мистер Сидерхолм объясняет, что использовать отрицательные поля для элементов иногда легче, чем изменить каждый аспект дизайна для выстраивания так, как вам нужно.


Бывают ситуации, когда использование отрицательных полей для элемента – самый простой способ «вытолкнуть» его из остальных, рассматривая как исключение из правила для того, чтобы упростить код.


css советы

7. Используйте CSS для центрирования разметки – Dan Cederholm (Дэн Сидерхолм)


«Как я центрирую разметку с фиксированной шириной, используя CSS?» Для тех, кто знает, это просто. Для тех, кто нет, нахождение двух необходимых для завершения работы правил может стать разочарованием.

Неудивительно, что Дэн собирается дважды сделать этот перечень. Центрирование разметки при поверхностном рассмотрении очень простая идея, но по некоторым причинам она не всегда работает настолько легко, как должно работать. Центрирование разметки при помощи CSS может стать тщетной попыткой для новичка, если он никогда раньше этого не пробовал.

У Дэна есть старый и проверенный метод, который он часто использует для того, чтобы достичь идеального состояния центрированной разметки.

#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}

Многие современные дизайнеры полагаются на центрированние разметки, так что использование этого готового метода пригодится веб-разработчикам и дизайнерам.

css советы

8. Используйте правильный DOCTYPE – Jeffrey Zeldman (Джеффри Зельдман)


Вы написали эффективный XHTML и CSS. Вы собираетесь использовать W3C-стандартный Document Object Model (DOM) для управления динамическими элементами страницы. Однако в браузерах, созданных для поддержки тех самых стандартов, ваш сайт падает. Винить в этом, скорее всего, придется неправильный DOCTYPE.


Джеффри Зельдман – один из основателей прекрасного ресурса, сайта A List Apart, учредил и управлял The Web Standards Project, управляет студией дизайна Happy Cog и даже написал книгу по проектированию для веб-стандартов. Короче говоря, Зельдман принадлежит к избранным веб-дизайнерским кругам.

Неверное представление о DOCTYPE

DOCTYPE веб-страницы — один из самых игнорируемых аспектов дизайна. Использование правильного DOCTYPE’а – ключевой момент, и Зельдман объясняет почему.


Использование неполного или устаревшего DOCTYPE’а – или вообще никакого DOCTYPE’а – ставит те самые браузеры в режим “Quirks” (причуды), где браузер предполагает, что вы написали старомодную, неэффективную разметку и код согласно унылым индустриальным нормам поздних 1990-х гг.


Зельдман выделяет важность реального использования DOCTYPE’а и указывает, что вы должны добавить url в объявлении, как здесь:

Если в своих разметках вы находите необъяснимые затруднения, возможно, что проблема в DOCTYPE.

css советы

9. Центрируйте отдельные элементы при помощи CSS – Wolfgang Bartelme (Вольфганг Бартельми)


Центрирование элементов — частая задача при создании вебсайтов. Но для новичков в CSS зачастую что-то вроде головоломки, как центрировать, например, весь вебсайт в браузерах помимо IE.


Вольфганг Бартельми – веб-дизайнер в дизайнерской фирме Bartelme design. У Бартельми один из самых элегантных блогов, и он непрерывно создает прекрасные иконки и дизайнерские работы. Он сделал дизайн блоговой платформы Squarespace и популярного софта MacHeist.

Вольфганг создал учебник, который помогает справиться со сложной задачей центрирования элементов при помощи CSS. Центрированные элементы безумно полезны, но иногда сложно добиться нужного дизайна. Учебник Бартельми гарантирует центрированное расположение при помощи выбора правильного DOCTYPE’а и присоединения магии CSS. Код неприхотливый, позволяет выполнить работу и прекрасно сочетается со стремлением к простоте в CSS.

css советы

10. Используйте команду text-transform – Trenton Moss (Трентон Мосс)

Трентон Мос разбирается в простоте использования. У него собственная компания по веб-юзабилити, которая обучает простоте использования и веб-написанию. Он также пишет для сайтов вроде Sitepoint. Трентон дает прекрасные полезные советы, основанные на своем опыте работы в качестве эксперта по веб-юзабилити.

Общеизвестно, что стили со временем меняются, особенно то, как в вебсайтах отражается текст. Лучшее, что может сделать дизайнер, это в будущем всегда вместо изменения способа отображения текста вручную использовать для изменения внешнего вида текста CSS. Трентон Мосс показывает нам, как добиться этого через использование простой, недооцененной команды CSS, называемой text-transfom


Одна из наименее известных, но действительно полезных CSS- команд – команда text-transfom. Три самых общих значения этого правила таковы: text-transform: uppercase, text-transform: lowercase и text-transform: capitalize. Первое правило превращает все знаки в заглавные буквы, второе обращает в строчные, а третье делает первую букву каждого слова заглавной.


Использование CSS для отображения внешнего вида текста на сайте позволяет изменять его в будущем и обеспечивает логичность по прошествии длительного времени.


Эта команда невероятно полезна для обеспечения последовательности стиля на всем пространстве вебсайта, особенно если у него несколько контент-редакторов. Скажем, ваш стиль требует, чтобы слова в заголовках всегда начинались с заглавных букв. Чтобы обеспечить это, используйте text-transform: capitalize. Даже если редакторы сайта забудут об этом требовании, их ошибка не отразится на сайте.


Хотя text-transfom– это мелочь, добавляемая в разметку css, она может иметь огромное значение в будущем, когда понадобится сделать изменения.

css советы

На этом сборник из десяти CSS советов для вебмастера, закончен, желаю Вам успехов в разработке сайтов.

Автор: Glen Stansberry

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (6)

  1. RodgerFox

    Большое спасибо.

  2. Русаков Вячеслав

    Интересно было прочесть. В последнее время подумываю поднатаскаться в редактировании css-шаблонов.
    Статья — толчок к началу моих действий в этой стороне. Тем более, что начать с фундаментальных правил — очень полезно.
    Спасибо.

  3. Lesha

    Прикольная статья, особенно понравилось «четвертое правило: Дайте возможность блочным элементам естественным путем заполнить пространство – Jonathan Snook (Джонатан Снук)». Действительно нужно попробовать, а то бывает возникают проблемы. а вот интересно что говорят мастера по поводу того, что давайте использовать CSS3, ну и что что в ИЕ он не работает. никто такого рода статей не встречал? ?

  4. Spamol

    В ответ предыдущему комментарию по поводу CSS3, занимаюсь версткой сайтов более 2.5 лет и могу сказать, что пока совсем рано плотно использовать CSS3, если уж совсем невмоготу и нужно реализовать какой-то эффект типо тени за текстом или скругленные углы блока, а привлекать JS или мучиться с CSS лень, то можно использовать св-ва CSS3, но следует учитывать, что любоваться вашими творениями смогут далеко не все, так как пока св-ва CSS3 поддерживают единицы браузеров, да и то, только частично и убедиться в этом можно на сайте htmlbook(точка)ru, там к каждому св-ву есть таблица совместимости с браузерами!

  5. Andrew

    А вот я че-то не понял четвертое правило. Вот у меня есть блочный элемент, мне нужно его выровнять по центру. Я указываю его ширину и margin:0 auto. Так же при позиционировании других блочных элементов приходится добавлять марджин и пэдинг, при том, что указана ширина и высота, так как не все блочные элементы в строке имеют одну высоту. Как быть в этих случаях?

  6. Александр

    правила в одну строку это жесть, так никто уже 100 лет не делает, просто чувак видать забыл что такое табы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree