Используйте четкие, организованные файлы CSS, чтобы ваш код оставался СУХИМ.
Я имел удовольствие изучать Гэтсби и экспериментировать с ним на прошлой неделе, работая над сайтом моего портфолио разработчиков (seanwelshbrown.com), и в нем было много вещей, которые мне действительно понравились.
Gatsby - это фреймворк, построенный на основе React для создания статических веб-сайтов с высокой производительностью и надежным SEO, и на официальном сайте у него есть фантастическое руководство и документация.
Что-то, что действительно запомнилось мне во время урока, - это сосредоточение внимания на использовании модулей CSS для стилизации, с чем я был незнаком. Стиль невероятно важен для внешнего дизайна, и это то, что мне всегда очень нравилось, но мой опыт использования его в предыдущих проектах всегда заключался в том, чтобы иметь гигантскую глобальную таблицу стилей, в которой существовали все мои элементы HTML, имена классов и идентификаторы. Эффективно , но трудно поддерживать организованность.
Модуль CSS отличается от глобальной таблицы стилей одним существенным образом, как указано в документации модуля CSS:
Модуль CSS - это файл CSS, в котором все имена классов и имена анимации по умолчанию ограничены локально
Это означает, что вместо того, чтобы гарантировать, что каждый отдельный элемент в проекте имеет полностью уникальное имя класса (которое может стать неорганизованным и трудно отслеживаемым, особенно когда несколько элементов могут выиграть от разных стилей, но одного и того же описательного класса name), отдельная страница или компонент в проекте может иметь свой собственный выделенный набор имен классов, которые привязаны только к этой странице или компоненту.
Это может не иметь смысла сразу, поэтому давайте рассмотрим это на примере! К счастью, Гэтсби работает с модулями CSS "из коробки", так что это отличный способ учиться.
На моем сайте портфолио у меня есть список проектов на моей странице проекты, которые составлены из простых тегов HTML:
- ‹Div›
- <p>
- <a>
- <ul>
- <li>
Мне нужно, чтобы они были стилизованы определенным образом, и я мог бы сделать некоторые встроенные стили, чтобы они выглядели так, как я хочу, но это засорит мой файл .js, поскольку я буду повторять одни и те же теги и стили снова и снова.
Я также мог бы создать глобальную таблицу стилей и поместить туда стили, но это не имело бы особого смысла, поскольку мне нужны эти стили только на этой конкретной странице.
Здесь в игру вступает модуль CSS!
Прежде всего, мы смотрим на имя страницы или компонента, к которому мы хотим добавить таблицу стилей. В данном случае это «projects.js», поэтому в той же папке проекта мы создаем файл с тем же именем, но с расширением «.module.css», например:
Таким образом мы указываем, к какой части вашего веб-сайта будет применяться модуль.
Теперь на этой странице или в компоненте мы собираемся импортировать эту таблицу стилей как объект JavaScript в верхней части страницы:
Это позволило нам написать любые имена классов и CSS в модуле, как в обычной таблице стилей, но мы будем вызывать это в нашем коде, ссылаясь на имя класса как на ключ.
Итак, вместо глобальной таблицы стилей с:
.project-description {
}И это вызывается в нашем JSX как:
<div className="project-description"></div>Мы бы использовали то же имя класса в нашем модуле (только для соглашения измените его на camelCase), например:
.projectDescription {
}И вызовите его с нашим импортированным модулем в нашем JSX вот так:
<div className={styles.projectDescription}></div>Легкий! Вы заметите, что если вы попытаетесь использовать это имя класса в любой другой части вашего проекта, это не сработает; это связано с тем, что модуль, в котором он написан, имеет локальную область видимости только для тех мест в вашем проекте, куда он импортируется. Начинаете видеть потенциальные преимущества сохранения чистоты и организованности кода?
Если вы хотите использовать то же имя класса «projectDescription» на другой странице или в компоненте, но с другим стилем, новый модуль CSS позволит вам снова использовать имя класса без нарушения стиля на другой странице. Довольно круто!
CAVEAT
При использовании модулей CSS следует помнить о том, что следует придерживаться только имен классов и вложенных элементов. Если вы попытаетесь стилизовать все теги <p> на странице, например, следующим образом:
p {
font-size: 20px;
}Вы были бы неприятно удивлены, обнаружив, что ВСЕ теги <p> на каждой странице вашего сайта теперь имеют размер 20 пикселей. Ой!
Если вы хотите сохранить локальную область видимости модуля, но по-прежнему охватывать все теги определенного типа, я бы рекомендовал их вложить. Например, для страницы моих проектов я знал, что хочу, чтобы каждый абзац описания проекта имел определенный стиль, поэтому я сделал следующее:
Я назвал <div> именем класса 'projectDescription', а затем указал, что все теги <p> под ним будут иметь определенный стиль. Это отлично работает при использовании в моем JSX так:
Таким образом, мне не нужно беспокоиться о присвоении уникального имени класса каждому тегу <p>, а также я могу контролировать, как только будут выглядеть теги, которые я хочу стилизовать!
Если вам интересно, вот как выглядит мой последний модуль CSS для страницы:
Чисто, просто и легко читается.
Это краткое руководство по использованию модулей CSS в проекте Gatsby. Совсем не сложно, и отлично подходит для того, чтобы ваш проект и код оставались легкими и организованными. Надеюсь, вам понравилось читать и удачно развивались!
