Введение в CCSS (Компонентный CSS)


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

Разработка расширяемых компонентов на HTML и CSS

8 Сентября 2020

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

Расширяемые модули

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

Шаг 1: определите тип модуля

Первый шаг это определение типа модуля, с которым мы работаем — вариантов здесь два: компонент или паттерн. Компонент это независимый модульный объект, у которого нет дочерних элементов, но есть модифицирующие состояния, изменяющие его внешний вид (пример: кнопка, сообщения, миниатюры изображений). С другой стороны, паттерн это объект, содержащий дочерние элементы (которые могут быть самостоятельными компонентами), влияя на каждый из них (например, хедер, логотип, навигация). И у паттернов, и у компонентов есть модифицирующие состояния, изменяющие их внешний вид или структуру.

Шаг 2: определите основу для модуля

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

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

Шаг 3: определите общие элементы

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

Шаг 4: расширяйте при помощи модификаторов

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

Пример модификатора HTML

Пример модификатора CSS

Примеры

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

О компонентах

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

Образцы обычных компонентов

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

О паттернах

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

Дефолтный медиа-паттерн

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

  1. Стили флекс-контейнера.
  2. Внешние отступы для контейнера и его содержимого.

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

Паттерн медиа-карточка (Media Card)

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

Паттерн медиа-объект (Media Object)

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

Паттерн медиа-планка (Media Slat)

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

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

Заключение

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

Заключение. Рекомендации по CSS

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

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

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

Понятные имена для селекторов

У профессионала должен быть развит такой навык как умение давать хорошие имена селекторам. Как правильно придумывать названия? Первый совет: не называйте селектор, исходя из цвета или местоположения элемента. Это те вещи, которые с высокой долей вероятности могут быть изменены в ходе доработки дизайна. Клиент может прислать правки, где попросит сделать кнопку не зеленой, а голубой, и если вы уже назвали класс .green-button , возникнут проблемы: придется либо везде менять .green-button на .blue-button , либо оставить всё как есть, но потом это будет вводить вас (или другого разработчика) в заблуждение. То же самое касается привязки к местоположению: элемент .left-block вскоре может стать элементом .right-block , потому что дизайнер или заказчик так захотел. И вновь вы столкнетесь с проблемой несоответствия имени.

Так как же называть селекторы? Более правильным будет давать такие имена, которые указывают на назначение элемента либо действие стиля. Например, кнопка отмены может называться .cancel-button , форма для обратного звонка — .callback-form , всплывающее окно — .popup-window и так далее. Если вы создаете класс для выравнивания текста по центру, то будет уместным назвать его как-то вроде .text-center :

Также не стоит давать селекторам бессмысленные имена вроде #b1 , .sb , .abc и т. п., поскольку потом ни вы, ни другие разработчики не сможете понять, что же означают эти загадочные названия.

Несколько классов для одного элемента

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

Однако первая кнопка должна быть выровнена по левому краю, вторая — по центру, а третья — по правому краю. Как это сделать? Самое очевидное решение — создать дополнительные классы специально для выравнивания блочного элемента:

По сути, класс .block-left можно и не создавать, поскольку наша кнопка по умолчанию примыкает к левому краю. Итак, нужный класс теперь можно использовать в паре с классом .button :

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

Группирование стилей

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

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

Железных правил относительно организации групп в CSS-файле не существует. Однако есть несколько популярных приемов, которые помогут удобно сгруппировать стили:

Группируйте стили, которые относятся к определенной секции страницы. Например, стили для шапки сайта помещайте в одну группу, стили для футера — в другую, стили для навигации — в третью и т. д.

Группируйте стили, относящиеся к одной задаче. К примеру, стили для разметки размещайте в одной группе, стили для форматирования — в другой и т. д.

Для выделения групп используйте обычные CSS-комментарии. Это общепринятый способ создания разделов в таблицах стилей. Комментарии старайтесь оформлять так, чтобы они были хорошо заметны. Например:

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

Несколько CSS-таблиц

Когда таблица стилей расширяется до огромных размеров, становится неудобно искать и редактировать в ней стили. В этом случае удобным решением может стать разделение одной CSS-таблицы на несколько файлов. Безусловно, здесь нужно иметь чувство меры: не стоит создавать 20-40 штук файлов со стилями для каждой секции сайта (это сильно загрузит веб-сервер), однако будет разумным разъединить большие группы стилей. Например, вы можете поместить код разметки в файл layout.css , основные стили — в main.css , медиа-запросы — в media.css и т. д.

Затем понадобится подключить все эти файлы к HTML. Можно добавить каждый файл по отдельности через тег
, но есть способ получше: создайте отдельную внешнюю таблицу стилей (скажем, styles.css ), внутри которой используйте правило @import для подключения всех остальных таблиц стилей:

В принципе, это весь код, который должна содержать таблица styles.css . Подключите ее к HTML-документу (другие таблицы подключать этим образом не нужно):

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

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

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

Среди преимуществ препроцессоров стоит выделить:

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

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

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

Самые распространенные препроцессоры

, а на другой — тег

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

Завершение

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

Правильный CSS: OOCSS, SMACSS, BEM и SASS

Перепечатал тут статью, которая канула в Лету.

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

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

OOCSS + SCSS

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

