Как вынести стили в отдельный файл css
Перейти к содержимому

Как вынести стили в отдельный файл css

  • автор:

Как вынести стили в отдельный файл css

Подключения стилей CSS

Встраивание стилей CSS в раздел HEAD

Все определения стилей можно собрать в одном месте. В этом случае стили указываются между тегами

. Сам тег

.

Встраивание стиля css в тег

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

Встраивание стиля css в тег

  lang="ru"> meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> Встраивание стиля css в тег  type="text/css"> @media screen and (max-width: 767px) < body < max-width: 767px; height auto; > >  style="font-size: 20px; color: green; font-family: Times New Roman,arial, helvetica, sans-serif"> Текст html – документа . 

Встраивание стиля css в тег

Добавления CSS к XML – документу.

 type="text/css" href="style.css"?>

Учебник CSS - Урок 1 - подключаем CSS-стили

Я не буду объяснять зачем нужен CSS. Если вы открыли этот учебник значит вы желаете его выучить. От себя лишь скажу, что возможности CSS очень широки и позволяют верстать макеты любой сложности. В свою очередь использование css означает, что вам придется отказаться от использования различных атрибутов тегов size, color, bgcolor, align и других, которые будут "мешать" CSS.

Существует по крайней мере три способа подключения CSS к вашему HTML файлу. Давайте рассмотрим самый простой, потом второй и правильный способ.

CSS внутри тега

CSS можно подключить c помощью атрибута style:

 
Блок

Так мы задаем блок размером 200 на 100 пикселей. Давайте рассмотрим как пишется CSS. Сначала мы пишем атрибут style="". И потом уже в ковычках пишем css-стили.

style="параметр:значение;параметр:значение;параметр:значение"

Пишем стили мы так сначала идет параметр (widht, height и другие), потом идет двоеточие и значение параметра. Разделяем каждый параметр точкой с запятой.

Теперь ко второму способу написания CSS.

CSS в начале HTML-документа

Для этого мы используем тег в котором мы пишем CSS-код.

  Учебник CSS   

Учите CSS вместе с drupalbook.org

Тег style мы пишем в теге после тега . Давайте напишем какой-нибудь CSS-код:

  Учебник CSS   

Учите CSS вместе с drupalbook.org

2 строка учите CSS вместе с drupalbook.org

Давайте посмотрим как пишется css для тегов. Если мы пишем название тега в css, то для всех этих тегов будут применены параметры CSS. Так например если мы пишем p то значит для всех параграфов будет выбраны следующие параметры.

Когда мы пишем CSS-код, то сначала мы указываем тег для которого применяем css-стили, дальше мы в фигурных скобках пишем css-стили. CSS-стили пишутся также как и в атрибуте style="":

параметр:значение;параметр:значение;параметр:значение

Параметр, двоеточие, значение, точка с запятой и снова параметр, двоеточие, значение, точка с запятой и снова. После последнего стиля можно не ставить точку с запятой, но лучше всего поставить.

Мы вставили двумя способами css-стили, а теперь давайте используем третий способ, самый оптимальный.

CSS в отдельном файле

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

Это основная идея CSS размежевать текст и оформление текста. HMTL нам нужен чтобы разметить текст, а вот CSS нужен для того чтобы этот текст гармонично выглядел. С помощью HTML выводиться только текст, а с помощью CSS размеры, цвета, формы, границы, отступы.

Это было во-первых, теперь во-вторых когда код HTML и CSS в одном файле, то это становится нечитабельно и грамоздко. А теперь в-третьих, css сохраняются в браузере, поэтому если вынести весь CSS отдельно, то страница будет загружаться быстрее, потому что загружать css нужно только один раз. Я думаю вам уже стало понятным к чему я клоню?

CSS нужно стараться выносить в отдельный файл! Вот к этому я и клоню. А теперь давайте создавать отдельный css файл. Для этого есть тег :

  Учебник CSS  

Учите CSS вместе с drupalbook.org

2 строка учите CSS вместе с drupalbook.org

У тега есть следующие атрибуты:

type="text/css" - так мы указываем то что это css,

rel="stylesheet" - это указывает на то что этот файл является css-файлом,

media="all" - этот css файл будет отображаться для всех устройств, через которые просматривают сайт,

href="styles.css" - путь к css файлу, в нашем случае путь относительный.

Кажется разобрались с тем как подключать css файл, теперь создавайте этот файл styles.css в той же папке где и html-файл.

Теперь открывайте файл styles.css и вставьте него css-стили:

body < background: #eeeeee; /* фон страницы */ font-size: 14px; /* размер шрифта */ >p< color: #ff0000; /* цвет текста */ >

Сохраните этот файл и откройте через браузер ваш html-файл. Теперь css подключен к вашему файлу как полагается, через отдельный файл. В следующем уроке мы подробно начнем разбирать, как писать стили в отдельном файле.

Перенос стилей makeStyles() MaterialUI в отдельный файл

изучаю React, пишу свой проект для развития и резюме;) , использую Material UI. Во время проекта, возник вопрос о структиризации папок , как мне грамотно перенести стили makeStyles в другой файл , чтобы не возникало каши в jsx компоненте? Заранее спасибо.

Отслеживать
задан 18 авг 2021 в 7:09

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

При использовании MaterialUL стили создаются в файле через функцию сonst classes = useStyles();

вынесите создание стилей в отдельный файл и сделайте экспорт useStyles

Вот примерный результат:

import < makeStyles >from '@material-ui/core'; export const useStyles = makeStyles((theme) => (< button: < textTransform: 'capitalize', >, >)); 
import useStyles from './style'; const ShareButton = () => < const classes = useStyles(); return ( /> ) >); 

10 полезных практик при написании CSS

10 полезных практик при написании CSS главное изображение

Написание таблиц стилей не заканчивается использованием свойств и подбором значений исходя из шаблона. Это объёмный процесс, который включает:

  • Грамотное именование
  • Структурированность
  • Понятность селекторов
  • Хорошую переиспользуемость
  • Соответствие принципам доступности
  • Оптимизацию

Кто-то считает CSS простым языком, кто-то его боится, но использование правильных подходов к его написанию позволит не допускать многих ошибок. Чем больше проект, тем сложнее выглядит CSS, а хорошая его поддержка — работа верстальщика. Только в его силах сделать так, чтобы стили можно было переиспользовать, а сам рабочий файл выглядел удобным для работы.

В этой статье я расскажу о своём подходе к практикам в CSS и тех вещах, которые считаю важными в разработке.

Практика № 1: организация рабочей среды

Запись стилей напрямую в файл .css может сопровождаться различными проблемами. Множество ошибок в проекте случается из-за забытой точки с запятой или неправильно закрытой фигурной скобки. Частое копирование одних и тех же CSS-стилей тоже не приносит удобства для будущих изменений.

Сейчас существует много инструментов, которые позволяют автоматизировать процессы вёрстки и сделать написание CSS более осмысленным. В первую очередь это использование препроцессоров. Неважно, какой именно вы используйте препроцессор: SASS , Less или Stylus — они позволяют удобнее выносить повторяющийся CSS, а так же определить функции для работы с кодом.

Сравните написание одного и того же кода с помощью CSS и препроцессора SASS

.icon-32-cat  height: 32px; width: 32px; background: url("../icon/svg/32/cat.svg"); > .icon-64-cat  height: 64px; width: 64px; background: url("../icon/svg/64/cat.svg"); > .icon-32-dog  height: 32px; width: 32px; background: url("../icon/svg/32/dog.svg"); > .icon-64-dog  height: 64px; width: 64px; background: url("../icon/svg/64/dog.svg"); > .icon-128-dog  height: 128px; width: 128px; background: url("../icon/svg/128/dog.svg"); > .icon-32-whale  height: 32px; width: 32px; background: url("../icon/svg/32/whale.svg"); > .icon-64-whale  height: 64px; width: 64px; background: url("../icon/svg/64/whale.svg"); > 
$icons: ( "cat": (32, 64), "dog": (32, 64, 128), "whale": (32, 64) ); @mixin icon($icon-name, $icon-size)  .icon-#$icon-size>-#$icon-name>  height: $icon-size; width: $icon-size; background: url("../icon/svg/#$icon-size>/#$icon-name>.svg"); > > @each $icon, $sizes in $icons  @each $size in $sizes  @include icon($icon, $size); > > 

