Зміст
- 01. Додайте порядок і структуру до файлів
- 02. Створіть базовий файл CSS
- 03. Відокремте свій макет від інших CSS
- 04. Пишіть свій CSS модульно
- 05. Уникайте довгих селекторних ланцюгів
- 06. Не забувайте про свої принципи
Ми всі були там. Коли ви повільно відкриваєте файл styles.css вашого останнього вражаючого CSS, ви бачите, що він має довжину 2000 рядків, а клас, який вам потрібно змінити, вдарився посередині.
Ви самотні, злякані і не уявляєте, чи можна редагувати цей клас, оскільки це може щось повалити на зовсім іншій сторінці. В крайньому випадку, ви переходите до кінця файлу і створюєте новий клас для зв’язку з елементом, у якому вже є сім інших класів. Це звичайний досвід для будь-якого розробника, який працює з CSS досить довго (див. Наші улюблені приклади анімації CSS для натхнення CSS).
Отже, давайте поговоримо про те, якою має бути мета при написанні хорошого CSS. Мета - не створити розумні та складні правила. Це не для того, щоб спроектувати рядок селектора, щоб він був якомога ширше застосовним. Метою хорошого CSS має бути написання простих, модульних і, головне, легко підтримуваних правил. Тут ми пропонуємо вам кілька простих та розумних правил, які допоможуть вам створити та підтримувати здорову базу коду.
Якщо вам потрібні додаткові поради щодо веб-дизайну, не пропустіть наші сторінки щодо розміщення веб-сайтів, веб-хостингу та найкращих інструментів веб-дизайну. Маєте новий сайт на горизонті, але не хочете кодувати? Виберіть ідеального конструктора веб-сайтів.
01. Додайте порядок і структуру до файлів
Спочатку розгляньте можливість розбиття стилів на власні файли CSS на основі узгодженої між розробниками структури, а потім дотримуйтесь її. Відкрити погано організовану папку стилів - це жахливий досвід. Ви навіть не уявляєте, які стилі є в яких файлах і як зміна одного стилю вплине на інший. Пам’ятайте, що ваш сервер не міг би дбати про те, що б ви надали кожному стилю власний файл, а потім зв’язали їх усі або зменшили в один в кінці.
Ваш сайт завантажувався б дуже повільно, але сервер чудово справлявся б з їх читанням. Структура файлу призначена лише для людей, і якщо ваша структура файлу не надає жодного значення, її слід переглянути.
Одним із найменш заплутаних способів структурування файлів є сторінка.Якщо ви працюєте над сторінкою about і щось потребує виправлення, перейдіть до файлу about.css. Це дозволяє уникнути проблеми впливу стилів за межами about.css. Тоді все, що вам потрібно зробити, це перевірити зміни у файлі about.css.
Однак це не вирішує проблему довжини файлу. Значно довга сторінка може легко містити понад 1000 рядків CSS. Структурування файлів внутрішньо - це спосіб пом’якшити це. Сортування в алфавітному порядку у файлі означає, що якщо ви шукаєте щось, що починається на С, а його там немає, то ви знаєте, що воно не включене.
Це також працює для стилів, які вже існують. Згрупувавши все за алфавітом, ви зможете побачити, чи стиль був написаний три-чотири рази у всьому файлі.
.boundingBox {відступ: 1rem; } / * .contactHeader пішов би сюди, якби він існував, оскільки його немає, ми можемо впевнено припустити, що він не існує * / .headerChildren {padding: 10px 5px; фон: #ccc; }
02. Створіть базовий файл CSS
Не всі стилі належатимуть лише до однієї сторінки, і часто зустрічаються стилі, які існують на декількох сторінках. Також часто зустрічаються стилі, які стосуються бізнесу в цілому, а не лише веб-сайту. Тут ви будете писати дуже загальні стилі, які насправді ні до чого не належать. Наприклад, різні кольори, які ви будете використовувати, шрифти, типографіку, а також будь-які скидання, характерні для вашого сайту.
Можливо, ви також захочете включити в цей розділ стилі, подібні до компонентів, такі як кнопки, елементи форми та стилі попереджень. Подумайте про цей розділ як про керівництво стилем для вашого сайту. Це не тільки дасть вашому веб-сайту простіший спосіб підтримувати CSS, але й забезпечить рівномірне застосування стилів.
Тут ви можете включити стилі, що належать до розділів сайту, які повторюються на декількох сторінках, таких як верхній або нижній колонтитул. Якщо у вас є значна кількість стилів у цих розділах, це може допомогти розбити їх на власні файли, такі як header.css та footer.css.
Тільки будьте обережні, щоб не почати включати стилі до тих файлів, які насправді не належать. Пам’ятайте, що брудна структура папок - це чудовий спосіб ускладнити підтримку CSS.
03. Відокремте свій макет від інших CSS
Тим, хто знайомий із SMACSS, може бути відома думка, що стилі макета можна відокремити від більш загальних стилів, які ви застосовуватимете на своєму веб-сайті. Виділяючи ці стилі від решти вашого CSS, це означає, що ви можете легше зосередитись на тому, як повинні виглядати різні розділи, і менше на тому, як вони повинні поводитися щодо розділів, близьких до них.
Цього можна досягти, додавши систему сіток, таку як популярна бібліотека Bootstrap, або виконавши її самостійно. На цьому етапі бажано поговорити з дизайнером сайту, оскільки багато дизайнерів використовуватимуть систему сіток, коли створюватимуть сайт, і ви захочете наблизитись до цього якомога ближче.
04. Пишіть свій CSS модульно
Поділ вашого макета CSS відкриває ще один спосіб спрощення вашого CSS. Існує багато різних методологій, пов’язаних із CSS. Існують SMACSS, BEM, OOCSS, щоб назвати декілька, але незалежно від того, чи називаєте ви їх розділами, частинами, модулями, компонентами чи блоками, всі вони мають одне спільне. Тобто вони намагаються додати багаторазові та спеціалізовані деталі до вашої таблиці стилів.
Роблячи це, ми зберігаємо свої стилі як СУХІ (не повторюйтесь), наскільки це можливо, і створюємо інкапсуляцію. Побічні ефекти в CSS - це велика справа. Браузер застосовує CSS істинним чи хибним чином: якщо стиль відповідає застосованому, якщо ні, то він пропускається. Це дозволяє стилю, який не повинен був застосовуватися автором, все одно збігатися та змінювати вигляд сторінки. Коли ми пишемо CSS більш модульно, ми зменшуємо ці побічні ефекти, інкапсулюючи стилі.
Компонент або модуль - це розділ HTML, який згрупований і стилі якого впливають один на одного. Створення модульного CSS полягає в тому, щоб визначити, коли щось належить групі, а потім відокремити її від оточення. Це означає, що не потрібно турбуватися про зовнішність, і, ймовірно, не потрібно турбуватися про будь-які модулі всередині нього.
Ми можемо написати класи, які створюють це, наступним чином:
.aboutHeader {} .aboutHeader_topMenu {} .aboutHeader_bottomMenu {}
Те, що насправді йде у цих стилях, є неважливим, але те, що він робить, це дозволяти контролювати те, що відбувається у цілому заголовку, верхньому рядку заголовка та нижньому рядку. Розмістивши їх за допомогою . aboutHeader class гарантує, що до них не застосовуватимуться інші стилі.
div class = ”aboutHeader”> div class = ”aboutHeader_topMenu”> ul> / ul> / div> div class = ”aboutHeader_bottomMenu”> ul> / ul> / div> / div>
05. Уникайте довгих селекторних ланцюгів
Коли ви пишете компоненти, їх легко тримати порівняно неглибоко, заглиблюючись у селектори класів не більше двох-трьох шарів. Однак деякі компоненти можуть забезпечити досягнення вами п’яти, шести чи навіть більше шарів вниз до досягнення елемента, на який ви хочете націлитись.
Пам'ятайте, що CSS не має можливості абстрагувати проблеми, як JavaScript; він не має потоку управління або функціональної здатності. Хоча це добре, тому не намагайтеся імітувати це, створюючи довгі ланцюжки селекторів, глибоко вкладені стилі або сильно узагальнені стилі.
Ось приклад, як цього не робити:
.homeCTA .titleContainer .title .subheader .list {}
Ось як це слід написати:
Перейменуйте класи підзаголовків як власні компоненти
.subheaderCTA .list {}
Ланцюжок селектора, як наведений вище приклад "як цього не робити", вказує на те, що ви націлилися на неправильний стиль. Це не часто такий ланцюжок, який насправді необхідний. Натомість це, ймовірно, означає, що у вас є компонент всередині компонента, і ви повинні націлити його безпосередньо. Модульна інкапсуляція CSS руйнується, якщо ви намагаєтеся інкапсулювати занадто багато всередині неї, це означає, що ви знову почнете бачити побічні ефекти.
06. Не забувайте про свої принципи
Існує багато способів створити CSS, і кожен проект, над яким ви працюєте, буде дещо відрізнятися. Хоча майже неминуче, що будь-яка кодова база в кінцевому підсумку потребує капітального ремонту, ви можете використовувати ці принципи, щоб уповільнити це. І якщо ви працюєте в команді, переконайтеся, що ви зберігаєте свої дизайнерські файли в захищеному хмарному сховищі, до якого можуть отримати доступ усі.
У будь-який час вам слід зосередитись на тому, щоб ваші стилі були сухими, інкапсульованими, читабельними та доступними для пошуку. Ініціювання обговорених принципів допоможе забезпечити легше підтримку та зміну речей у майбутньому.
Тож пам’ятайте, що слід дотримуватись порядку у вашій файловій системі та ваших файлах. Простір імен та модулюйте свої стилі. Відокремте основні стилі, стилі макетування та загальні стилі, щоб тримати окремі проблеми.
Нарешті, тримайте свої стилі якомога простішими та дрібнішими. Перший раз, коли ви пишете новий стиль, це не повинно бути складно, і, якщо ви виявите, що це так, подумайте, чи не робите ви цей розділ занадто складним. Бо якщо це важко з першого разу, просто уявіть, яким буде головний біль.
Ця стаття була спочатку опублікована у номері 323 від чистий, самий продаваний у світі журнал для веб-дизайнерів та розробників. Купуйте випуск 323 або передплатити сьогодні до мережі.