Клон объекта через новый класс расширяется дополнительными стилями (дизайном). Таким образом, в html документе к одному блоку присваивается сразу несколько классов. Нанизывание классов характерно для многих фреймворков, например Bootstrap.

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

На помощь приходит SASS, а именно директивы
@include и @extend. С их помощью к любому блоку можно присоединять дополнительные стили минуя html.

С помощью строки

мы расширяем классы blue и red стилями из класса button:.


При компиляции SCSS мы получаем такую запись в CSS:

Это полностью совпадает с принципами OOCSS, которые настоятельно рекомендует соблюдать его создатель Jonathan Snook. НО! Стили для класса button также записываются в CSS. И в данном случае совершенно напрасно, они нам не нужны. Так очень часто бывает в макете, когда базовый дизайн не применяется.

В таком случае лучше воспользоваться директивой Placeholder Selectors (%). Placeholder записывается в CSS ТОЛЬКО! когда его вызовут:

Однако в таком случае в скомпилированном CSS одни и те же стили будут повторяться в каждом классе.

То же самое произойдет и в случае использования директивы @mixin. Однако при использовании mixin мы получаем определенное преимущество.

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

SASS позволяет избежать лишних классов в макете благодаря вложенности. Однако иногда вложенность играет с нами злую шутку и к блоку применяется большое наследование, типа

И здесь пришло время обратиться к методологии BEM, разработанной компанией Yandex. Она определяет принцип создания имен классов для элементов различного уровня и их состояний.

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

Вкратце, что она из себя представляет правильный CSS на BEM.

.block — стиль для родительского блока
.block__element — стиль для вложенного дочернего блока.
.blockmodifier — стиль состояния блока.

Мастер Йода рекомендует:  Как сделать цитату в HTML

Возможны различные версии.

У дочернего блока может быть стиль состояния:

У стиля состояния может быть дочерний блок:

По отзывам девелоперов, ее протестировавших, методология BEM несколько уродлива в написании и запутанна в сфере применения.

Например, создатель csswizardry.com Harry Robertsприводит пример:

Нижнее подчеркивание говорит о принадлежности h1 к дочернему элементу. Однако Harry подчеркивает, что не уверен, всегда ли класс для h1 в данном случае следует писать таким образом.

Но тем не менее он несколько раз повторяет на страницах своей статьи мысль: неважно, насколько красио выглядит технология, главное, что она работает!

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

В SASS мы пишем:

В скомпилированном CSS получается:

Sass 3.3+ BEM делает возможным следующую комбинацию:

В скомпилированном CSS получается:

Наследованию конец, генерируется только один класс!

Организация файловой структуры

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

Чаще всего это style.css, но здесь во мне говорит привычка делать макеты на html5 boilerplate. Основной файл макета, куда импортируются все остальные его части (см. ниже)

Включает в себя normalize.css и стили для базовых элементов сайта: html, body, a, ul, li и так далее.

Если вы пользуетесь собственной сеткой или переопределяете готовые фреймворки. Соответственно сюда импортированы папки _mixins, _variables.scss и пр.

Стили для объектов.

Все модули с комментариями. Модули отделены от объектов, как и рекомендует SMACSS. Некоторые девелоперы рекомендуют собрать все модули в один файл и сделать навигацию по комментариям.

Мне же больше близок подход SMACSS, где предлагается рассортировать все по папкам. Я предпочитаю сохранить каждый модуль в отдельном файле и затем импортировать в _modules.scss. Так удобнее редактировать. Также считают и создатели SCSS Bootstrap.

Все, что не вошло в обозначенные выше папки.

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

CSS Компоненты

Заголовок (Header)

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

Цвета шапки по умолчанию:

Подзаголовок

Сразу под основным заголовком Вы можете разместить дополнительный. Существуют разные способы настройки хедера, некоторые варианты описаны в разделе «Панель с кнопками».

Не забудьте включить CSS класс has-subheader в директиву ion-content.

Контент

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

*О дополнительных настройках отображения контента читайте в разделе «Контент»

I’m an H1!

I’m an H2!

I’m an H3!

I’m an H4!

I’m an H5!
I’m an H6!

I’m a paragraph with a link!

Футер (Footer)

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

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

Если в подвале не используется заголовок, но требуется поместить кнопку справа, Вам следует включить тэг pull-right для кнопки, которую Вы хотите разместить справа. Например:

Кнопки

Кнопки – это неотъемлемая часть работы с любым мобильным приложением. Для кнопок в Ionic существует полный набор цветов по умолчанию.

По умолчанию к кнопке применено display: inline-block. Другой вариант – это кнопки на всю ширину экрана.

Block Buttons

Добавление button-block к кнопке означает применение display: block. Такая кнопка займет 100% ширины родительского элемента. В приведенном примере к кнопке, содержащей контент, применяется padding , поэтому между кнопкой и краями экрана есть отступ.

Кнопки на всю ширину экрана

Добавление button-full к кнопке означает не только применение display: block , но и удаление границы кнопки слева и справа, а также возможность задания любого радиуса границы. Этот стиль применяется в случаях, когда нужно создать кнопку во всю ширину дисплея устройства. Родительский элемент кнопки не имеет padding , установленного по умолчанию.

Размер кнопок

Добавление в код кнопки button-large делает кнопку больше, добавление button-small – меньше.

