Робочі моменти: методології верстки

Розбираємось з методологіями верстки і структуруємо розмітку

Вперед!

Методології верстки... всі до цього приходять

Всім привіт! Свята видаються як треба, у вільний час взявся за декілька речей, що хвилювали мене раніше, але "руки до них не доходили". Окрім парочки курсів по мат. логіці і SICP від прекрасного онлайн університету Хекслет мною було вирішено розібратись з методологіями верстки. Варто обмовитись, що ця сфера навичок для багатьох розробників межує з "зоною болі", адже кожен має свою методику верстки, свої правила і тд, тож взяти і почати верстати по іншому методу, що розуміє під собою деякі домовленості щодо код-стайлу досить непросто. Тим паче, методик немало, що породжує своєрідні муки вибору і може взагалі демотивувати в пошуках в цьому напрямку чи завести в глухий кут. Що ж, будемо розбиратись з цим разом!

З самого початку свого навчання і роботи над проектами я не особливо задумувався над ефективністю методик верстки. Основними вимогами була семантичність верстки і "DRY" код, тобто мінімальне застосування класів і використання по максимуму можливостей каскадів в цсс(в розумних межах звісно). Все жило наче прекрасно, та й зараз живе в деяких проектах, обмовлюсь, що не часто стикаюсь з необхідністю взяти і переставити блок в інше місце, тобто в незалежності блоків як такій необхідності не було. Сайти верстаються по певному дизайну, в межах проекту один і той самий код, скажімо віджети, навігація і тд може використовуватись і бути як і раніше семантичними. Розділу частин коду по папкам з подальшими інклудами - не було. А для пришвидшення роботи застосовувались препроцесори цсс і власне горя не зналось. Така от преамбула.

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

ПС Знайшов цей чорновик поста, якому вже пару тижнів, нехай він буде свого роду вступом до декількох статей по методологіям. Мій досвід, враження, вибір. І так, кандидати, яких розглянемо наступні:

  • OOCSS - об'єктно орієнтований цсс, декларує два основні принципи: розділяти структуру і представлення, розділяти контент і контейнер( мінімізація каскаду)
  • BEM - блок, елемент, модифікатор. Схожий на попередній метод, проте має свої нюанси в тому числі принцип іменування сущностей і відокремлення частин код в окремі файли
  • MCSS - багатошаровий цсс, для мене "темний коник", але от шанс краще розібратись в цьому, тим паче Роберт Харитонов представив файний ролик процесу верстки по методу мцсс від початку до кінця.
  • SMACSS - масштабуєма модульна архітектура цсс. Розглядалась в пошуках методологій і дуже нагадала свого роду синтез ООЦСС і БЕМ. Але теж заслуговує бути розглянутою, роьота варта уваги.
  • OPOR - те, що штовхнуло мене гратись з цими методами, комбінувати їх - метод, правила якого вміщуються в одну сторінку. Збірка Артема Сапєгіна, такий собі мікс попередніх методик, варто уваги.
  • Класична верстка - максимальне використання семантичності хтмл і можливостей цсс(каскади), "Сухий метод". З масштабуванням і повторним використанням коду тут туговато...
  • NoNameCSS - те, що вийшло у мене в тому місці, де теорія зіткнулась з моєю практикою і повсякденною роботою.

UPD (06.07.2014): В список додам ще один пункт:

  • Inclusion - препроцесорний фреймворк. Хоч і не методика, але цікавий підходом. Суть в тому, щоб створювати семантичну розмітку, йменування класів елементів вести як зручно і наглядно. За основу взята конвенція іменування БЕМ, але тільки в плані структури. Ми не абстрагуємо імена блоків на рівні розмітки, ми описуємо їх по вмісту і значенню. А от в частині стилів - починається цікаве. Фреймворк на основі міксинів з аргументами, що і є тими абстракціями і от вони вже і приміняються до елементів розмітки. До того ж в міксинах містяться екстенди, що робить цсс максимально сухим (втрачається читабельність, хоча хто його читає...), і відповідно мінімального розміру. Про це окремий пост))

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


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям