Це питання стосується організації власне самих директив CSS у файлі .css. При розробці нової сторінки або набору сторінок я зазвичай просто додаю директиви до файлу .css, намагаючись здійснити рефакторинг, коли можу. Через деякий час у мене з’являються сотні (або тисячі) рядків, і мені може бути важко знайти те, що мені потрібно під час налаштування макета.

Хтось має пораду, як організувати директиви?

• Чи слід намагатися організувати зверху вниз, імітуючи DOM?
• Чи слід організовувати функціонально, складаючи директиви для елементів, які підтримують однакові частини інтерфейсу користувача?
• Чи слід просто сортувати все за алфавітом за селектором?
• Якась комбінація цих підходів?

Крім того, чи існує обмеження кількості CSS, який я повинен зберігати в одному файлі, перш ніж може бути гарною ідеєю розбити його на окремі файли? Скажімо, 1000 рядків? Або це завжди гарна ідея тримати все це в одному місці?

Пов’язане запитання: Який найкращий спосіб організувати правила CSS?

Для початку ознайомтесь із цими трьома презентаціями слайдів.

• Прекрасний підтримуваний CSS
• Супровідний CSS
• Ефективний, ремонтопридатний, модульний CSS

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

Якщо ви хочете розділити свій CSS на кілька файлів, неодмінно зробіть це. Олі вже згадував, що додаткові запити HTTP можуть бути дорогими, але ви можете мати найкраще з обох світів. Використовуйте якийсь сценарій збірки, щоб опублікувати добре задокументований модульний CSS у стисненому єдиному файлі CSS. YUI Compressor може допомогти при стисненні.

На відміну від того, що говорили інші досі, я вважаю за краще писати кожну властивість в окремому рядку та використовувати відступ для групування пов’язаних правил. Наприклад, за прикладом Олі:

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

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

Зрозумійте і використовуйте каскад та специфіку (тому сортування ваших селекторів за алфавітом є безпосереднім).

Чи буду я розділяти свій CSS на кілька файлів, і на які файли, залежить від розміру та складності сайту та CSS. Я завжди принаймні маю reset.css. Це, як правило, супроводжується layout.cssзагальним макетом сторінки, nav.cssякщо меню навігації сайтом дещо ускладнюється і forms.cssякщо у мене є багато CSS для стилізації моїх форм. Окрім цього, я все ще сам це з’ясовую. Я, можливо, мав би colors.cssі type.css/fonts.cssрозділити кольори / графіку та типографіку, base.cssщоб надати повний базовий стиль для всіх тегів HTML ...

Я схильний організувати свій css так:

1. reset.css
2. base.css: Я встановив макет для основних розділів сторінки
   1. загальні стилі
   2. Заголовок
   3. Нав
   4. зміст
   5. нижній колонтитул
3. додатковий- [назва сторінки] .css: класи, які використовуються лише на одній сторінці

Однак вам це найлегше читати!

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

Деякі речі я скажу:

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

Особисто я кодую свій CSS так:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

Дотримання правил в одному рядку дозволяє мені дуже швидко переглянути файл і подивитися, які правила існують. Коли вони розширені, я вважаю це занадто схожим на важку працю, намагаючись з’ясувати, які правила застосовуються.

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

BEM (блок, елемент, модифікатор)

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

Блок

Самостійна сутність, яка має значення сама по собі, наприклад:

header, container, menu, checkbox, input

Стихія

Частини блоку і не мають самостійного значення. Вони семантично прив’язані до його блоку:

menu item, list item, checkbox caption, header title

Модифікатор

Прапори на блоках або елементах. Використовуйте їх, щоб змінити зовнішній вигляд або поведінку:

disabled, highlighted, checked, fixed, size big, color yellow

OOCSS

Мета OOCSS - заохотити повторне використання коду і, врешті-решт, більш швидкі та ефективні таблиці стилів, які легше додавати та підтримувати.

OOCSS базується на двох основних принципах:

1. Відокремлення структури від шкіри

Це означає визначити повторювані візуальні особливості (наприклад, стилі фону та меж) як окремі «обкладинки», які ви можете поєднувати та поєднувати з різними об’єктами, щоб досягти великої кількості візуальної різноманітності без особливого коду. Див. Об’єкт модуля та його обшивки.

2. Поділ контейнерів та вмісту

По суті, це означає "рідко використовуйте стилі, що залежать від місцезнаходження". Предмет повинен виглядати однаково, куди б ви його не поклали. Отже, замість того, щоб укладати специфіку за допомогою .myObject h2 {...}, створіть і застосуйте клас, що описує питання, наприклад. Це дає вам впевненість, що: (1) всі некласифіковані s будуть виглядати однаково; (2) всі елементи з класом категорії (так званий mixin) виглядатимуть однаково; і 3) вам не потрібно буде створювати стиль заміщення для випадку, коли ви дійсно хочете, щоб .myObject h2 виглядав як звичайний.

