Vitamin – сервис для выгодной интернет-рекламы
  • Управляйте всеми рекламными кампаниями из одного кабинета
  • Получайте +5% от своих расходов
  • Подключайте и анализируйте рекламные системы в 1 клик

10 советов по CSS, которые позволят оптимизировать вашу таблицу стилей

Советы по css

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

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

1. Оставайтесь организованным от А до Я

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

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

  •      Сброс и оверрайды / Reset & Overrides
  •      Ссылки и типы / Links & types
  •      Основной шаблон
  •      Вторичные элементы шаблона
  •      Элементы и формы
  •      Другое

CSS код

2. Название, Дата и Подпись

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

Подождите … что такое SwatchColors? Ничто иное как палитра цветов вебсайта. За эти годы я обнаружил, что добавление простого списка наиболее распространенных и используемых цветов на сайте в CSS является чрезвычайно полезным во время начального развития и при принятии изменений в дальнейшем. Это избавит вас от необходимости открывать Photoshop и пробовать цвета с дизайном, или посмотреть цвета в стиле руководства сайта (если оно есть). Когда вам нужен HTML код для конкретного цвета, просто прокрутите вверх CSS листа, и скопируйте нужный.

3. Храните все свои темплейты в одном месте и используйте их как основы для новых проектов

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

Вы можете сохранить несколько версий для различных применений: две колонки, блог, верстка, печать, мобильные и так далее. Coda (редактор для OSX) имеет отличную функцию, Clips, которая позволяет легко это сделать. При использовании типичной структуры сайта, идентификаторов и тд, писать новый CSS будет просто безумством, если вы можете использовать уже готовую структуру.

4. Называйте классы своими именами

К примеру, если у меня есть два класса .col-alpha & .col-beta, почему бы их не переименовать в .col-left & .col-right, что является более логичным и позволит проще ориентироваться в коде при дальнейших правках. Думайте о будущем всегда! В следующем году вам, возможно, придется перестроить свой сайт и поменять левую колонку на правую. Если идентификатор говорит левая колонка, следует ожидать, что она всегда будет с левой стороны. Это не оставит вам много места для маневров в дальнейшем.

Одним из основных преимуществ CSS является возможность отделить стиль от содержания. Вы можете полностью изменить дизайн сайта, просто изменив CSS, не касаясь HTML. Используйте более универсальные имена и оставайтесь последовательным. Называйте элементы так, на чем они основаны, а не на то, как они выглядят. Например, .comments-blue менее универсален, чем .comments-бета, и тд.

5. Дефисы вместо подчеркиваний

Старые браузеры иногда глючат при наличии подчеркивания в CSS, или не поддерживают их вообще. Для лучшей совместимости, возьмите за привычку использование дефиса вместо подчеркивания. Используйте #col-alpha, а не #col_alpha.

6. Не повторяться

Группируйте элементы, если это возможно, вместо повторения их. Если ваш h1 и h2 элементы используют один и тот же шрифт, размер, цвет и поля, то группируйте их с помощью запятой. Также используйте шорткоды. Вместо border-top:5px; border-right:5px; border-bottom:5px;border:-left:5px; можно легко использовать сокращение в виде border:5px;

Порядок, в котором CSS понимает ваши параметры идет по кругу: сверху, справа, снизу, слева. Большой круг по часовой стрелке, начиная с полудня. Кроме того, если верхний и нижний, или левый и правый атрибуты те же, вам нужно всего лишь использовать два: border:5px 10px; У нас получится граница сверху/снизу по 5px, и по 10 пикселей справа и слева.

7. Оптимизируйте код

Используя эти советы, вы можете реально сократить размер вашей таблицы стилей. Меньшие загружаются быстрее, и их легче поддерживать и обновлять. Вырежьте то, что вам не нужно и консолидируйте, по возможности. Будьте осторожны при использовании готовых фреймворков. Вы, наверняка, приобретете много “мусора”

Еще один совет для уменьшения обьема файла: вам не нужно указывать единицу измерения при использовании нуля. Если у вас 0px или 0em, можно просто указать 0, CSS это распознает сам.

8. Написать основу для нормальных браузеров, а затем настроить для Webkit и IE

Вначале напишите оптимизированый код для Firefox, Mozilla. Если ваш CSS правильно работает с ними, то будет меньше проблем в Webkit (Safari, Chrome) и Internet Explorer.

9. Валидируйте код!

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

10. Придерживайтесь чистоты в доме

Отдельные браузеры используют свои конкретные CSS стили, и по мере необходимости, включают JavaScript код на стороне сервера. Не стоит засорять ваш основной CSS. Вынесите все хаки в отдельный stylesheet. Такая оргнизицая стилей, поможет вам в дальнейшем избежать конфликтов и неразберихи в ваших таблицах стилей!

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

Высоких конверсий!

blog comments powered by Disqus

Премиум Поддержка лендинга от LPgenerator

Полное сопровождение вашего бизнеса

man
support-bg
copyright © 2011–2021 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".