Кнопки с контуром

Используйте button-outline , чтобы создать кнопку с контуром и прозрачным фоном.

Примечание: текст и контур примут цвет в соответствии со стилем кнопки. То есть при использовании button-positive Вы получите кнопку с прозрачным фоном, текстом и контуром голубого цвета.

Прозрачные кнопки

Используйте button-clear для удаления контура кнопки, чтобы сделать текст более выделяющимся.

Примечание: цвет текста станет соответствовать примененному стилю кнопки. То есть при использовании button-positive Вы получите кнопку без контура с текстом голубого цвета.

Кнопки с иконкой

Вы можете легко добавить иконку на любую кнопку с помощью встроенного функционала Ionicons или нужного пакета шрифтов.

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

Кнопки в шапке

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

Прозрачные кнопки в шапке

Чтобы кнопки в шапке выглядели минималистично, используйте класс button-clear для удаления фона и контура кнопки.

Панель с кнопками

Кнопки легко можно сгруппировать с помощью класса button-bar . В примере ниже, панель с кнопками была добавлена в хедер, а также в основную часть экрана, где располагается контент.

Список

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

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

  • Battletoads
  • Contra
  • Duck Tales
  • Mega Man

  • Metroid
  • Mike Tyson’s Punch-Out
  • R.C. Pro-Am
  • Spy Hunter
  • Super Mario Bros.
  • The Legend of Zelda

Разделители в списке

List items can also be dividers to organize and group the list items. Use the item-divider class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.

Иконки в списке

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

Используйте item-icon-left и item-icon-right для выравнивания иконки по левому или правому краю соответственно. В случае, если в одной строке списка нужно разместить две иконки с разных сторон, используйте оба класса: item-icon-left и item-icon-right .

В приведенном примере для первой строки произведено выравнивание иконки по левому краю. Для второй – выравнивание по обеим сторонам. Для третьей – иконка слева и item-note . Для четвертой – добавлен элемент badge .

Кнопки в списке

Используйте item-button-right или item-button-left для добавления кнопки в строку списка.

Аватар объекта

Аватары используются для вставки изображения крупнее иконки, но меньше миниатюры. Используйте класс item-avatar для создания аватара.

Venkman

Back off, man. I’m a scientist.

We’re gonna go full stream.

Ugly little spud, isn’t he?

Winston

That’s a big Twinkie.

Tully

Okay, who brought the dog?

I am The Gatekeeper!

Slimer

Миниатюра объекта

Миниатюры по размеру больше иконок и представляют собой уменьшенные копии оригинальных изображений. Миниатюра задает высоту списка. Используйте item-thumbnail-left и item-thumbnail-right , чтобы выровнять миниатюры по вертикали слева и справа, соответственно.

Weezer

Smashing Pumpkins

Nirvana

Beastie Boys

Green Day

Вложенные списки

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

Карточки

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

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

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

Шапка и подвал для карточки

Настройка и заполнение карточки похожи на полноценную работу с экраном, то есть для карточки можно задать хедер и футер. Добавьте класс item-divider над или под контентом card.

Список из карточек

Используйте класс list card , чтобы создать карточку со списком.

Изображение в карточке

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

Pretty Hate Machine

Nine Inch Nails

Демонстрация карточки

Вот один из вариантов отображения карточки с использованием различных элементов: list card, item-avatar, item-body для изображений и текста, а также футер с классом item-divider.

Marty McFly

November 05, 1955

This is a «Facebook» styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of a tabs, icons aligned left, within the card-footer.

Формы

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

Функционал Ionic создает item-input из элемента label . В этом случае курсор фокусируется в нужной части поля ввода, даже если нажатие было произведено в произвольную часть строки.

Разработчикам стоит обратить внимание на существование различных типов ввода для HTML5, чтобы обеспечить пользователей подходящей клавиатурой.

Текстовые инпуты: название полей

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

Ввод текста: выравнивание названий полей для ввода

Используйте input-label для размещения названия поля слева от предполагаемого места ввода текста. При вводе текста пользователем, название поля не скрывается. Обратите внимание, что Вы также можете пользоваться атрибутом placeholder.

Ввод текста: фиксация названия полей для ввода

Название поля фиксируется над предполагаемым местом ввода текста. Следует задать item-stacked-label для каждого объекта (поле с названием и место для ввода текста), а input-label для места ввода предполагаемого текста. Пример также показывает использование атрибута placeholder для подсказки пользователям, какую информацию предполагается ввести.

Ввод текста: всплывающие названия полей для ввода

Незакрепленные названия полей схожи с фиксированными, за исключением включающейся анимации при вводе текста – название поля перемещается выше вводимого текста. Для каждого объекта (поле с названием и место для ввода текста) следует задать item-floating-label , а input-label для места, отведенного под ввод текста.

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

Вставка форм

По умолчанию, каждое поле для ввода занимает 100% ширины своего родительского элемента (списка). Тем не менее, Вы можете вставить список, применив класс list list-inset или card . Использование класса card создаст тень под нижней частью карточки. Если для родительского элемента списка установлен padding , то Вы создадите форму с отступами от краев дисплея.

Инпуты

Применение list-inset приведет к вставке всего списка, а с помощью item-input-inset из отдельного элемента списка можно создать инпут. Пример показывает помещение кнопки в объект.

Иконка в поле для ввода

Иконку легко можно разместить в левой части поля item-input, для чего следует добавить иконку перед input . По умолчанию иконка принимает цвет текста, которым написано название поля. Тем не менее, Вы можете использовать placeholder-icon , для придания ей такого же цвета, как само поле.

Поле для ввода в шапке

Наряду с кнопками, в шапке можно размещать поля для заполнения формы или отмены действия.

Переключатель

С технической стороны переключатель идентичен чекбоксу в HTLM, за исключением различий в их форме, а также более удобном использовании переключателя для работы на сенсорных устройствах. Функционал Ionic использует label , чтобы было проще нажимать на переключатель или перетаскивать его.

Переключателю можно задавать различные цвета, а также применять toggle-assertive для задания цвета активности переключателя.

Ниже приведен пример использования нескольких переключателей в пределах одного списка. Обратите внимание на то, что класс item-toggle применяется вместе с item для каждой строки списка.

Чекбокс

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

Чекбоксам можно задавать различные цвета, а также применять checkbox-assertive для задания цвета активности флажка.

  • Flux Capacitor
  • 1.21 Gigawatts
  • Delorean
  • 88 MPH
  • Plutonium Resupply

Радиокнопки

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

Ползунок

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

Селект

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

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

Вкладки

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

* Смотрите документацию по Вкладкам для создания интерфейса с использованием вкладок.

Содержащий вкладку элемент должен иметь класс tabs , к каждой вкладке должен быть применен класс tab-item . По умолчанию вкладки создаются только с текстом и без иконок.

Вкладки можно создавать в соответствии со стандартными цветами, которые предлагает Ionic (в примере используется цвет по умолчанию). Используйте эти классы, чтобы изменить цвет панели с вкладками: tabs-default tabs-light tabs-stable tabs-positive tabs-calm tabs-balanced tabs-energized tabs-assertive tabs-royal tabs-dark

Использование класса tabs-item-hide скрывает панель со вкладками, но оставляет видимым контент. Не забудьте добавить класс has-tabs в директиву ion-content .

Вкладки в виде иконок

Используйте tabs-icon-only вместе с классом tabs.

Иконка над названием

Стандартный вид размещения. Используйте tabs-icon-top вместе с классом tabs .

Размещение иконки слева от названия

Используйте tabs-icon-left вместе с классом tabs .

Вкладке в стиле Android

Используйте tabs-striped для элемента над классом tabs для создания вкладок в стиле операционной системы Android.

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

Управляйте цветовыми схемами для вкладок с помощью tabs-background- и классами tabs-color- , где принимает значение любого цвета, предлагаемого Ionic по умолчанию: default , light , stable , positive , calm , balanced , energized , assertive , royal , или dark

Добавьте класс has-tabs-top к шапке, чтобы она слилась с цветом вкладок.

Сетка

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

Просто добавьте несколько колонок в ряд, и они равномерно займут все доступное пространство. Нужно три столбца – добавьте три, нужно пять – добавьте пять. Здесь нет ограничений до 12 столбцов, Вам не нужно заранее задавать конкретные размеры каждой колонки. Более того, Вы можете настроить выравнивание контента в пределах каждой колонки по вертикали.

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

Разметка: равное расстояние между колонками

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

Разметка: заданные размеры колонок

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

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

Note: The borders and gray background in the demo were added so it’s easier to see the structure.

Explicit Column Percentage Classnames
.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%

Разметка: смещение колонок

Колонки могут быть созданы с отступом от края экрана слева. Пример кода:

Note: The borders and gray background in the demo were added so it’s easier to see the structure.

Offset Column Percentage Classnames
.col-offset-10 10%
.col-offset-20 20%
.col-offset-25 25%
.col-offset-33 33.3333%
.col-offset-50 50%
.col-offset-67 66.6666%
.col-offset-75 75%
.col-offset-80 80%
.col-offset-90 90%

Разметка: выравнивание колонок по вертикали

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

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

Адаптивная разметка

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

Например, если Вы хотите сгруппировать ряд колонок в ситуации, когда место для контента слишком мало, следует применить класс .responsive-sm

Responsive Class Break when roughly
.responsive-sm Smaller than landscape phone
.responsive-md Smaller than portrait tablet
.responsive-lg Smaller than landscape tablet

Каждый класс использует переменную SaaS, которую можно изменить по своему усмотрению. Вы также можете использовать responsive-grid-break для создания собственных классов.

Вспомогательные инструменты

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

Цвета

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

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

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

Чтобы кастомизировать цвета, Вам следует переписать те, которые уже существуют в файле ionic.css. Благодаря тому, что Ionic создан с использованием Sass, для дополнительных возможностей и гибкости в работе Вы можете изменить переменные внутри файла _variables.scss.

  • light
  • stable
  • positive
  • calm
  • balanced
  • energized
  • assertive
  • royal
  • dark

Иконки

Платформа Ionic предлагает бесплатный комплект из более 500 иконок. Используйте icon и класс Ionicon для отображения иконки, общий список которых Вы можете найти на главной странице Ionicons.

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

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

Отступы

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

