20 советов для написания современного CSS


Оглавление (нажмите, чтобы открыть):

20 впечатляющих CSS3 примеров, техник и библиотек

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

Размытое меню

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

CSS 3D облака

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

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

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

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

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

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

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

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

10 советов по CSS для WEB-разработчика

Здравствуйте, уважаемые читатели XoZbloga! Спустя месяц отдыха, я приступаю к новому, так сказать сезону в работе. Постараюсь радовать Вас хорошими статьями и уроками �� Как и в любом другом деле, в веб-разработке есть свои тонкости. И чтобы достичь желаемого результата необходимо знать их. В этой статье дам 10 советов, которые могут помочь Вам при разработке стилей CSS.

1) @media

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

2) background-size

Еще одним чрезвычайно полезным свойством CSS3 является background-size . Благодаря этому свойству можно масштабировать фоновое изображение как угодно.

3) @font-face

Вы все еще пользуетесь стандартными шрифтами? Тогда мы идем к Вам! Это шутка конечно же, но действительно «грех» не воспользоваться свойством CSS @font-face и установить на своем сайте те шрифты, которые лучше всего подходят к разработанному дизайну и будут выглядет одинаково в разных браузерах и на разных устройствах. Все, что нужно — найти или создать шрифт и подцепить его к странице с помощью CSS @font-face. Также можно воспользоваться сторонними сервисами, такими как Google Web Fonts.

Более подробно о пользовательских шрифтах — http://xozblog.ru/2012/09/font-face/

4) margin: 0 auto

Удивительно, что до сих пор не разработано свойств для центрирования блок элемента ( div ). Поэтому приходится прибегать к ухищрениям, вот один из лучших способов как отцентрировать div по отношению к его родителю.

5) overflow: h >

Бывает необходимо чтобы размеры блочного элемента оставались нетронутыми, т.е. не увеличивались под действием содержимого: будь то текст или изображение. Решается это просто свойством overflow со значением hidden. Также у этого свойства есть и другие значения, например можно сделать полосу прокрутки (значение scroll).

6) .clearfix

Для тех ситуаций когда overflow: hidden не работает, можно воспользоваться методом Clearfix. Название класса может быть любым, не обязательно clearfix.

7) color: rgba()

Используя RGBa CSS можно придать прозрачность цвету, что невозможно при использовании шестнадцатеричное значение ( #fafcdc ). Для создания цвета надо указать значения составляющих цветов: красного, зеленого и синего, а также выставить альфа параметр. 1 — полностью не прозрачный, 0 — полностью прозрачный, соответственно 0.5 — прозрачный на половину.

8) input[type=»text»]

При разработке дизайна грамотно применяйте css селекторы, это позволит сократить и оптимизировать код. И в целом стремитесь минимизировать количество кода, ведь это залог хорошего программирования) Благодаря селектору приведенному выше, выбираются все поля с типом text и им задается ширина 200px.

9) transform: rotate(30deg)

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

Более подробно о CSS анимации и свойстве transform: http://xozblog.ru/2012/06/transform/

Ничто не может испортить дизайн больше, чем пунктирные линии вокруг ссылки при нажатии. С помощью outline: none этого можно избежать.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

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

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

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

Прописать стили в самом документе, используя тег

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

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

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

  1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
    Пример использования !important:
  2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
  3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
  4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
  5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
    В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

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

И т.д. по логической цепочке.

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

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента:
background-color 755 раз Цвет фона элемента:
font-size 524 раза Размер шрифта:
opacity 435 раз Уровень прозрачности элемента:
padding 372 раза Размер полей внутри элемента:
width 356 раз Ширина блочного элемента, не включая размеры границ и полей:
margin 311 раз Внешние отступы элемента:
height 305 раз Высота блочного элемента, не включая размеры границ и полей:
font-weight 280 раз Насыщенность шрифта:
text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

  1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
  2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Frontender Magazine

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


Препроцессоры CSS

Взглянем правде в лицо. Написание чистого CSS — не самое увлекательное занятие в мире. Препроцессоры берут нечто напоминающее CSS и чудесным образом выдают валидный CSS-код. Это добавляет дополнительную прослойку между разработчиком и конечным стилем, который будет послан браузеру. Однако всё не так плохо, ведь препроцессоры обладают некоторыми очень полезными возможностями.

Конкатенация

Наиболее ценной возможностью препроцессоров я считаю конкатенацию файлов. Уверен, вы знаете что написав @import в файле .css вы собственно говорите браузеру: «используй и этот файл, пожалуйста». И он его использует. Добавляется еще один запрос, что не очень хорошо, ведь таких файлов у вас может быть много. Большое количество запросов ухудшает производительность приложения. Если использовать препроцессоры CSS, эта проблема устраняется. Они просто объединяют все стили в один css-файл.

Расширение

Есть два основных препроцессора CSS — LESS и Sass. Они оба поддерживают расширение CSS. Да, работают они немного по-разному, но идея та же. Вы создаете базовый класс (его обычно называют «миксин») с набором свойств и затем импортируете эти свойства в другой селектор. Например:

Здесь есть нюанс: если вы прописываете миксин без аргумента, т.е. если у вас есть только

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

Выглядит почти так же. Но если перейти к второму варианту использования и определить плейсхолдер:

Очевидны два позитивных момента. Во-первых, класс .bordered не компилируется. Во-вторых, Sass комбинирует селекторы, что делает CSS немного короче.

Компоновка

LESS и Sass поддерживают определение переменных. Можно в любой момент обратиться к этим переменным и использовать их в качестве значений для свойств.

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

Также удобно использовать переменные, когда нужно сделать вставку. Это продемонстрировано в следующем примере:

Аргументы против препроцессоров

  • Препроцессор является инструментом, т.е. это еще один компонент, который вам придётся добавить в среду разработки. Вам возможно захочется сделать его встроенным в приложение. Это, само собой, предусматривает написание дополнительного кода.
  • Если вы не хотите беспорядка в коде, вам вероятно понадобится средство отслеживания изменений. Еще один инструмент, который будет следить за вашими файлами и запускать компиляцию после того как в них будут внесены изменения. Если это ваш случай, вам придётся запускать этот инструмент каждый раз когда вы начинаете работать над проектом. Возможно, со временем вы найдете способ оптимизировать этот процесс, но над этим придётся поработать.
  • Очень часто разработчиков заботят только файлы .less или .Sass. Однако, результат — вот, что действительно имеет значение. Ваш Sass может быть изящным и оптимизированным, однако это не гарантирует, что в результате вы получите столь же красивый CSS. Могут возникнуть довольно интересные проблемы со специфичностью. Так что скомпилированную версию нужно регулярно просматривать.

Вот еще один инструмент с которым можно поиграть. Возможно препроцессоры и экономят кучу времени, но только с их помощью хорошую архитектуру не построишь. Первое о чём я задумался — это выбор названий. Рассмотрим следующую HTML-разметку:

Стили могут быть такими:

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

Однако это не очень хорошая идея, ведь стили становятся зависимыми от иерархии конкретных тегов. Что если потребуется перенести логотип за пределы тега header ? Стиль не будет применён. Можно добавить site-header в название класса логотипа:

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

