У цій статті я продовжу розповідь про створення шаблону для бітрікс. У першій частині описаний процес початкового поділу зверстаного макета і створення необхідних файлів. Прийшов час впритул зайнятися зручною організацією стилів.
Для початку трохи зануримося в теорію. За задумом розробників бітрікс, файлів зі стилями має бути багато ... як би це безглуздо не звучало. Отже, стильова складова типового шаблону сайту передбачає наявність:
1. файлу template_styles.css - в термінології бітрікс «стилі шаблону»
2. styles.css - «стилі сайту»
3. style.css - стилі шаблону компонента
4. додаткові файли стилів
template_styles.css
Файл розташовується в кореневій директорії шаблону і включає правила, які не відповідають за відображення результатів роботи компонентів, контенту сайту і вмісту включаються областей. Зазвичай сюди відносять базову розмітку зверстаного макета - розміри і положення колонок, загальний фон сайту, що обрамляють блоки включаються областей і т.д. Цей файл в тілі сторінки підключається останнім, тому, при рівній специфічності. правила з template_styles.css будуть перевизначати інші.
styles.css
Описи зберігаються в файлі .styles.php у вигляді
Це файл стилів скопійованого шаблону компонента. Саме його вміст можна редагувати з режиму розробки.
Файл знаходиться в папці шаблону компонента і містить правила для форматування результатів його роботи.
Додаткові файли стилів
Служать для довільних потреб, наприклад, я практично завжди роблю layout.css зі стилями каркаса сайту.
Підключаються такі файли в секції файлу header.php шаблону таким викликом функції
Приклад створення файлів стилів для бітрікс
Спочатку виділяємо в загальному коді смислові блоки (при грамотній верстці це робиться відразу).
Ділимо на 3 частини - стилі шаблону, стилі сайту і стилі шаблону компонента (в нашому випадку bitrix: search.form)
На сьогодні все. Весь процес складніше описати ніж зрозуміти, практикуйтеся і поповнюйте ряди кваліфікованих шаблоностроітелей :)