SMACSS

SMACSS - це спосіб вивчити процес проектування і як спосіб вписати ці жорсткі рамки в гнучкий процес мислення. Це спроба задокументувати послідовний підхід до розробки сайтів при використанні CSS.

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

Існує п’ять типів категорій:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

База Містить стилі скидання та за замовчуванням. Він також може мати базові стилі для елементів керування, таких як кнопки, сітки тощо, які можуть бути перезаписані пізніше в документі за певних обставин.

Макет містив би всю навігацію, панірувальні сухарі, мапи сайтів тощо тощо.

Модулі містять стилі, характерні для певної області, такі як стилі форм контактів, плитки домашньої сторінки, перелік продуктів тощо тощо тощо.

Держава Містить класи стану, такі як isSelected, isActive, hasError, wasSuccessful тощо тощо.

Тема Містить будь-які стилі, пов’язані з тематикою.

Тут забагато деталей, але подивіться і на ці інші:

• Костюм CSS
• AtomicCSS (не атомний дизайн)
• oCSS (органічний CSS)

Я приймаю таке замовлення:

1. Загальні правила стилю, зазвичай застосовуються до оголених елементів (a, ul, ol тощо), але вони можуть бути також загальними класами (.button, .error)
2. Правила розмітки сторінки застосовуються до більшості / усіх сторінок
3. Правила оформлення окремих сторінок

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

Я спробував купу різних стратегій, і я завжди повертаюся до цього стилю:

.class {border: 1px solid #000; padding: 0; margin: 0;}

Це найдружніше, коли йдеться про велику кількість декларацій.

Містер Снук писав про це майже чотири роки тому :) .

Виділіть загальні стилі. Не стилі, які просто збігаються, стилі, які мають бути однаковими - де зміна стилю для одного селектора, швидше за все, означатиме, що ви захочете змінити і інший. Я приклав приклад цього стилю в іншому дописі: Створіть змінну у файлі CSS для використання в цьому файлі CSS .

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

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

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

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

Раніше я переживав про це невпинно, але на допомогу прийшов Фаєрбаг.

У наш час набагато легше подивитися на те, як ваші стилі взаємопов’язані через Firebug, і звідти зрозуміти, що потрібно зробити.

Звичайно, обов’язково переконайтеся, що існує розумна структура, яка об’єднує пов’язані стилі разом, але не переборщуйте. Firebug робить речі набагато простішими для відстеження, тому вам не доведеться турбуватися про створення ідеальної структури css заздалегідь.

Ось що я роблю. У мене є сторінка індексу CSS, на якій немає директив і яка викликає різні файли. Ось короткий зразок:

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

Починається з повного скидання. Наступний файл визначає палітру кольорів для зручності. Тоді я стиль основні <div/>s, що визначають розташування, заголовок, колонтитул, кількість стовпців, де вони підходять, і т.д ... HTML - теги definses <body/>, <h1/>, <p/>, т і т.д ... Далі слідують конкретні розділи сайту.

Це дуже масштабно і дуже чітко. Набагато зручніше знаходити код для зміни та вводити нові розділи.

Файли CSS кешуються на клієнті. Тож хороша практика - зберігати всі свої стилі в одному файлі. Але при розробці я вважаю корисним структурувати свій CSS за доменами.

Наприклад: reset.css, design.css, text.cssі так далі. Коли я випускаю кінцевий продукт, я стискаю всі стилі в один файл.

Ще одна корисна порада - зосередити читабельність на правилах, а не на стилях.

Поки:

ul li
{
    margin-left: 10px;
    padding: 0;
}

Виглядає добре, нелегко знайти правила, коли у вас є, скажімо, 100 рядків коду.

Натомість я використовую такий формат:

rule { property: value; property: value; }

rule { property: value; property: value; }

ITCSS

Гаррі Робертс (CSS Wizardry)

Визначає глобальний простір імен та каскад, а також допомагає знизити специфічність селекторів.

Структура

Перші два застосовуються лише в тому випадку, якщо ви використовуєте препроцесор.

1. (Налаштування)
2. (Інструменти)
3. Дженерики
4. Елементи
5. Об'єкти
6. Компоненти
7. Козирі

Зазвичай я роблю це:

1. <link rel="stylesheet" href="css/style.css">

2. У style.css я @import наступне:

   @import url(colors.css);
   @import url(grid.css);
   @import url(custom.css); + some more files (if needed)
   

3. У colors.cssI @importнаступне (при використанні власних властивостей CSS):

   @import url(root/variable.css);
   

Все в порядку і легко отримати будь-яку частину коду для редагування. Буду рада, якщо це якось допоможе.