потому что по логике название селектора должно отвечать расположению тегов в HTML.

БЭМ может стать решением в таком случае. Он расшифровывается как «Блок, Элемент, Модификатор» и диктует некоторые правила, которым нужно следовать. Используя БЭМ можно превратить наш маленький пример в:

Т.е. site-header — это у нас блок. Логотип logo и навигация navigation — элементы этого блока, а версия логотипа xmas — модификатор. Возможно всё и выглядит очень просто, но такой подход даёт широкие возможности. Начав его использовать, вы убедитесь что архитектура ваших работ улучшится. Слабой стороной БЭМ является разве что синтаксис. Да, он немного безобразен, но я готов пойти на жертвы ради исправности системы.

(материалы для чтения: здесь и здесь)

OOCSS

Открыв для себя БЭМ, я научился правильно называть классы и задумался над структурой. Наверное первой мне на глаза попалась статья об Объектно-ориентированном CSS. Суть объектно-ориентированного программирования частично заключается в использовании абстракций и язык CSS их поддерживает. Не важно используете вы препроцессоры или нет, вам нужно знать об OOCSS. Я программист, поэтому эта концепция показалась мне очень похожей на то, как я программирую каждый день, например, на JavaScript. У неё есть два главных принципа:

Разделение структуры и оформления

Взгляните на следующий пример:

В нём несколько стилей продублированы. Их можно выделить в отдельный класс следующим образом:

Теперь у нас есть объект colors-skin , которому можно найти широкое применение. Разметка может выглядеть так:

У такого изменения есть несколько плюсов:

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

Разделение контейнера и содержимого

Здесь суть в том, чтобы у каждого элемента был один и тот же стиль вне зависимости от его расположения. Это значит что следует избегать использования селекторов вроде следующего:

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

Фреймворк

Если вы откроете репозиторий OOCSS на GitHub, то увидите фреймворк. Да, в этом фреймворке используется концепция объектно-ориентированного CSS и да, у него есть несколько крутых компонентов, готовых к использованию. С некоторого времени мне не нравятся фреймворки. Если вы на минуту задумаетесь, то увидите что слово фреймворк состоит из двух частей — «frame» и «work», что значит «каркас, рамка»1 и «изделие». И действительно, работая с фреймворком вы ограничены рамками. Вы связались с этим инструментом и вынуждены играть по его правилам. Я отдаю предпочтение микро-фреймворкам или подобным инструментам, которые дают мне лишь основу. Я ни в коем случае не пытаюсь изобрести колесо, только хочу найти баланс. Очень часто готовые к использованию решения ведут к неопрятной и слишком запутанной системе. Я бы советовал создавать такие инструменты с одной конкретной целью. Если пытаться предвидеть побольше способов применения, в результате получите… ну, вы поняли — фреймворк.

Тем не менее я настоятельно рекомендую взглянуть на фреймворк OOCSS. Возможно он подойдёт под ваши требования. Создатель репозитория — Николь Саливан (Nicole Sullivan). Она первооткрыватель OOCSS и если у вас появится немного свободного времени, советую послушать её презентации/лекции.

SMACSS

Представляю вам ещё одну популярную концепцию: SMACSS. SMACSS расшифровывается, как масштабируемая модульная архитектура CSS (Scalable and Modular Architecture for CSS). Джонатан Снук (Jonathan Snook) предложил нечто вроде гида по стилю для CSS-разработчиков. Суть в том, чтобы разделить ваше приложение на следующие категории:

  • основа — базовые стили по умолчанию для простых селекторов. Например, clearfix ;
  • структура — определение каркаса;
  • модуль — группа элементов которые вместе формируют модуль. Например, шапка или боковая колонка;
  • состояние — содержит описание различных состояний элементов. Правила при скрытии, нажатии, растяжении (и т.д.) определённого объекта;
  • тема — большей мерой определение визуального представления элементов. Похожая на категорию «состояние»;

Мне пока не приходилось использовать концепцию SMACSS, но она довольно популярна и действительно продвигает хорошие идеи. Больше всего радует, что она скорее является идеей реализации, чем фреймворком. Следовательно, вы не связаны чёткими правилами, классами или компонентами.

Атомарный дизайн

Изучив OOCSS и SMACSS, я начал искать подходящее модельное представление и довольно быстро оказался на этой странице. Это презентация отличной концепции «Атомный дизайн». Её автор — Бред Фрост (Brad Frost), известный веб-разработчик, работающий преимущественно в мире отзывчивого дизайна и дизайна для мобильных устройств.

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

Т.е. атомы содержат базовые стили элементов DOM. Например, цветовую палитру, размеры шрифтов или переходы. Затем эти частички можно объединить в молекулы. Например:

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

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

Еще одна особенность концепции — заготовки. Они не имеют ничего общего с химией, однако вписываются в веб-контекст. Сочетая разные организмы, мы создаём заготовку. Затем из этих заготовок формируется конечная страница.

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

Органический CSS

Пару месяцев назад я написал статью об Organic. Это чудесный маленький фреймворк для приложений на JavaScript. Он даже больше смахивает на шаблон разработки и лично мне он очень понравился. Я даже использовал Organic в нескольких проектах и всё работает без каких-либо проблем. Если он вас заинтересовал, советую почитать этот пост.

Когда я натолкнулся на статью Бреда Фроста, мне уже была знакома похожая концепция, реализованная в Organic. Работа Бреда просто великолепна, однако я решил пойти дальше и написать собственный микро-фреймворк на основе концепции атомного дизайна. Я использовал Sass в качестве препроцессора и создал репозиторий на Github — https://github.com/krasimir/organic-css.

Атомы

Начнём с наименьшего компонента фреймворка — атома. Согласно определению из википедии, атом является наименьшей частицей вещества. В контексте CSS, думаю этому определению соответствует свойство и его значение. Например:

Добавление атомов посредством прописания стилей прямо в классах не соответствует моим намерениям. Потому что если я напишу что-то вроде этого:

препроцессор оставит эту запись как есть. А мне нужен вот такой результат:

В Sass такого эффекта можно добиться используя плейсхолдеры. Т.е.

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

Для большей последовательности работы я создал миксин для определения атома. Итак, вот пример:

Используя этот подход я создал подборку атомов, которые можно с легкостью применить для любого проекта. Взглянуть на них можно здесь. Я использовал некоторые хорошие правила из других фреймворков, не всё является моей заслугой. Также доступен миксин для объединения атомов в молекулу:

Молекулы

Молекула — это элемент DOM, который нужно стилизировать и у которого нет дочерних элементов. Или же если у него есть дочерние элементы, они напрямую с ним не связаны. Например, может быть молекулой. Если вам трудно определить молекулы у себя на странице, просто подумайте что построено из атомов. Если какой-то элемент построен из других молекул, это наверное органелла. Несколько строчек выше я показал как определить молекулу:

Ко мне пришла одна интересная мысль. Рассмотрим тег body . Что это? Молекула или что-то другое? Он, без сомнения, нуждается в стилизации посредством атомов, но в общем содержит другие молекулы. Значит он должно быть не молекула, а что-то другое. Я пришёл к заключению, что CSS должен быть на первом месте. Т.е. если для стилизации body нужны несколько атомов, значит он является молекулой, что значит что теоретически я не должен присоединять к нему никаких других молекул. Это может показаться непрактичным, но в большинстве случаев поможет вам воздержаться от использования дочерних селекторов, что хорошо.

Органеллы

Как только вы разберётесь с тем какие элементы DOM являются молекулами, вы поймёте что такое органеллы. Например, обычный элемент form служит прекрасным примером органеллы. Он содержит молекулы label , input и textarea .

Органеллы — это наверное первая часть фреймворка, которая тесно связана с текущим приложением. Атомы и молекулы могут быть перенесены в другие проекты, в отличии от органелл.

Больше абстракций

Очень часто у вас может вознкать желание объединить органеллы ещё во что-то. В таком случае добавим ещё абстракций.

Только от вас зависит, как вы построите свой CSS. Пока я использовал OrganicCSS только в одном проекте, но могу сказать что он помогает внести в проект ясность. Я рассортировал разные элементы по разделам и дал классам такие названия чтобы с лёгкостью ориентироваться с чем я имею дело. Например, если у меня есть органелла с названием header , я просто изменю её название на o-header . Просматривая HTML-разметку спустя некоторое время, я сразу вижу что CSS-стили для этого элемента находятся в разделе «органеллы».

Заключение

Это было интересное путешествие. Не знаю буду ли я использовать OrganicCSS в будущем, но это не самое главное. Главное — чему я научился. Я понимал, что мне нужно изменить свой подход к процессу разработки CSS и я это сделал. Мне кажется нужно больше говорить об архитектуре CSS. Как видите, для этого есть много хороших ресурсов. Их только нужно найти, понять как они работают и что с их помощью можно сделать. Только тогда можно выбирать что использовать, а что нет. Даже больше того, когда видите целостную картину, вы получаете возможность придумать что-то, что будет больше соответствовать вашим потребностям.

Примечания

1 В английском языке слово «frame» имеет большое количество значений. Одно из них — «рамка» (напр. для картины или зеркала), его обыгрывает автор статьи в своём рассуждении о работе с фреймворком.

Советы по написанию современного CSS

«Делай настолько просто, насколько возможно. Но не проще!» (в IT это еще называют KISS).

Используйте flexbox

Ибо это первая технология для расположения блоков, не являющаяся костылём. Да-да, всего 21 год и у нас есть действительно удобный механизм для раскладки блоков.

Но помните ряд «мелочей»:

  • Кроссбраузерность flexbox не идеальна. В связи с реализацией в днищебраузере 10 старой версии спецификации, можно считать, что flexbox — это IE11+.
  • Правила margin для флекс-потомков не «схлопываются» как в обычном потоке.
  • Правило z-index работает при любом значении правила position .
  • Правила vertical-align , float перестают работать во флекс-контексте.
  • CSS-колонки перестают работать во флекс-контексте.
  • Флексбокс не без багов (перевод)

Для селекторов используйте английский и разделители —

Это общепринятая практика, ускоряющая восприятие кода. Не используйте camelCase или символы подчеркивания для разделения слов в имени селектора.

Осторожнее с сокращениями слов

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

Помните о «весе» селекторов

Есть селекторы «слабые», а есть помощнее. Всегда помните про «вес» селектора.

Не пишите CSS, используйте препроцессоры

Это удобно, быстро, дает возможность разделять (и властвовать) кодовую базу, легче её поддерживать. Самым распространенным является Sass. Наиболее близким к CSS — LESS. Знать и пробовать стоит оба.

Stylus — самый молодой и самый мощный, но распространен мало. К сожалению, сейчас у этого инструмента нет разработчиков и он не развивается. Последние изменения в репозитории разработки датированы летом 2020 года.

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

Не набирайте стилевые правила, используйте Emmet

Принцип прост (я не верю, что вы не знаете о нём, на самом деле): набираем аббревиатуру(ы), жмем кнопку разворачивания аббревиатуры (обычно, TAB) и получаем правила со значениями.

Не пишите вендорные префиксы

Уже давно есть Автопрефиксер, расставляющий префиксы за вас. Используете автоматизацию — ставьте его как пакет и подключайте в процесс обработки стилей. Не используете автоматизацию — есть он-лайн вариант: autoprefixer.github.io.

Пишите валидный код

Пока не уверены в правильном наборе, используйте валидаторы (встроенные в редактор кода, к примеру).

Автоматизируйте всё, что можно

Параллельно с улучшением навыка использования CSS, изучайте способы автоматизировать рутину. Главные помощники тут — системы сборки и таск-раннеры. Начать можно с изучения gulp.

Всегда проверяйте в Safari и IE

Именно в них будет больше всего проблем. Увы, первый для OSX, а второй для Windows. Ставьте виртуальные машины или используйте вебсервисы.

Выберите CSS-сброс/нормализатор/собственный вариант

CSS-сброс был популярен лет 5 назад, потом мы перешли на нормализатор. Сейчас же, для проектов без поддержки старых браузеров можно использовать что-нибудь попроще и свое собственное, как поступили авторы самого известного фреймворка Bootstrap (в 4-й версии отказались от normalize.css в пользу своего reboot).

Меняйте box-sizing правильно

Наиболее безопасно указать на html определить его как box-sizing: border-box; и потом для всех элементов указать наследовать его. Так можно будет быстро переопределить это правило для какого-либо родителя.

Подключайте и используйте шрифты правильно

Выбирайте форматы шрифтов, исходя из кроссбраузерности проекта, проверяя поддержку формата шрифта на caniuse.com. Для проектов с IE9+ будет достаточно WOFF, но для старых Андроидов потребуется и TTF, а для новых браузеров лучше подключить и WOFF2 (выигрывает в размере файла в сравнении со всеми прочими). Очередность подключения: WOFF2, WOFF, TTF.

Подключая несколько файлов начертаний, не умножайте названий шрифта. Очень странно иметь на проекте шрифты с названиями «PT Sans» и «PT Sans Bold», это должен быть шрифт «PT Sans», плотность которого указывается в стилях правилом font-weight .

Помните, что шрифты начинают подгружаться относительно поздно (только когда браузер поймёт какие из них реально нужны, сложив DOM и CSSOM в модель визуализации), учтите, что есть такие явления как FOUT, FOIT и даже FOFT.

Подробнее и с примерами кода про подключение шрифтов — в моей статье.

Не деформируйте изображения

Для фоновых картинок в блоках есть прекрасное правило, масштабирующее изображение так, чтобы оно вписалось в длинную сторону блока своей короткой стороной без искажения пропорций — background-size: cover (кроссбраузерность — IE9+, отлично сочетается с background-position: center ).

Для картинок, вставляемых на страницу тегом img можно предусмотреть фиксированный размер и масштабирование без деформации, задав размер и им правило object-fit: cover (нет поддержки в IE и Edge, но есть полифил, обеспечивающий функциональность этого CSS-правила).

Жестко соблюдайте кодгайд

Красивый и консистентный код быстрее читается и понимается, в нем лучше видны ошибки. Кодстайлов довольно много, мне ближе всего те, в разработке которых я участвовал сам: Руководство по написанию кода EpicSkills и Стиль кода Академии HTML.

Используйте в анимации transform или opacity

Любая анимация на странице — это перерисовка некоторой части страницы (всей страницы в наихудшем случае). Чем большая область перерисовывается, тем сложнее приблизиться к идеалу в 60 кадров в секунду, анимация может выглядеть «дёрганой».

По возможности, при анимации меняйте не отступы/размеры, а правила transform или opacity , подсчет таких изменений страницы затронет наименьшие по размеру области и будет выполнен не на центральном процессоре (который может быть занят чем-то другим), а на графическом.

Изучайте фреймворки

Подходы к стилизации, используемые в распространенных фреймворках (Bootstrap, Foundation) ощутимо прокачают вас как специалиста.


Изучайте методологии методологию БЭМ

У CSS есть «вагон» родовых травм, преодолеть которые полностью или частично можно с использованием методологии. Выбрать можно любую, главное чтобы это был БЭМ, ибо на данный момент ничего лучше (в состоянии «готово к использованию») не существует. Прочие даже близко не дотягивают.

Избегайте !important

Это не запрет. Увы, иногда без !important не обойтись (при поддержке старинного говнокода в длительно существующем проекте). Запрет тут только один: не «лечите» свои же баги дописыванием !important , ибо это чёткий признак профана.

Используйте СКВ

СКВ — система контроля версий. Идеальна для текстовых файлов, коими являются CSS-файлы.

Изучите git и используйте его. Это как сохранения в играх, но для работы. Удобный бекап, история изменений, возможность откатиться к ЛЮБОМУ сохраненному состоянию, удобная работа в команде и много чего ещё.

Думайте о переполнении и недополнении

ВСЕГДА думайте о переполнении блока текстом (кнопка, название товара в карточке) или картинкой (внутри блока может оказаться картинка не тех пиксельных размеров, которые использовались при верстке). Переполнение возможно и вложенными блоками (галерея, неизвестное количество превью фотографий).

Не используйте для стилизации id

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

Идите по пути mobile-first

Стилизуйте мобильное представление адаптивной страницы, а потом дописывайте стилевые изменения с помощью @media (min-width: . ) . Обычно, это быстрее и логичнее обратного пути. Встречаются, впрочем, и исключения, когда, к примеру, главное меню для мобильных сильно отличается от «настольного» представления.

Не оптимизируйте CSS до старта проекта

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

Создайте свой стартовый проект

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

Мелкие фоновые изображения вставляйте в CSS в виде data-uri

Это способ преобразовать любой файл «в строку» и избежать запроса на сервер за картинкой (сервис для преобразования). Особенно актуально при отказе от спрайтов.

Следите за хорошими практиками и трендами

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

Оптимизируйте свою работу в редакторе

Помимо Emmet, нужно освоить:

  • Горячие кнопки, в первую очередь — поиск по файлам проекта (если используйте Sublime Text, есть хорошие новости).
  • Работу с проектами и отношение к файловой системе (см. пункт про собственный стартовый проект).
  • Дополнения, удобные в работе, вроде автодополнения имен переменных или быстрого получения CSS-селекторов из разметки.

© Николай Громов. Внутренняя Монголия, вечность, лето.

Принципы написания чистого CSS кода

Слишком часто крупные (да и мелкие) сайты страдают от слишком разросшегося, и по сути, избыточного CSS кода, где можно найти большое количество лишних элементов, слишком длинные и конкретизированные выражения, большую зависимость одних селекторов от других, частое и нецелесообразное использование !important и так далее. Для оптимизации наших таблиц стилей, мы конечно же можем воспользоваться какими-то базовыми основами написания CSS кода. Что мы действительно должны делать, так это добиваться хорошего структурирования таблиц стилей и стремиться к повышению устойчивости к высоким нагрузкам.

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

В этом уроке мы затронем эти темы, но перед этим давайте посмотрим на несколько примеров очистки CSS кода.

Несколько полезных методов

Частенько чей-то чужой опыт бывает очень полезным. Давайте рассмотрим несколько примеров:

Быстрый доступ к элементам

Очень важно иметь возможность получать быстрый доступ к какому-то стилю прямо со страницы. Для этого можно воспользоваться различными инструментами, такими как Explorer Developer Toolbar, Mozilla Firebug или Chrome Developer Tools. Используя данные инструменты, мы можем быстро находить то, что нам нужно, и тут же менять, видя результат.

В данном фрагменте присутствует свойство outline. Оно используется для одновременного присвоения цвета, стиля и толщины внешней границы на всех четырех сторонах элемента. Тут я выбрал слово red для определения цвета границы и заметьте, не просто так. Для определения конечных цветов всегда пользуйтесь rgb или hsl кодами, а для временных — цельными словами. Это поможет вам в будущем быстро найти нужные фрагменты и устранить спорные моменты, возникшие во время разработки. Будьте осторожны с использованием свойства outline, т.к. оно не работает в Internet Explorer 8.

Добавление тестовых стилей

Ещё одной хорошей практикой является добавление отступа для каких-то тестовых или временных свойств.

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

Отключение стилей

Часто при написании CSS кода нам нужно отключать какие-то стили. Мало кто знает, но для этого можно к свойству приписать префикс “x-”:

Этот способ быстрее, чем комментирование. Также это может упростить поиск таких спорных селекторов.

Очистка и оптимизация CSS кода

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

Макро-оптимизация

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

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

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

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

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

Знак “=” в последнем выражении используется исключительно для упрощения поиска отдельно взятой секции.

Аннотации и отображение вложенность

Аннотации и отображение вложенности элементов помогают разработчику отследить начало и конец какого-то блока. Таким образом, отдельные кусочки кода будут быстро находиться.

Аннотации формируются с помощью следующих выражений: или просто .

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

Разницу между хорошо и плохо структурированным кодом, вы можете увидеть в следующих примерах.

До

После

Микро-оптимизация

Микро-оптимизация направлена на уменьшение размера файла и увеличение скорости загрузки страницы.

Сортирование свойств в алфавитном порядке

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

Пример 1

Пример 2

Увеличение эффективности кода

Длинные селекторы заставляют браузер лишний раз проходиться по DOM-у и искать совпадения. Более конкретизированные названия селекторов позволяют избежать данную проблему.

Перед оптимизацией

После оптимизации

Пишите просто и кратко

Чем меньше написано кода, тем эффективнее работает страница. Для определения стилей следуйте следующим правилам.

  1. Используйте короткие названия CSS свойств везде, где это возможно;
  2. Пишите сокращённые значения свойств;
  3. Избегайте дублирования CSS свойств.

До

После

Сокращайте код

Главное, что вам нужно сделать на финальной стадии работы над стилями, — это убрать все дубликаты строк и различного рода отступы. Для рабочей версии стиля можно также убрать всевозможные комментарии. Также можно воспользоваться инструментами сжатия CSS стилей: CSS Compressor, CSS Drive.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/css-architectures-principles-of-code-cleanup-2/
Перевел: Станислав Протасевич
Урок создан: 25 Марта 2013
Просмотров: 39119
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

