Саша Грайф открыто удивлялся стал ли CSS слишком большим. Со всеми плюшками, появившимися в браузерах за последние пару лет — контейнерные запросы! синтаксис относительного цвета! каскадные слои! логические свойства! диапазоны в медиа-запросах! отдельные преобразования! :has() селектор! — и все, что на возможном горизонте — CSS-переключатели! гнездование! смешение цветов! анимация, связанная с прокруткой! стили с ограниченной областью действия! — в наши дни определенно существует другая кривая обучения CSS как для новых, так и для опытных фронтендеров.
Возможно, было время, когда можно было знать большинство свойств CSS и то, как они работают. Те дни давно прошли, по крайней мере, для такого старого мастера, как я. Но такой вид вызывает вопрос: какой CSS вам обязательно нужно знать?
Винкас Стонис недавно взял удар по списку. Крис собрать один вместе на основе функций, выпущенных после CSS3. Вероятно, у вас есть представление о том, что вы бы включили в список. Если бы мне пришлось составить Топ-5 и ограничиться только свойствами и селекторами, это могло бы выглядеть примерно так…
writing-mode
Я не могу сказать достаточно о writing-mode имущество. Что делает его важным — особенно с точки зрения обучения — так это то, что он настраивает вас на инклюзивные принципы, которые учитывают создание макетов, независимо от языка пользователя. Хорошее понимание writing-mode приведет к пониманию логические свойства и значения, а те, в свою очередь, подготовили почву для понимания документооборота и мышления с точки зрения block, inline, startи end а не физические направления.
display
Мне трудно поверить, что кто-то может написать хороший CSS, не имея четкого представления о display имущество. Это и свойство, и основа для создания макетов. Без него нет Flexbox или CSS Grid, что делает его своего рода привратником для понимания этих важных функций.
Плюс display свойство прекрасно дополняет writing-mode. Это именно то, что вам нужно один раз writing-mode познакомил вас с документооборотом и логическими направлениями. Вам понадобится свойство, чтобы либо изменить обычный поток элемента (например, изменить блочный элемент на встроенный), либо начать размещать вещи (например, создавать гибкий контекст макета), и именно здесь display вступает в игру.
margin / padding / border
Тьфу, я здесь полностью обманываю, но думаю, что учусь margin, paddingи border вместе как-то неизбежно. Они все части Коробочная модель, все помогают с интервалами и стилем, и все требуют знакомства с Единицы длины CSS. Знание того, для чего предназначены эти свойства и как они влияют на вычисляемый размер элемента, безусловно, дает вам гораздо больше контроля над стилем и устраняет любую путаницу в отношении того, почему элемент имеет такой размер — обычная головная боль CSS!
::before и ::after
Еще один, где я немного обманываю. Да, ::before и ::after — это два отдельных псевдоэлемента, но опять же, я не могу представить изучение одного без другого. Это двойка!
Я помню, как ошеломительно для меня было узнать, что они существуют и могут быть использованы для создания чего угодно из крутые эффекты пользовательского интерфейса для завершения однораздельные иллюстрации. Он открывает новые возможности и дает первое представление о том, насколько на самом деле мощен CSS.
@media
Уф, я уже нахожусь в своем пятом и последнем пункте в списке и чувствую, что здесь еще так много хороших качеств CSS. Но если мне придется выбрать одну последнюю вещь, это будет медиа-запросы. Почему? Потому что это основной ингредиент для создания плавных, гибких макетов и различных контекстов просмотра. Запросы контейнера может закончиться тем, что я вычеркну это из моего списка, когда оно созреет, но пока, @media является отличным учебником для адаптивного дизайна.
За гранью этого, @media это хороший первый шаг к условным свойствам CSS. Пишем ли мы запрос на основе типа используемого устройства (например, screen or print) или когда область просмотра браузера соответствует определенным критериям (например, width >= 768px) @media синтаксис невероятно полезен для создания макетов, оптимизированных для различных условий.
О, и мы даже не коснулись того, как @media относится к доступности, благодаря своей способности применять стили на основе предпочтений пользователя (например, prefers-reduced-motion). Таким образом, в дополнение к созданию условных макетов, медиа-запросы — хороший следующий шаг к пониманию инклюзивного дизайна.
Почетные упоминания
Собрать CSS в список из пяти обязательных свойств и селекторов сложно, особенно сейчас, когда CSS стал более мощным, чем он был, скажем, даже пять лет назад. Есть ряд других пунктов, которые я действительно хотел включить, например (в произвольном порядке):
calc()has()colorfontoverflowposition(особенно это)z-index
Но я остаюсь при своем выборе. Изучение CSS важнее, чем запоминание списка свойств. Это путешествие, и я думаю, что те пять, что я выбрал, проложат хороший небольшой путь обучения, который подготовит почву для написания хороших правил стиля и следующих шагов для более глубокого погружения в CSS.
Хорошо, скажи мне свое!
Не согласны с моим списком? Вам следует! Бьюсь об заклад, у вас есть умные мнения, и я хочу посмотреть, как бы вы завершили список Топ-5.
