Саша Грайф відкрито дивувався чи 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) або a, коли вікно перегляду браузера відповідає певним критеріям (наприклад, width >= 768px) @media Синтаксис неймовірно корисний для створення макетів, оптимізованих для різних умов.
О, і ми навіть не торкалися того, як @media відноситься до доступності, завдяки своїй здатності до застосовувати стилі на основі вподобань користувача (наприклад, prefers-reduced-motion). Отже, окрім створення умовних макетів, медіа-запити є гарним наступним кроком до розуміння інклюзивного дизайну.
Почесні згадки
Розбити CSS на список із п’яти обов’язкових властивостей і селекторів важко, особливо зараз, коли сьогодні CSS потужніший, ніж, скажімо, п’ять років тому. Є ряд інших елементів, які я дійсно хотів включити, наприклад (без певного порядку):
calc()has()colorfontoverflowposition(особливо це)z-index
Але я відстоюю свій вибір. Вивчення CSS важливіше, ніж запам’ятовування списку властивостей. Це подорож, і я вважаю, що п’ять, які я вибрав, створюють гарний маленький шлях навчання, який закладає основу для написання гарних правил стилю та наступних кроків для глибшого занурення в CSS.
Гаразд, розкажи мені своє!
Не згодні з моїм списком? Ти повинен! Б’юся об заклад, у вас є кілька розумних думок, і я хочу побачити, як би ви увійшли до списку Топ-5.