20 впечатляющих CSS3 примеров, техник и библиотек

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

Размытое меню

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

CSS 3D облака

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

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

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

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

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

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

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

Всплывающие подсказки


CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

Правила написания CSS

Данную статью поймут только те, кто знаком с основами CSS, поэтому, если Вы не знаете, что это такое, то сначала почитайте другие статьи на этом сайте.

В этот раз мне хочется дать Вам несколько советов о правилах написания CSS. Многие Web-дизайнеры используют CSS неправильно. И если при небольшом коде — это не страшно, то если стиль уже растянут на сотни, а то и тысячи строк, то наступает момент, когда дизайнер уже не понимает, что происходит. И еле-еле на соплях и кое-как, до конца уродуя код, доводит дело до «завершения». В результате, ни о каком качестве и стабильности работы и речи идти не может. Вот чтобы свести данный фактор к минимуму (потому что полностью уничтожить его всё равно не получится), хочу дать Вам несколько советов по написанию стилей CSS.

Правило написания CSS №1 — Забейте на порядок

Многие дизайнеры используют порядок написания стилей, чтобы задавать разные приоритеты. То есть если мы напишем два свойства с разными значениям в одном типе CSS стиля (inline-стиль, внедрённый стиль и другие), то будет применён тот стиль, который написан ниже. Причём, это относится не только к свойствам, но и к селекторам. То есть часто на разных страницах, в разных порядках подключается стили, чтобы каждая страница применяла в итоге свои. Разумеется, это крайне плохо, потому что если случайно нарушить порядок, то ошибка проявится (и самое страшное — не факт, что сразу), и найти её будет весьма трудно. Вдобавок, велика вероятность дублирования, а это уже «грязь«, которая, в лучшем случае, просто увеличит размер файла, а в худшем даст сбой в самый неожиданный момент. Поэтому избегайте влияние порядка по максимуму!

Правило написания CSS №2 — Не бойтесь наследования

Почему-то большинство Web-дизайнеров боятся наследования, а ведь оно помогает здорово сократить и упростить CSS стиль. Вместо этого, дизайнеры ставят огромное количество многоуровневых контекстных селекторов. И так для каждого элемента на странице. Без спору это надо, но лишь тогда, когда необходимо переопределить основной стиль, а писать для каждого элемента (иногда даже одно и то же) — это очень плохой признак.

Правило написания CSS №3 — Соблюдайте свой стиль

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

То есть у меня правила такие: название селектора, пробел, фигурная скобка, со следующей строки табуляция, название свойства, двоеточие и через пробел значение. Если имеются другие свойства у селектора, то со следующей строки, через табуляцию, вновь название свойства, а через двоеточие и пробел — значение. Все селекторы (в моём примере — b и p) я отделяю пустой строкой. Вот такой мой стиль написания стилей. Ещё рекомендуется писать селекторы по алфавиту — это тоже правильно, и я последнее время так их и пишу. Но главное — это соблюдать свой собственный стиль всегда и везде. Потому что многие его меняют день ото дня, а потом у них затрудняется восприятие того, что они понаписали.

Правило написания CSS №4 — Используйте комментарии

Это правило, которое соблюдают поистине единицы, к которым даже я не отношусь (хотя пытаюсь исправляться). Многие скажут использование комментариев — это не очень хорошо, потому что, во-первых, они увеличивают размер файла, а, во-вторых, зачем на них тратить время, если данный стиль нужен только мне, и никто больше на него смотреть не будет. Оба мнения ошибочные: первое потому, что никто Вас не заставляет писать целые тома, а 4-5 слов для каждого селектора увеличат в среднем не более, чем на 10%. А второе мнение ошибочно потому, что никто не знает, как будет развиваться Ваш сайт. И если он будет посещаемым, и Вам придёт в голову сменить дизайн, то будет плохо для человека, которого Вы наймете. Или если сами захотите сменить дизайн, то тоже лучше не будет, так как Вы уже забудете: где, что и зачем находится. Поэтому старайтесь комментировать то, что пишите, почаще.

Правило написания CSS №5 — Файл сброса

Данное правило остаётся под сомнением, хотя, без спору, оно является правильным, вот только использовать его или нет я оставляю на Ваше усмотрение. Заключается оно в следующем: необходимо создать CSS файл (reset.css), который будет сбрасывать все стили, применённые к стандартным элементам HTML. Например, убрать жирное начертание у тега или убрать больший размер текста у заголовков

Пользоваться или нет данным советом — решать Вам, но, на мой взгляд, это очень большая потеря времени. И в итоге, Вам всё равно придётся ставить те стили, которые Вы изначально удалили.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 20 ):

    Здравствуйте Михаил. Подскажите пожалуйста что такое default css?

    Это файл, в котором сбрасываются все стили, чтобы все браузеры стали одинаково отображать стиль на данном этапе. Традиционно он называется reset.css

    т.е. этот файл не является таблицей стилей?

    Является. Там задаются правила, где обнуляются всякие отступы, поля, рамки и прочие свойства, которые даются браузерами по умолчанию. Введите в google reset.css, и, думаю, что первый же сайт покажет, как выглядит данный файл.

    Спасибо за ответ. К сожалению поисковики не дали такой исчерпывающий ответ как Вы. Спасибо еще раз!

    Вот так выглядит reset.css: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table

    Здравствуйте Михаил. Можно подробней объяснить про написание CSS файл (reset.css). Нужно убрать на сайте жирное подчеркивание текста,а страниц очень много. Как правильно это написать?

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

    Здравствуйте!Подскажите как избавиться от этих пробелов по бокам? http://s2.ipicture.ru/uploads/20130321/rrSkV21f.png

    Здравствуйте, Михаил. Изучаю с-час Ваш РНР курс, всё шло отлично до момента, когда началась работа с «подвалом». Я сделал всё один в один как Вы, проверил код несколько раз, но тем не менее для «подвала» CSS словно не работает, именно для «подвала». Не могу никак сдвинуть «Все права защищены» в центр страницы. Не подскажете, в чём может быть дело?

    В чём угодно, гадать не буду.

    привет,какая стандартная ширина сайта?спасибо.

    Смотря какого. Обычно делают 990px ширину, если фиксированная. А если резиновая, то адаптируют под 990px и выше.

    Здравствуй Михаил, не могли бы вы проще (или на примере) объяснить правило №1. Никак не доходит до меня.

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

    Здравствуйте! Как лучше задавать стиль для содержимого div — присваивая класс/id блоку, то есть самому divу, или же содержимому?

    В зависимости от содержимого. Если это текст,то лучше блоку. Если это список или ещё что-то,то лучше самому списку. Роли не играет.Зависит от нужной вложенности

    dobrii ve4er. u menea document css ne delaet nikakih izmenenia,ne mogu poneati v 4iom problema? zaranee spasibo.

    проблем может быть до миллиона) вы его хоть подключили? прочтите,что такое CSS пройдите бесплатный курс от Михаила по HTMl,чтобы понимать что и как

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    30 советов о CSS для начинающих

    Эту статью я перевела с net.tutsplus.com, что заняло у меня почти неделю. Мне очень понравились замечания редактора, поэтому перевожу с ними. Они будут отмечены в тексте так:

    Мои замечания будут отмечены как:

    1. Сделайте это читабельным

    Читабельность вашего CSS очень важна, хотя многие люди не понимают почему это важно. Хорошая читабельность вашего CSS позволит его проще поддерживать в будущем, т.к. вы сможете находить элементы быстрее. Также вы никогда не знаете кто будет смотреть на ваш код в последствии.

    Когда пишут CSS, большинство программистов попадают в одну из двух групп.

    Группа 1: Всё в одной строке

    Группа 2: Каждый стиль на своей строке

    Оба применения абсолютно приемлемы, хотя вы можете часто заметить что что группа два не любит группу один! Просто помните — выберите тот метод который читабельней ДЛЯ ВАС. Только это имеет значение.

    Полностью согласна с редактором. Я например отношусь к первой группе, как можно заметить, посмотрев стиль моего бложика. В несколько строк я пишу что-то что выбивается из-ряда вон. Например невалидный CSS, типа -moz-border-radius.
    Как улучшить читабельность вашего файла стилей также вы можете прочитать в свеженькой статье Яна Маркина «Как улучшить CSS».

    2. Будьте постоянны

    Среди слов о том как делать ваш код читабельным, скажу что нужно следить за постоянством CSS. Вы должны разработать ваш свой собственный «под-язык» CSS который позволит вам быстро называть вещи. Есть несколько классов которые я создаю почти каждый раз и я использую каждый раз одинаковые названия. Например я использую «.caption-right» для плавающих картинок которые содержат заголовок справа.

    Думать о вещах, таких как, использовать подчёркивание или тире в именах классов и ID, или использовать что-то другое. Когда вы начнёте создавать свои собственные стандарты для CSS, вы станете более опытны.

    3. Начните с фреймворка

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

    У многих дизайнеров ( верстальщиков ) есть собственные фреймворки, которые они создают со временем, это тоже хорошая идея. Это поддерживает постоянность в проектах.

    Я не согласен. CSS фреймворки замечательная вещь. для тех кто знает как их использовать.

    Это в меньшей степени изобретение колеса заново, и в большей степени изучение как колесо работает.

    Если вы только начали изучать CSS, я лично рекомендую вам воздержаться от использования фреймворков по меньшей мере год. Иначе вы только запутаете себя. Изучайте CSS. then take shortcuts!

    4. Используйте Сброс значений (reset)

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

    Популярны файлы от Эрика Мейера — MeyerWeb, и Yahoo’s developer reset. Или вы можете сделать свой собственный roll your own reset, если вам так хочется.

    Не согласна с этим пунктом. Я думаю вам не стоит залезать на велосипед если вы не знаете как он работает. Попробуйте изобрести свой. Я например ограничиваюсь только border-collapse:collapse для таблиц, обнулением рамки для изображений и т.п. При обнулении отступов у всех элементов скорее всего вы подумаете «WHAA, что случилось?!» и вам придётся ниже повторно задавать отступы для нужных элементов и если вы даже приблизительно не знаете как они задаются, есть большая вероятность что пользователь сочтёт это некрасивым.

    Также не нужно забывать что для многих элементов вам всё равно захочется переопределить стили. Например я для некоторых таблиц использую

    в случаях когда хочу задать border-radius у таблицы (который не работает в варианте collapse).

    5. Упорядочите файл стилей

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

    1. Основные классы(body, a, p, h1, etc.)
    2. #header
    3. #nav-menu
    4. #main-content

    Не забудьте коментировать каждую секцию!

    6. Комбинируйте элементы

    У элементов в стилях иногда совпадают какие-то свойства. Вместо повторения куска кода, почему бы не комбинировать их? Например у ваших h1, h2, и h3 элементов может быть одинаковый цвет и размер

    Всегда можно добавить уникальные характеристики для каждого из этих заголовков если нужно (например. h1 ) позже в коде.

    7. Создайте сначала HTML

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

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

    8. Используйте несколько классов

    Иногда полезно добавить несколько классов для элемента. Например у вас есть блок

    Вы можете добавить столько классов сколько заходите (через пробел).

    Будьте осторожны используя id или имена классов типа «left» и «right.» Я использую их, но только для вещей типа постов блога. Почему? Давайте представим что, в какой-то момент, вы захотите ваш «box» со значением LEFT. В этом случае вам придётся возвращаться к вашей разметке и менять имена классов, и всё только для того чтобы поменять

    страницы. Это несемантично. Запомните — HTML для разметки и контента. CSS для отображения. Правило:

    Если вы должны вернуться к HTML чтобы изменить отображение (или дизайн) страницы, вы сделали что-то неправильно!

    9. Используйте правильны Doctype

    Объявление doctype значит многое для того чтобы ваша разметка и CSS были валидными. Такше всё отображение вашего сайта могут сильно поменяться в зависимости от DOCTYPE который вы укажите.

    Я использую доктайп HTML5 для всех моих проектов.

    «Что самое хорошее в новом DOCTYPE, особенно, что все современные браузеры (IE, FF, Opera, Safari) распознают его и переключаются в стандартный режим — даже хотя не поддерживают HTML5. Это значит что вы можете начать писать ваши веб-страницы используя HTML5 уже сегодня, и они будут актуальны долгое-долгое время.»

    Джон Ресиг — создатель фреймворка JQuery и веб-евангилист.

    10. Используйте сокращения

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

    Или вы можете собрать их в один, например так:

    Помните, что если вам нужно поправить только одину сторону из четырёх, для отступов padding или margin, то вам лучше написать только её. Правило для группировки свойств легко запомнить — Сначала идёт верх, потом по часовой стрелке. Левая сторона — последняя. Для свойства border-radius другой метод, тут первое свойство — для левого верхнего угла, а потом тоже по часовой стрелке.

    11. Комментируйте ваш CSS

    Как и в любом другом языке, хорошей идеей будет комментировать ваш код по секциям. Чтобы добавить комментарий просто напишите /* в начале и */ в конце, например так:

    Честно говоря, я никогда не тратила время на написание комментариев для стилей, только для разметки. Для людей кто пишет свойства CSS каждое с новой строки — получится всё равно слишком много строк. Хотя начало комментария при подсветке кода будет легче найти.
    Для «группы 2», которые как я пишут на одной строке все стили для одного элемента — совершенно нет необходимости что-то комментировать, всё и так видно, гораздо проще тогда уж всем дочерним элементам делать отступ, например так:

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

    12. Понять разницу между блочными и строчными элементами

    Это очень важный пункт! Не столько для CSS, сколько для разметки. Правило — строчные элементы не должны содержать блочные!

    Блочные элементы — это элементы это элементы которые добавляют новую строку после и перед собой и занимают всю доступную им ширину. Строчные элементы занимают только то место которое им надо и специально не добавляют новую строку после себя.

    Вот список элементов которые являются строчными:

    13. Отсортируйте свойства по алфавиту

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

    Эмм. пожертвовать скоростью для слегка улучшенной читебельности? Я пас — но решайте для себя!

    Для «группы 2», это становится совсем неактуально. Например я расставляю свойства только по приоритету, например display,float,width и height по-возможности в начале. Но вообще не трачу на это время.

    14. Используйте Компрессоры CSS

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

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

    15. Используйте общие классы

    Вы увидите что существуют стили которые вам необходимо постоянно применять. Вместо добавления этих особых стилей к каждому ID, yвы можите создать общие классы которые сможете добавлять к другим классам или ID (совет #8).

    Например, я часто применяю float:right и float:left в моих дизайнах. Поэтому я просто добавляю классы .left и .right в мой лист, и ссылаюсь на них в элементах.

    Это способ чтобы не добавлять постоянно «float:left» ко всем элементам которым нужно плавать.

    Пожалуйста смотрите редакторскую правку к #8.

    16. Используйте «Margin: 0 auto» для центровки

    Многие новички в CSS не могут понять почему нельзя использовать просто float: center для достижения эффекта центровки блочных элементов. Если б всё было так просто! К сожалению вам нужно использовать это:

    для центровки дивов, параграфов и других элементов в вашей разметке.

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


    17. Не надо просто обёртывать всё Дивом

    Когда начинаешь, есть соблазн обернуть всё в див с ID или классом вокруг каждого элемента и создать для этого стиль.

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

    Теперь вы можете просто добавить стили к h1 вместо родительского дива.

    18. Используйте Firebug

    Если вы ещё не скачали Firebug, остановитесь и сачайте. Серьёзно. Эта маленькая штука из разряда must have для любого веб-разработчика. Среди многих особенностей предоставляемых этим дополнением Firefox (отладка JavaScript, проверка HTML, поиск ошибок), вы можете также визуально наблюдать м править ваш CSS в реальном времени. Вы можете узнать больше на официальном Firebug website.

    19. Без Хаков

    Избегайте использования маленьких браузеро-специфичных хаков если возможно. Большое давление оказывает необходимость сделать чтоб дизайн выглядил одинаково во всех браузерах, но использование хаков только усложнит поддержку дизайна в будущем. Плюс, использование reset-файла (смотри #4) может устранить почти все напрвильности рендеринга в современных браузерах.

    20. Меньше используйте абсолютное позиционирование

    Абсолютное позиционирование это удобный способ CSS который позволяет вам определять где точно элемент должен располагатьсяна странице с точностью до пикселя. Тем не менее, несмотря на невнимание абсолютно-позиционированных элементов к остальным, However, because of absolute positioning’s disregard for other elements on the page, the layouts can get quite hairy if there are multiple absolutely positioned elements running around the layout.

    21. Используйте Text-transform

    Text-transform — это очень полезное CSS свойство, которое позволяет вам «стандартизировать» как текст будет отформатирован на вашем сайте. Например, вы захотите чтобы заголовки были только строчными буквами. Просто добавьте следующее свойство в стили:

    Теперь все буквы в заголовке по-умолчанию будут строчными. Text-transform позволяет вам изменить ваш текст (первые буквы заглавные, все буквы заглавные, или все строчные) простым свойством.

    22. Не используйте отрицательный Margin для чтобы спрятать ваш h1

    Часто верстальщики используют картинки для их заголовков, и затем используют display:none или отрицательный margin чтобы выкинуть h1 со страницы. Matt Cutts, глава команды «Google Вебспам», официально заявил что это плохая идея, т.к Google может счесть это поисковым спамом.

    Как мистер Cutt недвусмысленно сказал, откажитесь от способа прятать ваш текст логтипа с помощью CSS. Просто используйте атрибут alt. Пока многие утверждают что можно использовать CSS чтобы спрятать тег h1 пока h1 это то же что и текст на лого, я предпочитаю блуждать по безопасной стороне.

    как можно видеть в моём блоге, часть h1 содержащая дату публикации — заменяется на соответствующую картинку, а текст скрывается display:none. Честно говоря мне всё равно что думает по этому поводу гугл, т.к. я использую это для того чтобы посетители моего блога видели более красивую картинку. Читатели RSS видят её текстом. Думайте о посетителях — это самое главное. Ни один поисковик не посмеет утверждать обратного.

    23. Проверяйте ваш CSS и (X)HTML

    Проверка вашего CSS и (X)HTML — это не просто дело чести: она позволяет быстро находить пятна грязи в коде и избежать ошибок. Если вы верстаете дизайн и по каким-либо причинам дела идут не так как надо, попробуйте проверить валидатором разметки и CSS валидатором и увидите какие ошибки появились. Обычно вы увидите что забыли где-нибудь закрыть див, или пропустили точку с запятой в свойсте CSS.

    Правило — Всегда ставьте точки с запятой после каждого свойства. Даже если свойство одно — всегда.

    24. Em против. пикселей

    Всегда были громкие дебаты — что лучше использовать пиксели (px) или относительные значения (em) при определении размеров. Пиксели — это более статический путь определения шрифтов, а em — более совместим с размерами в разных браузерах и мобильных устройствах. С преимуществом разных типов веб-сёрфинга (лаптоп, мобильник, и т.п.), em всё больше и больше становятся умолчанием для измерения размера шрифтов т.к. позволяют большую гибкость. Вы можете прочитать больше о том почему следует использовать ems для размеров шрифтов в этом содержательной теме форума. About.com также содержит статью отличия между способом измерения размеров.

    Не втягивайте меня в холивар — но я предпочитаю оспорить это, благодаря масштабированию в браузерах, большинство дизайнеров (верстальщиков) предпочитают определять размеры в пикселях. Как вы думаете?

    Я думаю что em никогда и не следовало использовать. Если пользователю будет слишком мелко или слишком крупно — он нажмёт Ctrl+»+». Прошло то время когда значения заданные в пикселях не масштабировались браузерами. Если вы захотите использовать em — нужно задать для body атрибут font-size, и относительно его высчитывать длины блоков и картинок например, вместо того чтобы сразу вписать значение в пикселях. Оно вам надо? Я знаю некоторых пуристов которые используют em, я так никогда и не могла понять чем использование относительных размеров поможет мне и моим пользователям.

    25. Не недооценивайте списки

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

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

    Вы часто можете видеть навигационные ссылки как тут:

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

    Глупый гусь =), кроме ненумерованных списков есть ещё тег , прочитайте «Используйте тег menu для меню»

    26. Избегайте дополнительных селекторов

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

    В данном случае использование .someclass li и так работает прекрасно.

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

    бывают случаи когда их всё таки придётся использовать. Подробнее ждите мою статью.

    27. Добавьте Margin и Padding ко всему

    Разные браузеры отображают элементы по-разному. IE отображает элементы отлично от Firefox. IE 6 отображает отлично от IE 7 и IE 8. Пока браузеры начинают приближаються к W3C стандартам, они все ёще не совершенны (*кхе-IE-кхе*).

    Одно из главных отличий между версиями браузеров это то как отображаются поля и отступы. Если вы не используете reset-файл, вам вероятно захочется установить margin и padding для всех элементов на странице, чтобы быть в безопасности. Вам достаточно установить это глобальным сбросом, например так:

    Теперь все элементы имеют padding и margin равным 0, пока на будет задан другой стиль в листе стилей.

    Проблемма как раз в этом, так как ВООБЩЕ ВСЁ обнуляется, с этим методом вы больше навредите себе чем поможете. Вы уверены что хотите чтобы отступы у всех до единого элемента обнулились? Если да — то это прекрасно. Но по крайней мере обдумайте это.

    28. Когда будете готовы, попробуйте объектно ориентированный CSS

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

    Вот презентация слайдшоу о том как работает Объектно ориентированный CSS:

    Если вы новичёк в игре CSS/HTML, OOCSS может быть в начале проблеммой. Но принципы неплохо знать для ООП в общем.

    Я думаю что надо очень постараться чтобы сказать что CSS изначально не объектно ориентирован. А вообще например мой коллега mr.troll — ярый противник ООП, надеюсь он найдёт времени написать статью в мой бложик по этом поводу.

    29. Используйте несколько файлов стилей

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

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

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

    30. При отладке сначала проверьте закрывающие теги

    Если вы заметили что ваш дизайн поехал, весьма большой шанс что вы забыли поставить закрывающий

    H Хорошие и плохие CSS практики для начинающих в черновиках

    .collapse»>Содержание

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

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

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

    Начнем:

    Плохие CSS практики

    Повторное использование правил

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

    К примеру, не используйте правило color: blue на каждом элементе или идентификаторе отдельно:

    Лучше занесите его в класс:

    Присвоение селектора ID нескольким элементам

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

    К примеру, так делать нельзя:

    Необходимо делать так:

    Повсеместное использование правила !important

    Правило !important появилось ближе к концу 90-х, чтобы помочь веб-дизайнерам и разработчикам переписывать правила в стилях. Правило !important главнее всех предыдущих стилей и говорит «Я намного важнее, забудь обо всех других стилях и используй меня!». Если полениться и навтыкать везде это правило сейчас, то потом работа с вашими стилями будет сплошной головной болью.

    В примере выше цвет хедера красный, кроме хедера с классом intro и еще одного хедера с идентификатором capture. В нашем случае важность свойств color и font-size определяется специфичностью селекторов.

    Правило !important работает на уровне свойств, а не селекторов, а значит, свойство color важнее свойства font-size. Кроме того, свойство color с правилом !important важнее свойства color в селекторе header#capture.

    Совет: Используйте правило !important только при переписывании пользовательских стилей, стороннего кода, инлайновых стилей и вспомогательных классов.

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

    Неэффективное использование CSS селекторов

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

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

    К примеру, эти длинные селекторы:

    Можно сжать до второго или третьего уровня:

    Большое количество веб-шрифтов

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

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

    Оптимизация веб-шрифта и время его загрузки могут повлиять на размер страницы и время рендеринга.

    Рекомендуется использовать не более одного или двух веб-шрифтов (максимум 3), а также прописывать резервные шрифты по умолчанию для старых браузеров в целях оптимизации.

    Использование инлайновых стилей

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

    Хорошей привычкой считается разделение CSS и HTML. Инлайновые стили затрудняют изменение дизайна сайта, а также усложняют работу с кодом.

    Но из-за отсутствия поддержки множества правил в email клиентах, инлайновые стили можно использовать в HTML версиях электронных сообщений.

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

    Хорошие CSS практики

    Мы закончили говорить о плохих практиках в CSS, теперь перейдем к хорошим.

    Комментирование CSS

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

    Взгляните на пример ниже:

    Поддерживайте читаемость CSS

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

    Повысить читаемость кода можно двумя способами.

    1. Запись в одну строку

    2. Обычная форма записи

    Отделяйте стили плагинов JQuery

    Если у вас в проекте используются плагины jQuery, вам нужно поместить их стили в отдельный файл и дать файлу легко запоминающееся название наподобие JS-plugin.css. Это поможет разграничить все CSS стили. Особенно полезно, когда вам понадобится добавить код или изменить стили какого-либо плагина JQuery.

    Сбрасывайте стили с помощью CSS Reset

    CSS Reset или стили сбросов – это сжатый или минифицированный набор CSS правил, который сбрасывает все стили в HTML разметке. Сбросы снижают риск конфликтных ситуаций в браузерах, а общие стили можно модифицировать и расширить.

    Самым популярным способом является сайт MeyerWeb. Есть и другие способы, к примеру, normalize.css Николаса Галлахера – современный способ сброса, поддерживающий HTML5. Сбросить стили можно, как подключив файл в HTML документе, так и скопировав код в свои стили.

    Размещайте CSS3 анимацию в конце файла

    Чтобы не возникало никаких противоречий при редактировании стилей, CSS3 анимацию рекомендуется добавлять в конец файла. Таким образом первым делом браузер загрузит основные стили до выполнения какой-либо анимации.

    Объединяйте элементы

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

    К примеру, у ваших заголовков h1, h2 и h3 есть одинаковые свойства font-family и color.

    Используйте сокращенные свойства

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

    К примеру, свойства margin-top, margin-right, margin-bottom, margin-left можно объединить в одну строку.

    Всегда используйте комментарии

    Одна из лучших практик в CSS – комментировать группы кода. Так вы сможете легко находить нужный участок кода.

    Используйте вендорные префиксы

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

    Основная задача вендорных префиксов – это не поломать код во время его выполнения.

    Вендорные префиксы бывают:

    К примеру, если вы хотите добавить CSS3 свойство transition, вам понадобится прописать само свойство, скопировать его пять раз и дописать вендорные префиксы.

    Вот что у вас получится.

    Сжимайте CSS файлы

    Еще один способ повысить эффективность кода – уменьшить размер файла с помощью сервисов типа CSS compressor или Minify CSS. Это должно уменьшить время загрузки файлов. Сервисы по сжатию файлов стилей убирают все пробелы, переводы на новые строки и повторяющиеся стили.

    Задавайте цвета в шестнадцатеричной системе счисления

    Мнения в сети разделились по поводу того, что лучше, использовать Hex обозначение цвета или все-таки ключевые слова. Отдельные браузеры могут не понимать некоторых названий цветов. С помощью шестнадцатеричной формы можно записать все 16,777,216 цветов, а вот с помощью HTML и CSS всего 140. В CSS нет имен для всех 16 миллионов 24-битных цветов, так что лучше использовать шестнадцатеричную форму записи.

    Более подробно об этом можно прочитать в спецификации CSS Color Module Level 3.

    Валидация

    С помощью W3C free CSS Validator вы можете проверить свой код на ошибки. Сервис легко обнаруживает такие вещи, как забытые закрывающие скобки или пропущенные точка с запятой.

    Что дальше?

    Мы обсудили хорошие и плохие CSS практики, теперь пора применить полученные знания.

    Если веб-дизайнер или разработчик может легко и быстро изменить любую часть кода, не затронув при этом другие части, это признак удобно написанного HTML, CSS или JavaScript кода.

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

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

    В данном мини-курсе мы с вами из PSD-макета Adobe Photoshop сверстаем полноценную HTML- страницу. При верстке страницы будем использовать новые теги и новые возможности HTML5 и CSS3.

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

    Мастер Йода рекомендует:  Код на Kotlin теперь можно запускать и изменять прямо на веб-странице

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