Класс padding также используется для создания отступа, в 10px по умолчанию, между контентом и его границами. Ниже перечислены классы, которые не обязательно применять к каждому элементу, но они могут быть полезны.

  • padding отступ между содержанием элемента и его внешней границей со всех сторон
  • padding-vertical отступ сверху и снизу
  • padding-horizontal отступ слева и справа
  • padding-top отступ сверху
  • padding-right отступ справа
  • padding-bottom отступ снизу
  • padding-left отступ слева

The gray square represents an element, and the blue square represents the element’s content when padding has been applied.

Сила и мощь веб-компонентов

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

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

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

«КРОК», Воронеж, Иркутск, Краснодар, Москва, Нижний Новгород, Пермь, Самара, Санкт-Петербург, Троицк, Челябинск, от 120 000 до 240 000 ₽

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

Развитие стандартов

Упомянутый набор стандартов известен как веб-компоненты. Ранние версии стандартов в той или иной форме доступны в Chrome ещё с 2014, а полифиллы неуклюже заполняют пробелы в других браузерах.

Не так давно стандарты были усовершенствованы. Первоначальная версия теперь называется нулевой — v0, а для более зрелой первой версии виднеется поддержка во всех основных браузерах. В Firefox 63 добавлена поддержка двух стандартов из требуемых — Custom Elements и Shadow DOM — так что пора узнать, как можно стать HTML-изобретателем!

Разговоры о веб-компонентах идут давно, и существует множество доступных материалов по ним. Статью следует рассматривать как вводную по новым возможностям и ресурсам. Если вы хотите окунуться в тему глубже (а это определённо следует сделать), то можно почитать о веб-компонентах на MDN Web Docs и Google Developers.

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


Новый взгляд на элемент

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

Но куда вставляется разобранный HTML, если не в документ? Он добавляется в DocumentFragment — легковесную обёртку для хранения фрагмента HTML-документа, которая «растворяется» при вставке в DOM. Эти обёртки полезны для хранения набора элементов, требуемых позже, и выступают в роли контейнера, которым не нужно управлять вручную.

Теперь у нас есть DOM в неком «исчезающем» контейнере, а как им пользоваться?

Оказывается, можно просто вставить фрагмент в текущий документ:

Этот код работает прекрасно за тем исключением, что вы только что удалили контейнер. Если вы запустите код ещё раз, то получите ошибку, так как template.content исчез. Вместо этого сделайте копию фрагмента перед вставкой:

Название метода cloneNode говорит само за себя, но обратите внимание, что он принимает флаг для указания необходимости глубокого копирования.

Тег template подходит в любой ситуации, когда требуется повторять некоторую HTML-структуру. Он особенно полезен для задания внутренней структуры компонента, и потому входит в «клуб» веб-компонентов.

Новые возможности:

  • Элемент, который хранит HTML-код, но не добавляет его в текущий документ.

Обзорные материалы:

  • DocumentFragment
  • Дублирование узлов DOM с помощью cloneNode

Пользовательские элементы (Custom Elements)

Пользовательские элементы — флагман технологии веб-компонентов. Название говорящее — они позволяют разработчикам создать свои собственные HTML-элементы. Синтаксис версии v0 был громоздким, но сейчас пользовательские элементы в основном опираются на классы ES6. Если вы с ними знакомы, то знаете, как описать новый класс на базе существующего (наследование):

А что, если мы сделаем так?

До недавнего времени это считалось ошибкой. Браузеры запрещали наследовать как встроенный класс HTMLElement , так и любой из его потомков. Custom Elements снимают данное ограничение.

Браузер знает, что тегу

соответствует класс HTMLParagraphElement , но как он поймет, какой тег сопоставлен пользовательскому элементу? В дополнение к возможности наследования встроенных классов для установки такого соответствия доступно Registry пользовательских элементов:

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

Но зачем в имени тега нужен дефис? Органы стандартизации хотят сохранить себе возможность вводить новые HTML-элементы, так что разработчики не могут просто так начать определять свои теги или . Во избежание в будущем конфликтов все пользовательские элементы должны содержать дефис, а органы стандартизации обещают никогда не вводить новые HTML-теги с этим символом. Проблема решена!

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

  • connectedCallback вызывается при добавлении элемента в документ (в общем случае несколько раз, так как элемент может быть перемещён или удалён и заново добавлен);
  • disconnectedCallback — в противоположность connectedCallback ;
  • attributeChangeCallback срабатывает при модификации атрибутов из специального списка.

Немного более выразительный пример:

Использование элемента на странице выглядит так:

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

Также необходимо указать в Registry, что мы расширяем существующий тег:

Так как мы расширяем существующий тег, то используем его имя вместо пользовательского. Далее устанавливаем специальный атрибут is, чтобы браузер знал, какой вид кнопки требуется:

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

С этого момента уже можно применять традиционные техники веб-виджетов. Можно установить ряд обработчиков событий, стилизовать элемент и даже повторять его внутреннюю структуру через . Люди могут комбинировать ваш пользовательский элемент с их собственным кодом: через HTML-шаблонизацию, работу с DOM и даже в новомодных фреймворках, некоторые из которых поддерживают пользовательские теги в своих реализациях виртуального DOM. Пользовательские элементы используют стандартные интерфейсы, поэтому они позволяют реализовать действительно переносимые виджеты.

