Верстка \ CSS 3

CSS-архитектура Блок-Элемент-Модификатор (БЭМ)

От автора: БЭМ или Блок-Элемент-Модификатор – это методология, система именования, а также набор инструментов. БЭМ создана в Яндексе и предназначена для быстрой разработки в крупных командах. В этом разделе мы остановимся на концепции и системе именования.

Продолжить чтение

Верстка \ CSS 3

Золотые правила по написанию чистого CSS

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

Продолжить чтение

Верстка \ CSS 3

Сортировка и выравнивание элементов в Grid Layout

От автора: в этом уроке вы научитесь изменять порядок следования элементов с помощью модуля Grid Layout, после чего мы обсудим, как настроить выравнивание этих элементов в сетке. Мы уже изучили парочку важных тем по Grid. Начали мы с различных способов размещения элементов в Grid Layout, после чего познакомились с алгоритмом авторазмещения в сетке. Для правильной работы демо в этом уроке рекомендую использовать последнюю версию Firefox (52 на момент написания статьи) или Chrome (57 на момент написания статьи).

Продолжить чтение

Верстка \ CSS 3

Изучение архитектуры CSS: атомный CSS

От автора: если БЭМ – это любимец сообщества, то атомный CSS – мятежный диссидент. Thierry Koblentz из Yahoo ввел и объяснил это понятие в 2013 в своей статье «изучение лучших CSS практик». Атомный CSS использует плотную библиотеку имен классов. Классы часто названы сокращениями и проистекают из того контента, на который назначаются. В атомном CSS можно задать, что будет выполнять класс, но связи между именами классов и типами контента нет (по крайней мере, между классами, которые используются в стилях).

Продолжить чтение

Верстка \ CSS 3

Свойство speak

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

Продолжить чтение

Верстка \ CSS 3

Простое тянущееся меню на Flexbox

От автора: мне понравилось выезжающее меню на сайте The New Tropic. Но меня заинтересовала не сама выезжающая часть, а то, как элементы внутри меню занимают пространство. Они растягивались, занимая все пространство, и никогда не сжимались слишком сильно. Такое довольно легко реализовать на flexbox! Давайте немного разберемся.

Продолжить чтение

Верстка \ CSS 3

CSS псевдоклассы: стилизация элементов по индексам

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

Продолжить чтение

Верстка \ CSS 3

Создание выезжающего меню с помощью CSS Grid

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

Продолжить чтение

Верстка \ CSS 3

CSS псевдоклассы: стилизация полей форм по введенным данным

От автора: давайте разберем несколько псевдоклассов, заточенных специально под поля формы и введенные данные. С помощью этих псевдоклассов можно стилизовать поля по валидности введенных данных (есть ли у поля атрибут required или enabled).

Продолжить чтение