Как организовать CSS-таблицы

Question

Я бы хотел начать обсуждение, чтобы получить несколько хороших идей о том, как организовать таблицы стилей в очень большом проекте с большой командой разработчиков, работающих над ним.

Один из возможных подходов состоит в том, чтобы иметь только один лист со всеми стилями, организованными с использованием комментариев и регионов, к сожалению, даже используя однострочный подход к записи с вкладками, этот лист станет невероятно большим и даже будет иметь SVN-фиксацию, и обновления могут стать хаотичным.

Итак, мы считаем, что было бы лучше разделить стили на разных листах. Мы не уверены в том, как организовать это, поскольку у нас есть разные идеи для этого.

• Возможная Идея заключается в том, чтобы организовать для типов: colors.css, fonts.css, forms.css, ...
• Другой идея состоит в том, чтобы сгруппировать их по функциональности/поведение: navigator.css, меню .css, warnings.css, errors.css, ...
• Мы также можем организовать их по страницам: login.css, contact.css, home.css, ...
• Или даже используйте комбинацию из этих три идеи вместе.

Теперь меня беспокоит то, что мы бы предпочли не добавлять все стили на каждую страницу, так как не все страницы требуют всех стилей, и нас действительно беспокоит производительность, так как наш проект потребляется миллионами пользователей каждый день. Мы, конечно, сжимаем его позже при развертывании, но, тем не менее, мы считаем разумнее загружать только нужные на страницу.

В связи с тем, что я беспокоюсь о том, что другие разработчики не загружают стили в правильном порядке, поскольку в зависимости от страницы или группы страниц они должны загружаться в разные страницы, они могут получить эту ошибку и сделать поэтому каскадирование не удастся (представьте, что они загружают menu.css до global.css, global переопределяет некоторые стили меню !!!).

Теперь мы могли бы просто пойти на одном листе, мы могли бы просто загрузить все из них всегда, или мы могли бы использовать некоторые идеи, мы пришли к как с помощью алфавитного префикс сказать разработчикам порядок загрузки:

• a_global .css
• a_forms.css
• b_region1.css
• b_anotherregion.css
• c_page.css

Но это выглядит ужасно честным. Так что теперь мне было интересно, есть ли какая-то популярная архитектура css или там, по крайней мере, некоторые хорошие идеи, которые мы могли бы использовать для нашего проекта здесь.

Большое спасибо!

Answer 1

1. Пойдите с препроцессором, чтобы вы могли организовать исходные файлы, как хотите. (Наша команда использует МЕНЬШЕ, потому что мы начали с Twitter Bootsrap и застряли). Скомпилированный CSS-файл не должен находиться под контролем версий, каждый разработчик должен скомпилировать свою собственную версию для тестирования. Я бы рекомендовал задачу для компиляции мини-версии для производства. Я бы пошел с компонентно-ориентированным подходом (формы, navs, grid, typography и т. Д.).

2. Использование препроцессора дает вам силу переменных и микшинов. Вы можете хранить файлы типа variables.less и mixins.less, в которых вы определяете общие стили. Поэтому, когда синий цвет меняется на слегка светло-голубой, вы просто меняете его в одном файле.

3. Один большой файл, содержащий все необходимые вам CSS-файлы, должен быть в порядке, так как он кэшируется браузерами, поэтому он минимизирует HTTP-запросы к вашему serwver. Таблицы стилей, специфичные для страницы, в порядке, когда на определенной странице есть много необычных элементов.

4. Создайте шаблон html-шаблона стиля, который включает в себя каждый общий элемент, о котором вы можете думать. Заголовки, цвета ссылок, списки, миниатюры фотографий, входы форм, конфигурации сетки, аккордеоны и т. Д. Когда вам нужно создать новый компонент, добавьте его в этот шаблон, измените таблицы стилей, посмотрите, разрывает ли он какие-либо другие элементы и как он соответствует отдых. Затем используйте эти фрагменты для создания определенных страниц.

Answer 2

SASS или LESS

Это поможет вам сохранить ваш код легко управлять. (переменные, миксины и т. д.)

Разделите несколько файлов.

Всегда хорошая идея. Как разделить. Я предлагаю в основном разделить их на страницу.

BUT - Исключить общие стили для разделения файлов, которые будут включены повсюду.

Кстати, один файл не означает низкой производительности. Вы уверены, что 10 запросов для небольших листов будут быстрее, чем один запрос для большего файла? Кроме того, эти файлы будут кэшироваться в веб-браузере, поэтому один файл не похож на плохую идею.