Новые возможности:

  • Наследование встроенного класса HTMLElement и его подклассов.
  • Registry пользовательских элементов и customElements.define() для работы с ним.
  • Специальные методы жизненного цикла для реагирования на создание элемента, вставку в DOM, изменений атрибутов и так далее.

Обзорные материалы:

  • ES6 Classes, в частности, наследование и ключевое слово extends

Теневая модель документа (Shadow DOM)

Мы сделали свой «дружелюбный» элемент и даже накинули немного стилизации. Теперь мы хотим использовать его на всех своих сайтах и делиться кодом с другими. Как предотвратить кошмар конфликтов, когда наш кастомизированный элемент столкнётся лицом к лицу с CSS других сайтов? Решение предоставляет Shadow DOM (теневой DOM).

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

Содержимое теневого корня стилизуется через добавление к нему (или
):

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

Что, если пользовательский элемент имеет нетеневой контент? Мы можем заставить их работать вместе, используя новый специальный элемент :

Если этот template будет прикреплен к теневому корню, то следующая разметка:

Будет отображена так:

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

Новые возможности:

  • Как бы «невидимая» DOM-структура, которая называется теневым корнем.
  • DOM APIs для создания теневых корней и доступа к ним.
  • Ограничение области видимости внутренних стилей теневого корня.
  • Новые псевдоклассы CSS для работы с теневыми корнями и их стилями.
  • Элемент

Собираем всё вместе

Давайте сделаем модную кнопку! Будем креативны и назовём элемент . Что именно сделает кнопку модной? У неё будут кастомные стили, которые позволят нам установить иконку и настроить внешний вид. Хотелось бы, чтобы вид кнопки сохранялся вне зависимости от сайта, на котором она используется, так что мы собираемся инкапсулировать стили в теневом корне.

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

Заключение

Стандарты веб-компонентов основаны на той идее, что имея множество низкоуровневых средств, люди будут комбинировать их способами, которые никто не предвидел во время написания спецификаций. Пользовательские элементы уже были использованы для упрощения создания VR-контента в вебе, породили несколько UI-тулкитов и многое другое. Несмотря на длительный процесс стандартизации, обещанные возможности веб-компонентов придают разработчикам больше сил. Теперь, когда технология доступна в браузерах, будущее веб-компонентов в ваших руках. Что вы построите?

Создание CSS файлов

Чтобы просмотреть это видео, включите JavaScript и используйте веб-браузер, который поддерживает видео в формате HTML5

Основы HTML и CSS

Half Faded Star

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

Рецензии

Half Faded Star

Ребята, классный курс! Может, работы проверять нужно только менторам?

Сначала кажется сложно, но стоит чуть начать и понеслось

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

Структура CSS

Чтобы просмотреть это видео, включите JavaScript и используйте веб-браузер, который поддерживает видео в формате HTML5

Основы HTML и CSS

Half Faded Star

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

Рецензии

Half Faded Star

Ребята, классный курс! Может, работы проверять нужно только менторам?

Сначала кажется сложно, но стоит чуть начать и понеслось


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

Преподаватели

Мохов Олег

Артем Кувалдин

Олег Семичев

Текст видео

Итак, давайте же поговорим о том, из чего вообще состоит CSS. Анатомия CSS очень простая, в нем есть две базовых компоненты: это селектор и правила. Селектор сопоставляет элементы на страницы, HTML-элементы, которые будут потом стилизованы соответственно правилам. Селекторов можно использовать несколько, тогда вы их будете писать через запятую. Правила же — это пара свойство-значение, что вы меняете и какое значение вы устанавливаете. Таких пар, таких правил может быть тоже несколько, тогда каждая из пар разделяется точкой с запятой. И еще одна из самых немаловажных частей CSS — это комментарии. Комментарии в CSS пишутся так же, как и в Javascript’е, то есть /* — это открывает комментарий, */ — закрывает комментарий. Я хотел бы обратить ваше внимание на то, на какие вообще символы опирается парсер в CSS. Важно понимать, что селекторы в CSS разделяются только с помощью символа «,», только так. Правила в CSS — это всегда набор каких-то букв, которые находятся между символом «<» и «>». Внутри правила пара свойство-значение всегда разделяются только с помощью символа «:». И, наконец, сами правила всегда разделяются только с помощью символа «;». Пока парсер не встретит точку с запятой, он считает, что правило не закончено, даже если логически вы его как бы закончили. И, наконец, комментарии — это всегда последовательность символов между символом «/*» и «*/». Почему я вообще заострил внимание на том, как работает парсер CSS? Давайте рассмотрим вот такой вот пример. Здесь не надо пока что понимать, что конкретно делает каждое правило, об этом мы поговорим чуть-чуть попозже. Это абсолютно правильный и корректный CSS-код. Теперь давайте его немножко видоизменим и удалим, например, символ «;» после правила color: red. Что произойдет в данном случае? Что сделает парсер CSS? Он не будет додумывать за вас и пытаться проинтерпретировать следующий код в text-align: center как следующее правило. Он просто воспримет этот код, как будто бы вы написали значение свойства color как red text-align: center. Ну и, соответственно, не будет этой строчки, вот так будет выглядеть ваш результирующий CSS. Ну и, конечно же, если вы CSS хоть немножечко знаете, то вы поймете, что это некорректное правило. И значение цвета не будет установлено. Другой распространенный тип ошибок, который очень часто встречается при написании CSS — это когда вы, например, забываете закрывающую фигурную скобку. Допустим, рассмотрим тот же самый пример, но здесь мы забыли закрывающую фигурную скобку вот здесь вот. Что в данном случае сделает парсер CSS? Парсер CSS возьмет и проигнорирует все, что вы написали после забытой закрывающей фигурной скобочки. То есть итоговый результат, который вы увидите в браузере, будет наложением вот этих вот стилей. Важно также помнить, что это правило действует только на файл, а не на весь CSS и на порядок подключения CSS. То есть если вы в одном из файлов забыли закрывающую фигурную скобочку, то именно в этом файле все стили будут проигнорированы.

Знакомство с объектно-ориентированным CSS (OOCSS)

Вы когда-нибудь встречали фразу «Контент – король»? Если вы являетесь веб-разработчиком, и ваша работа зачастую связана с созданием контента, то наверняка встречали. Это практически фундаментальное правило в деле привлечения посетителей на сайт.

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

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

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

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

Как было описано о OOCSS на вики-странице от GitHub , OOCSS основывается на двух фундаментальных принципах.

Отделение «шкуры» от структуры

Почти у каждого элемента на оформленной веб-странице есть различные визуальные свойства (т.е. «шкуры»), которые могут повторяться в различном контексте. Попробуйте поразмыслить над формированием бренда веб-сайта: цвета, «легкое» применение градаций, создание видимых или невидимых границ. С другой стороны, существуют также и невидимые свойства (т.е. структура), которая также может повторяться.

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

Перед применением принципов OOCSS, у вас должен быть приблизительно такой код CSS:

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

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

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

Разделение контейнеров и контента

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

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

В таком случае нам нужно будет сделать нечто подобное:

Либо мы можем завершить чем-нибудь менее сильным:

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

Стили, объявленные в приведенных выше примерах при помощи потомственного селектора, не могут быть использованы повторно, так как они зависят от конкретного контейнера (в данном случае как от боковой панели, так и от подвала).

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

Пример из жизни

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

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

Здесь приведено несколько уникальных стилей, предназначенных для элемента .header-inside. Но остальное может формировать модуль с возможностью его повторного использования. Т.е. у нас есть возможность абстрагировать структурные стили в отдельный класс для повторного использования. Вот что мы получаем в результате:

Стили, принадлежащие классу .globalwidth охватывают следующее:

* фиксированная ширина
* центрирование при помощи margin: auto
* относительное позиционирование для создания позиционирующего контекста дочерних элементов
* 20-пиксельные отступы с левой и правой стороны
* параметр overflow имеет значение hidden, что позволяет избежать видимости чрезмерного наполнения контента, выходящего за рамки.

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

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

После добавления стилей globalwidth к данным элементам, наша верстка должна выглядеть примерно так:

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

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

Одним из первопроходцев в OOCSS считается Николь Салливан ( Nicole Sullivan ). Она создала модуль с возможностью повторного использования под названием Media Object . За счет него, судя по ее словам, можно экономить сотни строчек кода .

Media Object – отличный пример мощи OOCSS, так как он может состоять из медиа-элементов любого размера, и вмещать в себя контент. Хотя многие стили, которые применяются к контенту внутри него (и даже к размеру самого медиа-элемента) могут быть изменены, у самого Media Object есть основные стили, которые помогают избежать ненужных повторений.

Я уже ссылался на некоторые преимущества OOCSS, но давайте рассмотрим их поближе.

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

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

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

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

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

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

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

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

То, что следует знать

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

Вы по-прежнему можете использовать ID

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

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

Здесь правило заключается в том, чтобы не использовать ID в селекторах. Т.е. как раз идеально то, что можно применять принципы OOCSS (и избегать при этом стилизации при помощи селекторов ID), и при этом применять ID в коде HTML для javascript или в качестве идентификаторов фрагментов кода.

Конечно же, вы можете встретить ситуацию, когда вы уже применили ID к элементу, в уникальности которого вы уверены. Итак, вы можете сэкономить пару байтов, не добавляя класс к этому элементу. Поэтому вместо стиля он будет использовать ID селектор. Но даже в этой ситуации гораздо безопаснее будет положиться на класс. Это позволит вам быть уверенными в том, что у вас не возникнет проблем в будущем.

Работа с маленькими проектами

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

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

Небольшое руководство по применению

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

Но вот что вам следует уяснить с самого начала. Это поможет вам влиться в работу с OOCSS:

* Избегайте понижающего селектора (т.е. не используйте .sidebar h3)
* Не используйте ID для стилизации
* Не прикрепляйте классы к элементам в таблицах стилей (т.е. не используйте div.header или h1.title)
* За исключением редких случаев, старайтесь не использовать !important
* Используйте CSS Lint для проверки кода CSS (и заранее будьте готовы к безумным настройкам )
* Используйте сеточные CSS

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

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Заключение. Рекомендации по CSS

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

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

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

Понятные имена для селекторов