Главное отличие заключается в добавлении новых иконок. В случае с CSS необходимо вручную добавлять все новые иконки и, для правильной структуры, указывать новые иконки рядом со старыми. Это потребует постоянного перемещения по CSS файлу, который может быть достаточно большим.

В случае с SASS был определён миксин, который генерирует иконку в зависимости от переданных данных и цикл, в котором вызывается миксин. Для добавления новых иконок достаточно изменить массив $icons . Остальное препроцессор сделает за нас.

Другим удобным инструментом является постпроцессор. Если препроцессор позволяет добавить новую логику в CSS и в конечном итоге скомпилировать всё в чистый CSS, то постпроцессор работают с уже конечным файлом стилей. Он позволяет проставить все необходимые префиксы, перенести медиазапросы в конец файла и так далее. Самым популярным постпроцессором является PostCSS .

Последним в списке, но не по назначению, является линтер — пакеты, которые проверяют CSS на следование стандартам. Это позволяет стандартизировать стили и не допустить досадных ошибок. Самым популярным линтером для CSS на сегодня является Stylelint . Именно его можно увидеть при прохождении курсов по вёрстке на Hexlet.

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

body  line-height: 1.5; margin: 0px; font-size: 16px; color: #303846; padding: 0; background: #f0f3f4; font-family: sans-serif; > 
body  margin: 0; padding: 0; color: #303846; font-size: 16px; font-family: sans-serif; line-height: 1.5; background: #f0f3f4; > 

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

Практика № 2: (не) использование фреймворка

CSS-фреймворк — набор модулей, компонентов и расширений, которыми можно пользоваться в проекте. Одним из самых популярных фреймворков на сегодня является Bootstrap. Это мощный инструмент, но надо понимать, что загрузка Bootstrap негативно сказывается на времени загрузки всего проекта. Минифицированный файл стилей Bootstrap 4 весит 156 килобайт. Для корректной работы также необходимы JavaScript-файлы.

Если при использовании фреймворка необходима только небольшая его часть, то стоит скомпилировать только ту часть CSS, которая необходима в проекте. Bootstrap предоставляет все SASS файлы, из которых можно взять только самое необходимое.

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

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

Практика № 3: разделение стилей

Если вы используете препроцессоры, используйте функцию импорта файлов. Это позволит не складировать весь код препроцессора в одном единственном месте. В этом случае вы получите такой же неудобный для редактирования код, как и при использовании одного CSS-файла. Разделите части вашего кода и создайте для них отдельные файлы. Также создайте главный файл, в который и подключите все остальные файлы. При компиляции препроцессор соберёт воедино все файлы, и вы получите один CSS-файл со всеми стилями.

Пример на SASS. Главный файл:

@import "variables"; @import "mixin"; // Components @import "./components/avatar"; @import "./components/contact"; @import "./components/messages"; @import "./components/message"; // Utitlies @import "./utilities/width"; @import "./utilities/height"; @import "./utilities/hide-scrollbar"; @import "./utilities/border"; @import "./utilities/radius"; 

Этот пример плавно подводит к следующему пункту.

Практика № 4: переменные для настроек проекта

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

  • Цветовая схема
  • Отступы
  • Шрифт
  • Базовый размер шрифта

Используя препроцессор, можно указать все стили в едином файле variables или settings. Теперь управление базовыми настройками будет происходить из одного файла.

Практика № 5: уменьшение специфичности

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

.main section p.main-title  color: #333; font-size: 20px; > 

Кажется, что он не имеет каких-то проблем, но на самом деле сейчас он привязан только к определённой структуре HTML. Если возникнет необходимость стилизовать другой элемент этими правилами, то нужно создать новый селектор и прописать стили в нём.

Уменьшив специфичность, можно использовать класс на любом HTML-элементе при любой структуре.

.main-title  color: #333; font-size: 20px; > 

Практика № 6: группировка стилей

В статье Что верстальщик должен знать про OOCSS и организацию CSS описывалась одна из распространённых методологий — OOCSS. Она позволяет разделять структурные и визуальные стили элемента. Помимо такого разделения использование методологий позволяет не дублировать повторяющиеся стили.

