Данный набор общих рекомендаций призван сохранить основную ценность вашей работы. Его можно использовать как руководство для тех, кто работает над реализацией дизайна или как инструмент для оценки существующего проекта. Таким образом, независимо от того, просматриваете ли вы код, проверяете CSS или проводите собеседование с кандидатами на роль дизайнера, эти принципы должны обеспечить структуру, которая выходит за рамки конкретных методов и приводит к общему подходу в реализации дизайна.
Структурированность
Смысл данного принципа заключается в том, что содержание документа (HTML) должен быть понятен без CSS. Это означает, что мы используем упорядоченные уровни заголовков и списки.
Вы не должны отказываться от использования таких вещей, как метки ARIA, атрибуты alt и любые другие вещи, которые могут понадобиться. Это может показаться не таким уж большим делом: используете ли вы тег привязки или кнопку (даже если они визуально идентичны). Однако они передают разные значения и обеспечивают разные взаимодействия. Семантическая разметка передает это значение поисковым системам и вспомогательным технологиям и облегчает переназначение работы на другие устройства. Это делает проекты более перспективными. Самый простой тест на структурированность - просмотр вашего HTML в браузере без стилей:
- Это можно использовать без CSS?
- У него все еще есть видимая иерархия?
- HTML сам по себе передает смысл?
Эффективность
Тщательно продумайте код, чтобы он был лаконичен и не содержал ненужной разметки и стилей. Очень часто чрезмерное использование HTML является результатом непонимания CSS или базовой структуры. Оценивая эффективность проекта, нужно задать два важных вопроса:- Могу ли я сделать то же самое с меньшим количеством кода?
- Каков наилучший способ оптимизации при минимальных расходах?
Стандартизация
Создание веб-сайта или приложения обычно сводится к установлению правил, регулирующих размер заголовков, общую ширину поля и стиль для каждого типа кнопок. В простом CSS вы должны поддерживать эти правила во внешнем руководстве по стилю и не забывать их правильно применять. Поскольку мы используем стандартизированные значения, полученные из переменных, наш CSS не имеет собственных числовых значений. Все унаследовано от централизованного значения.
Чтобы проверить стандартизацию, просмотрите CSS и найдите любые жестко закодированные единицы: пиксели, цвета, ems и т.д. Большинство предварительно обработанных CSS должны использовать централизованные переменные, и вы не должны видеть числовых, пиксельных или шестнадцатеричных значений в отдельных компонентах. Иногда может быть целесообразно добавить несколько пикселей, чтобы отрегулировать положение отдельного компонента, но даже такие случаи должны быть редкими и заставлять вас дважды проверять свои стандарты.
Абстрактность
Данный принцип заключается в определении более крупных общих элементов, которые необходимо использовать на протяжении всего проекта. Начиная с ввода текста и полей формы, вплоть до различных вариантов навигации. Подумайте об этом так: если бы ваш CSS был открыт с открытым исходным кодом в качестве фреймворка, как бы вы сделали элементы дизайна? Ключевым моментом здесь является рассуждение о каждом элементе в более общих терминах, а не в конкретном контексте вашего проекта. Когда вы смотрите на определенный элемент, разбейте его на части и задайте для каждой из них общие стили независимо от конкретной реализации, с которой вы сейчас работаете. Наиболее распространенными элементами являются типографика (стили заголовка, высота строки, размеры и шрифты), элементы формы и кнопки. Но другие элементы также должны быть "интегрированы": теги, формат даты, времени, цены и т.д. При проверке вашего проекта на абстракцию спросите себя:- Как создать данный элемент, чтобы использовать его повторном в другом проекте?
- Как разбить его на части, которые будут полезны во всем приложении?
