Аксіоматичний CSS – метод

Аксіоматичний CSS чимало експертів розглядають як методологію, або ідеологію, але потрібно відзначити, що чіткої інформації про цю методологію дуже мало і тому, я спробую прояснити це питання за допомогою власного дослідження. Отже до справи.

На жаль, станом на сьогодні, не існує конкретного стандарту або методології, яку можна було б назвати “аксіоматичним CSS”. Особисто я вважаю, що термін “аксіоматичний” може вказувати на підхід до написання CSS, в якому застосовуються певні базові принципи або аксіоми для покращення структури та подальшого обслуговування коду.

Аксіоматичний метод у науці бере свій початок ще з глибокої древності. У математиці аксіоматичний метод зародився в роботах давньогрецьких геометрів, але використовувався і в інших дисциплінах, наприклад, у логіці Аристотеля. Багато інших сучасних наук також розвиваються на аксіоматичній основі, тобто на базі відповідної системи аксіом (аксіоматики). Що таке аксіома всі пам’ятають ще з шкільної програми, хто не знає – вікіпедія на допомогу.

Heydon Pickering

Heydon Pickering

Чому саме аксіоматичний? Вважається, що раніше за інших на аксіоматичний метод звернув увагу Хейдон Піккерінг у своїй доповіді про «лоботомовану сову».  Я витратив багато часу на пошук інформації чи це дійсно так і впевнився, що окрім нього раніше ніхто більше про аксіоматичний метод CSS не згадував.

Методологія аксіоматичного кодування дійсно пов’язана із зусиллями Хейдона Піккерінга, який працював над удосконаленням структури CSS для полегшення розробки та обслуговування коду. Одним із його підходів було застосування “аксіом” або базових принципів для організації стилів та зменшення залежностей між різними компонентами.

Однак важливо відзначити, що сам термін “аксіоматичний CSS” може не набув популярності, але варто припустити, що різні джерела можуть використовувати інші терміни для опису цієї  самої методології.

Я обов’язково напишу окрему публікацію про цю доповідь, адже вона на те заслуговує, але сьогодні говоримо про саму ідею аксіоматичного методу CSS.

Він говорить наступне:

Я поганий математик, але постулати Евкліда справили на мене велике враження: набір тривіальних правил, або аксіом, які формують основу для складного та прекрасного предмета – геометрії. Завдяки Евкліду я розумію, що навіть найскладніші системи мають бути засновані на фундаментальних правилах, і CSS нічим не відрізняється. Крім того, розбиття на модулі складного інтерфейсу – це необхідний крок на шляху його зрілості, і будь-який інтерфейс, який не дотримується цих базових принципів, втратить свою прозорість.

Ще одна цитата:

Якщо ви зовсім відключите CSS на сторінці, можливо, помітите дві речі. Перша – те, що сторінка вперто зберігає гнучкість: контент вкладається в область перегляду незалежно від розмірів. Друга — за умови, що ви написали відповідну стандарту та доступну розмітку, ви, напевно, побачите, що контент вже стилізований якщо й не надто красивим, то хоча б прийнятним чином. Вбудовані стилі браузера подбали і про це.

Який висновок можна зробити з цих цитат?

CSS нічим не відрізняється від інших точних предметів і має базуватися на фундаментальних правилах (аксіомах), які роблять CSS максимально ефективним. За приклад наводяться вбудовані стилі браузера. Вони можуть служити відмінним прикладом застосування фундаментальних правил. Вбудовані стилі браузера визначають зовнішній вигляд стандартних HTML-елементів, і вони можуть використовуватися як основний фундамент для подальших налаштувань та стилізації ваших елементів.

HTML завжди структурований і має вбудовані стилі браузера за замовчуванням і втручатися в деякі з цих стилів варто лише тоді, коли стиль браузера за замовчуванням не дозволяє Вам досягти необхідної стилізації!

HTML вже має структуровану семантику для представлення вмісту веб-сторінки, і браузери надають стилі за замовчуванням для цього HTML-коду. Зазвичай ці стилі браузера визначають основний вигляд тексту, розміщення блоків і так далі.

Загалом, важливо дотримуватися принципу “прогресивного покращення” (progressive enhancement) при розробці веб-сайтів. Це означає, що ви використовуєте вбудовані стилі браузера як основний фундамент і тільки тоді втручаєтеся в них, коли вам потрібно досягти конкретного дизайну або стилізації, яку браузер за замовчуванням не надає.

Переваги принципу “прогресивного покращення” (progressive enhancement):

Нормалізація стилів: Використання вбудованих стилів браузера дозволяє забезпечити консистентний вигляд між різними браузерами без додаткових втручань.

Доступність: Використання вбудованих стилів браузера покращує доступність, оскільки браузери вже надають базовий вигляд, який може бути зручним для користувачів.

Ефективність та швидкість: Вбудовані стилі браузера можуть бути оптимізовані для швидкого відображення сторінок, і ви використовуєте цю оптимізацію за замовчуванням.

Однак, якщо вбудовані стилі браузера не влаштовують вас і ви хочете досягти конкретної стилізації, тоді можна використовувати власні CSS-стилі, перевизначаючи або доповнюючи вбудовані правила.

 А посіяне в добрій землі, це той, хто слухає слово й його розуміє, і плід він приносить, і дає один у сто раз, другий у шістдесят, а той утридцятеро.

—Від Матвія, (Мт. 13:1-23)

Мені здається важко не погодитися з такими висновками, ловлю себе на думці, що після знайомства з ідеєю ааксіоматичного методу CSS я став його прихильником, але за умови, якщо до нього буде достатьно інтегрована семантика. І йому більше буде підходити назва аксіоматично – семантичний CSS.

Я думаю, що застосування “аксіоматичного – семантичного CSS” є цікавим підходом, який враховує не лише організацію стилів, але й їхню семантику або значущість. Такий підхід може сприяти покращенню читабельності коду, легкості обслуговування та стилізації елементів.

Якщо ми враховуватимемо інтеграцію семантики, то це може включати в себе:

Використання семантичних HTML-тегів: Замість загальних тегів ми будемо використовувате теги, які найкраще відображають семантику вашого вмісту (наприклад, <header>, <nav>, <main>, <footer>).

Призначення класів та ідентифікаторів згідно із значенням: Ми також будемо надавати класам та ідентифікаторам імена, що відображають їх семантичне призначення, замість технічних або стилістичних аспектів.

Модульність та повторне використання: Розділяти стилі на модулі, які можна легко повторно використовувати для подібних елементів з аналогічною семантикою.

Розуміння внутрішнього макету: Визначати стилі відповідно до внутрішнього макету, розуміючи семантику кожного елемента та його взаємодію з іншими.

Усі вище перераховани принципи підкреслюють важливість дотримання семантики веб-сторінки, яка допомагає не лише в створенні стильового вигляду, але і в розумінні її змісту та комфортної взаємодії з користувачем.

Мій особистий ідеологічний підхід до FrontEnd – інклюзивне аксіоматично-семантичне кодування.

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

Концентрація на семантиці покращує не лише доступність, а й зрозумілість коду для інших розробників.

Залишити відповідь