CSS лучшие практики при запуске нового проекта - PullRequest
Новая
       14

CSS лучшие практики при запуске нового проекта

7 голосов
/ 15 августа 2011

Я хотел знать, какой подход лучше использовать, когда начинаешь работу над CSS большого проекта? Поскольку в большинстве крупных проектов (таких как WordPress) я вижу, что они объединяют все классы, совместно использующие одни и те же свойства, однако, как вы можете узнать заранее, что они будут сопоставлены, или это микропроцесс пост-программирования?

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

1 Ответ

8 голосов
/ 15 августа 2011

CSS Frameworks

Для больших проектов вам, скорее всего, понадобится дополнительная функциональность поверх «обычного» CSS, например, вложенность, наследование и миксины. Любой из них должен выполнить работу:

Оптимизация производительности

Кроме того, вы захотите выполнить автоматическую оптимизацию производительности (объединение, минимизация и сжатие исходных файлов), поэтому взгляните на:

или все, что подходит для вашей платформы разработки.

Нейминг

Многие крупные сайты используют какой-то префикс в именах классов, чтобы отделить классы стилей от классов сценариев. E.g.:

<div class="navigation dynHomepageNav">(...)</div>

Где класс dyn* используется в качестве селектора в сценариях, а класс navigation используется для стиля. Преимущество заключается в том, что кодировщики могут реорганизовывать скрипты, не затрагивая дизайн, а дизайнеры меняют шаблоны, не беспокоясь о нарушении функциональности.

Однако с современными Javascript-фреймворками и HTML5 вы можете добиться большего успеха; используйте семантическое именование для идентификаторов и классов, применяйте стиль, используя эти идентификаторы и классы, и вместо этого используйте атрибуты data-* для всех обработчиков сценариев. Пример: 

<section class="navigation" data-hook="homepageNav">(...)</div>

Который вы будете стилизовать, используя идентификатор класса: 

.navigation {
  border: 1px dotted #9c9;
  padding: 12px;
}

И сценарий с использованием ловушки данных (используя атрибут селектора данных Джеймса Падолси для jQuery ): 

$('section:data(hook="homepageNav")').fadeIn();

Он может быть не таким лаконичным или знакомым, как старый добрый метод «использовать семантические классы для всего», но он создаст аккуратное разделение стиля и поведенческих свойств, которое вы оцените, когда получите 50 000 строк HTML, и вам нужно обновить дизайн.

...