У профессионала должен быть развит такой навык как умение давать хорошие имена селекторам. Как правильно придумывать названия? Первый совет: не называйте селектор, исходя из цвета или местоположения элемента. Это те вещи, которые с высокой долей вероятности могут быть изменены в ходе доработки дизайна. Клиент может прислать правки, где попросит сделать кнопку не зеленой, а голубой, и если вы уже назвали класс .green-button , возникнут проблемы: придется либо везде менять .green-button на .blue-button , либо оставить всё как есть, но потом это будет вводить вас (или другого разработчика) в заблуждение. То же самое касается привязки к местоположению: элемент .left-block вскоре может стать элементом .right-block , потому что дизайнер или заказчик так захотел. И вновь вы столкнетесь с проблемой несоответствия имени.

Так как же называть селекторы? Более правильным будет давать такие имена, которые указывают на назначение элемента либо действие стиля. Например, кнопка отмены может называться .cancel-button , форма для обратного звонка — .callback-form , всплывающее окно — .popup-window и так далее. Если вы создаете класс для выравнивания текста по центру, то будет уместным назвать его как-то вроде .text-center :

Также не стоит давать селекторам бессмысленные имена вроде #b1 , .sb , .abc и т. п., поскольку потом ни вы, ни другие разработчики не сможете понять, что же означают эти загадочные названия.

Несколько классов для одного элемента

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

Однако первая кнопка должна быть выровнена по левому краю, вторая — по центру, а третья — по правому краю. Как это сделать? Самое очевидное решение — создать дополнительные классы специально для выравнивания блочного элемента:

По сути, класс .block-left можно и не создавать, поскольку наша кнопка по умолчанию примыкает к левому краю. Итак, нужный класс теперь можно использовать в паре с классом .button :

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

Группирование стилей

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

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

Железных правил относительно организации групп в CSS-файле не существует. Однако есть несколько популярных приемов, которые помогут удобно сгруппировать стили:

Группируйте стили, которые относятся к определенной секции страницы. Например, стили для шапки сайта помещайте в одну группу, стили для футера — в другую, стили для навигации — в третью и т. д.

Группируйте стили, относящиеся к одной задаче. К примеру, стили для разметки размещайте в одной группе, стили для форматирования — в другой и т. д.

Для выделения групп используйте обычные CSS-комментарии. Это общепринятый способ создания разделов в таблицах стилей. Комментарии старайтесь оформлять так, чтобы они были хорошо заметны. Например:

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

Несколько CSS-таблиц

Когда таблица стилей расширяется до огромных размеров, становится неудобно искать и редактировать в ней стили. В этом случае удобным решением может стать разделение одной CSS-таблицы на несколько файлов. Безусловно, здесь нужно иметь чувство меры: не стоит создавать 20-40 штук файлов со стилями для каждой секции сайта (это сильно загрузит веб-сервер), однако будет разумным разъединить большие группы стилей. Например, вы можете поместить код разметки в файл layout.css , основные стили — в main.css , медиа-запросы — в media.css и т. д.

Затем понадобится подключить все эти файлы к HTML. Можно добавить каждый файл по отдельности через тег
, но есть способ получше: создайте отдельную внешнюю таблицу стилей (скажем, styles.css ), внутри которой используйте правило @import для подключения всех остальных таблиц стилей:

В принципе, это весь код, который должна содержать таблица styles.css . Подключите ее к HTML-документу (другие таблицы подключать этим образом не нужно):

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

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

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

Среди преимуществ препроцессоров стоит выделить:

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

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

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

Самые распространенные препроцессоры

, а на другой — тег

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

Завершение

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

Введение в CSS

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

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

Применение стилей обладает рядом преимуществ:

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

Привязка стилей CSS

К документу стили могут привязываться несколькими способами:

    С помощью отдельного файла стилей *.css. Для этого в контейнере указывается:

где style.css — название файла со стилями, который находится в той же папке, где и документ.

Можно указать все стили в документе в контейнере :

Разрешается, но не рекомендуется использование внутренних стилей вида:

После этого текст в заданном абзаце будет выбранного стиля.

Правила записи в файле стилей CSS

1. Чтобы описать стили, применяемые на веб-странице используют селекторы, которые имеют свойства и значения. Селектором могут являться классы, идентификаторы и теги. Для применения стилей в документе к тегу p, используют следующую запись в файле стилей:

После этого в документе весь текст, стоящий в параграфе станет желтого цвета с левым отступом в 10 пикселей.

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

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

4. Допускается использование комментариев, которые облегчают поиск среди стилей. Комментарии имеют вид:

5. К свойству можно применять только то значение, которое ему соответствует.

6. Значения в свойствах селекторов также имеют определенные правила:

  • Размеры могут указываться в абсолютных (cm, mm) и относительных (px,%,em) единицах
  • Число может быть как целое, так и десятичное (0.5; 2)
  • В кавычки берутся только какие-либо названия, в отличие от значений в HTML
  • Цвета могут задаваться по названию (yellow, black, aqua), с помощью RGB (rgb (0,255,0)) и шестнадцатиричным значением (#33FF99; #993300)
  • Адреса могут быть относительными (background:url(‘/images/picture.jpg’)) и абсолютными (background:url(‘https://www.spinch.net.ua/picture.jpg’)).

Попробуйте создать текстовый документ, описать в нём несколько стилей и сохранить его в формате *.css. После чего привязать файл стилей к веб-документу. Как создать HTML-страницу читайте здесь.

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