.btn  width: 150px; height: 50px; font-size: 13px; background: white; border: 1px solid #333; > .btn-order  width: 150px; height: 50px; font-size: 13px; background: blue; border: 1px solid #333; > 

В примере находятся стили для двух кнопок, но они различаются только одним свойством. Остальные стили полностью повторяются. Это приводит к невозможности быстро изменить общие стили для кнопок. Решение достаточное простое — выделить отдельный класс под структурные свойства.

.btn  width: 150px; height: 50px; border: 1px solid; font-size: 13px; > .btn-white  color: #333; background: white; > .btn-blue  color: #f9f9f9; background: blue; > 

Данный приём доступен как для CSS, так и для препроцессоров. Некоторые методологии ориентированы на полную изоляцию модулей друг от друга. В таком случае можно использовать миксины и переменные для создания таких стилей. Главное — возможность изменения свойств в одном месте. Вот как это может выглядеть на SASS:

// Button Settings $btn-width: 150px; $btn-height: 50px; $btn-border: 1px solid; $btn-font-size: 13px; @mixin btn($color-bg, $color-text)  width: $btn-width; height: $btn-height; border: $btn-border; color: $color-text; font-size: $btn-font-size; background: $color-bg; > .pricing  padding: 20px 40px; color: #333; .pricing-btn  @include btn(#f9f9f9, #333); > > 

Практика № 7: построение стилей от общего к частному

Хорошей практикой является написание CSS от общих стилей к более частным. Это означает, что в самом верху определяются общие стили в виде селекторов по тегу, а после них все остальные. При этом сами селекторы, после общих, стоит выделить в отдельные разделы, такие как:

  • Общие классы (утилиты, атомарные классы)
  • Классы, отвечающие за общий вид страницы
  • Классы для различных компонентов

Использование комментариев поможет в быстром ориентировании внутри CSS-файла.

/* General */ body  margin: 0; padding: 0; > h1, h2, h3  color: #333; font-family: serif; > p  margin: 0.5em 0 1.2em; > /* Utitlities */ .mb-1  margin-bottom: 1em; > .text-bold  font-weight: 600; > /* Pricing */ .pricing  display: flex; margin: 0 -15px; > .pricing__item  width: 300px; padding: 0 15px; > 

Практика № 8: использование инлайновых стилей

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

  style="font-weight: bold">
.text-bold font-weight: bold; > class="text-bold">

Практика № 9: добавление focus к интерактивным элементам

Верстальщики часто добавляют новые интерактивные элементы, которые не знает браузер. Это могут быть кастомные чекбоксы, радиокнопки, кнопки отправки сообщения и так далее. Для удобства используют не стандартные теги, которые предназначены для таких взаимодействий, а простые и . Здесь кроется главная опасность: проставляя таким элементам стили при наведении с помощью :hover , разработчики забывают про пользователей, которые используют клавиатуры.

Для них эти интерактивные элементы могут быть недоступны, или они просто не смогут понять, что находятся на нём при использовании клавиатуры. Чтобы избежать этой ошибки, следует придерживаться нескольких правил:

  • При возможности используйте стандартные HTML-элементы для интерактивных элементов. Даже при случае несовпадения этих элементов с дизайном постарайтесь оставить стандартное отображение или вносите небольшие изменения.
  • Не удаляйте focus у интерактивных элементов. Если такой элемент скрыт в угоду кастомизации, добавьте фокус для новых элементов.
  • Убедитесь, что ваши интерактивные элементы могут взаимодействовать с клавиатурой.

Практика № 10: именование классов

Не стоит забывать про хорошее именование классов. Идеально, если название класса описывает то, что происходит на странице или какой блок перед нами. Подробнее об этом я описывал в статье Ошибки именования в вёрстке. Вот небольшой пример неудачного именования:

.block-1  . > .block-two  . > .blok-3  . > 

Помимо различного вида именования, здесь указан чёткий порядок классов. Если в HTML-элементы поменяются местами, то весь смысл таких классов исчезнет. Определяйте название класса исходя из того, что за элемент перед вами или какие характеристики он имеет. Здесь всё зависит от той методологии, которой вы придерживаетесь.

Изучайте вёрстку на Хекслете — пройдите профессию «Верстальщик». Во время обучения вы выполните три проекта, которые останутся в вашем портфолио на GitHub.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *