как правильно писать css код
Основы работы с языком CSS
Учебник HTML CSS
Практика
Продвинутый курс
Практика
Адаптив
Продвинутые вещи
Практика
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу
соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки <>, внутри которых следует писать CSS свойства.
Давайте покрасим все абзацы в красный цвет:
Так код будет выглядеть в браузере:
А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:
Так код будет выглядеть в браузере:
Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.
Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему HTML коду. Это можно сделать тремя способами.
Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.
Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.
Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа.
Давайте разберемся с этими способами более подробно.
Способ 1. Отдельный CSS файл
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: .
Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.
В следующем примере к нашему HTML файлу подключается CSS файл style.css:
Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:
Способ 2. CSS внутри тега style
Второй способ заключается в том, что CSS код можно написать в теге
Как правильнее писать css код?
Учусь верстать, смотрю ролики от «Специалиста», а именно Сергея Алмазова. Рассказывает хорошо, все нравиться, так же задевалась тема препроцессора, в частности SCSS, он же SASS насколько я понял. В связи, с чем возник вопрос сначала о миксинах, например:
Или же лучше каждому элементу присвоить свой класс, к которому можно обратиться, не создавая сильной зависимости, что бы после того как в структуре html внесли изменения, у меня не поплыло все. То есть примерно:
или же правильно будет все таки:
Вопрос получился длинным, к сожалению, не получилось сформулировать проще.
дополню, что экстенды полезно использовать когда у нескольких элементов встречаются одинаковые свойства, в таком случае целесообразно вынести эти свойства в экстенд и добавлять их к селекторам, в цсс эти свойства будут применены ко всем селекторам через запятую, очень удобно.
а миксины действительно стоит использовать тогда, когда нужно иметь возможность изменять параметры свойств, например, только в этом случае свойства будут дублироваться в цсс.
насчет разбиения файлов, конечно стоит использовать модульность, даже на маленьких проектах, гораздо легче управлять маленькими модулями, нежели одним файлом на 1к строк. Обычно создают main.scss который предназначен исключительно для импортов всех модулей проекта.
и экстенду не обязательно присваивать класс когда это не нужно, можно использовать плейсхолдер
%btn <
.
>
Правила оформления CSS-кода
1. Синтаксис
1.1 В конце строки должна стоять точка с запятой
После пары свойство: значение обязательно ставится точка с запятой. Без этого знака препинания не будет работать правило в этой строке и следующее за ним.
Хорошо: после каждого значения стоит точка с запятой Плохо: после первого свойства пропущена точка с запятой
1.2 Для отступов внутри правил используйте два пробела
Правила, которые перечисляются внутри фигурных скобок, должны отстоять от начала строки. Для этого иcпользуйте 2 пробела. Это позволяет сразу видеть блоки свойств, относящихся к одному селектору.
1.3 Значение цветов не сокращается
1.4 Все пишется строчными буквами
Вce названия тегов и свойства пишутся строчными буквами.
1.5 Нули не пропускаются
1.6 Используйте двойные кавычки
В стилях всегда без исключения используются двойные кавычки. Если кавычки не обязательны, то они пишутся все равно.
1.7 Пробел после двоеточия
В правилах после двоеточия ставится один пробел ( top: 10px; ). При этом перед двоеточием пробел не нужен.
1.8 Пробелы после запятой в цветах
1.9 Пробел до и после комбинатора
Между селекторами до и после комбинатора (например, p > a ) ставится один пробел.
1.10 Каждое свойство с новой строки
Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.
1.11 Пробел перед фигурной скобкой
После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.
1.12 Закрывающая фигурная скобка на новой строке
Закрывающая фигурная скобка после набора свойств пишется на новой строке и без отступа. Она должна быть на одном уровне с селектором. Следующее после этого правило отделяется пустой строкой.
1.13 Опускайте единицы измерения
2. Порядок свойств
Порядок логически связанных свойств должен быть сгруппирован следующим образом:
Позиционирование следует первым, поскольку оно влияет на положение блоков в потоке документа. Блочная модель определяет размеры и расположение блоков и идёт следующей.
Все прочие объявления, которые изменяют вид внутренних частей блоков и не влияют на другие блоки, идут в последнюю очередь.
Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.
3. Имена классов
4. Правило @import
5. Варианты шрифта
Альтернативные варианты шрифта и тип семейства указываются в конце перечисления значений font-family.
В случае использования нестандартных шрифтов обязательно указывать альтернативный веб-безопасный шрифт и тип семейства, чтобы в случае отсутствия нестандартного шрифта в системе изменения внешнего вида страницы были минимальны. Нестандартный и альтернативный шрифты должен быть одного типа.
Порядок шрифтов следующий:
Пишем CSS лучше и красивее
Не будем ходить вокруг да около, скажем прямо: процесс написания хорошего CSS-кода может быть очень и очень тяжёлым. Многие разработчики не хотят связываться со стилями. Они готовы заниматься всем, чем угодно, но только не CSS. От этого никуда не деться. В наши дни огромное внимание уделяется дизайну, и тому, что называют «UX», а без CSS тут никак не обойтись. Цель этого материала — помочь всем желающим улучшить свои навыки в разработке и применении стилей веб-страниц.
Проблемы CSS
Мне хочется, чтобы дочитав эту статью, вы взглянули бы на свои предыдущие проекты и подумали: «Ну ничего ж себе, как же я мог такое написать?».
Возможно, вы думаете сейчас, что «писать CSS» — это значит пользоваться CSS-фреймворками. Ведь предназначены они именно для того, чтобы облегчить работу со стилями, и именно с их использованием пишут хороший CSS-код. Всё это так, но у CSS-фреймворков есть определённые недостатки:
И, в конце концов, вы ведь читаете это не для того, чтобы ознакомиться с неким фреймворком? Поэтому займёмся CSS. Сразу хотелось бы отметить, что материал это не о том, как создавать красивые дизайны для приложений. Он — о том, как писать качественный CSS-код, который легко поддерживать, и о том, как правильно его организовывать.
В своих примерах я буду использовать SCSS. Это — CSS-препроцессор. Фактически, SCSS является надмножеством CSS. В нём имеются некоторые весьма интересные возможности, такие, как переменные, вложенные конструкции, импорт файлов, миксины. Обсудим возможности SCSS, которыми мы будем пользоваться.
Переменные
В SCSS можно пользоваться переменными. Основной плюс применения переменных — возможность их повторного использования. Представим, что у нас имеется набор цветов для приложения. Основной цвет — голубой. В результате этот цвет применяется буквально повсюду. Он используется в свойстве background-color кнопок, в свойстве color заголовка страницы, и во многих других местах.
И вот вы, вдруг, решаете поменять голубой на зелёный. Если выполнять такую замену без использования переменных — придётся отредактировать весь код, все строки, где используется старый цвет. Если же воспользоваться переменной, то поменять придётся лишь её значение. Вот как выглядит использование переменных:
10 полезных практик при написании CSS
Написание таблиц стилей не заканчивается использованием свойств и подбором значений исходя из шаблона. Это объёмный процесс, который включает:
Кто-то считает CSS простым языком, кто-то его боится, но использование правильных подходов к его написанию позволит не допускать многих ошибок. Чем больше проект, тем сложнее выглядит CSS, а хорошая его поддержка — работа верстальщика. Только в его силах сделать так, чтобы стили можно было переиспользовать, а сам рабочий файл выглядел удобным для работы.
В этой статье я расскажу о своём подходе к практикам в CSS и тех вещах, которые считаю важными в разработке.
Практика № 1: организация рабочей среды
Запись стилей напрямую в файл .css может сопровождаться различными проблемами. Множество ошибок в проекте случается из-за забытой точки с запятой или неправильно закрытой фигурной скобки. Частое копирование одних и тех же CSS-стилей тоже не приносит удобства для будущих изменений.
Сейчас существует много инструментов, которые позволяют автоматизировать процессы вёрстки и сделать написание CSS более осмысленным. В первую очередь это использование препроцессоров. Неважно, какой именно вы используйте препроцессор: SASS, Less или Stylus — они позволяют удобнее выносить повторяющийся CSS, а так же определить функции для работы с кодом.
Сравните написание одного и того же кода с помощью CSS и препроцессора SASS
Главное отличие заключается в добавлении новых иконок. В случае с CSS необходимо вручную добавлять все новые иконки и, для правильной структуры, указывать новые иконки рядом со старыми. Это потребует постоянного перемещения по CSS файлу, который может быть достаточно большим.
Другим удобным инструментом является постпроцессор. Если препроцессор позволяет добавить новую логику в CSS и в конечном итоге скомпилировать всё в чистый CSS, то постпроцессор работают с уже конечным файлом стилей. Он позволяет проставить все необходимые префиксы, перенести медиазапросы в конец файла и так далее. Самым популярным постпроцессором является PostCSS.
Последним в списке, но не по назначению, является линтер — пакеты, которые проверяют CSS на следование стандартам. Это позволяет стандартизировать стили и не допустить досадных ошибок. Самым популярным линтером для CSS на сегодня является Stylelint. Именно его можно увидеть при прохождении курсов по вёрстке на Hexlet.
Сравните код, который написан без использования линтера:
Практика № 2: (не) использование фреймворка
CSS-фреймворк — набор модулей, компонентов и расширений, которыми можно пользоваться в проекте. Одним из самых популярных фреймворков на сегодня является Bootstrap. Это мощный инструмент, но надо понимать, что загрузка Bootstrap негативно сказывается на времени загрузки всего проекта. Минифицированный файл стилей Bootstrap 4 весит 156 килобайт. Для корректной работы также необходимы JavaScript-файлы.
Если при использовании фреймворка необходима только небольшая его часть, то стоит скомпилировать только ту часть CSS, которая необходима в проекте. Bootstrap предоставляет все SASS файлы, из которых можно взять только самое необходимое.
Если ваш проект небольшого размера, то стоит задуматься, а нужен ли там фреймворк. Возможно потратив лишние пол часа на написание своих стилей, вы ускорите загрузку сайта в несколько раз.
Другой крайностью является неиспользование фреймворка в больших проектах, которые расширяются. Это не обязательно должен быть открытый фреймворк. Он может быть написан внутри компании. Такое решение позволит удобно переиспользовать компоненты: кнопки, уникальные блоки, формы.
Практика № 3: разделение стилей
Если вы используете препроцессоры, используйте функцию импорта файлов. Это позволит не складировать весь код препроцессора в одном единственном месте. В этом случае вы получите такой же неудобный для редактирования код, как и при использовании одного CSS-файла. Разделите части вашего кода и создайте для них отдельные файлы. Также создайте главный файл, в который и подключите все остальные файлы. При компиляции препроцессор соберёт воедино все файлы, и вы получите один CSS-файл со всеми стилями.
Пример на SASS. Главный файл:
Этот пример плавно подводит к следующему пункту.
Практика № 4: переменные для настроек проекта
Каждый проект имеет стандартные настройки, которые переиспользуются или являются глобальными. Такими настройкам чаще всего являются:
Используя препроцессор, можно указать все стили в едином файле variables или settings. Теперь управление базовыми настройками будет происходить из одного файла.
Читайте также
Практика № 5: уменьшение специфичности
Уменьшая специфичность селекторов, вы не только увеличиваете читаемость кода, но и уменьшаете конечный размер CSS-файла. Взгляните на следующий пример:
Кажется, что он не имеет каких-то проблем, но на самом деле сейчас он привязан только к определённой структуре HTML. Если возникнет необходимость стилизовать другой элемент этими правилами, то нужно создать новый селектор и прописать стили в нём.
Уменьшив специфичность, можно использовать класс на любом HTML-элементе при любой структуре.
Практика № 6: группировка стилей
В статье Что верстальщик должен знать про OOCSS и организацию CSS описывалась одна из распространённых методологий — OOCSS. Она позволяет разделять структурные и визуальные стили элемента. Помимо такого разделения использование методологий позволяет не дублировать повторяющиеся стили.
В примере находятся стили для двух кнопок, но они различаются только одним свойством. Остальные стили полностью повторяются. Это приводит к невозможности быстро изменить общие стили для кнопок. Решение достаточное простое — выделить отдельный класс под структурные свойства.
Данный приём доступен как для CSS, так и для препроцессоров. Некоторые методологии ориентированы на полную изоляцию модулей друг от друга. В таком случае можно использовать миксины и переменные для создания таких стилей. Главное — возможность изменения свойств в одном месте. Вот как это может выглядеть на SASS:
Практика № 7: построение стилей от общего к частному
Хорошей практикой является написание CSS от общих стилей к более частным. Это означает, что в самом верху определяются общие стили в виде селекторов по тегу, а после них все остальные. При этом сами селекторы, после общих, стоит выделить в отдельные разделы, такие как:
Использование комментариев поможет в быстром ориентировании внутри CSS-файла.
Практика № 8: использование инлайновых стилей
Скажите нет инлайновым стилям. Они имеют наибольший приоритет, и их использование может сильно помешать при кастомизации проекта. Чаще всего инлайновые стили нужны при использовании JavaScript, когда сайт реагирует на действие пользователя. Например, при анимации. В этом случае использование инлайн-стилей оправдано.
Практика № 9: добавление focus к интерактивным элементам
Верстальщики часто добавляют новые интерактивные элементы, которые не знает браузер. Это могут быть кастомные чекбоксы, радиокнопки, кнопки отправки сообщения и так далее. Для удобства используют не стандартные теги, которые предназначены для таких взаимодействий, а простые
Для них эти интерактивные элементы могут быть недоступны, или они просто не смогут понять, что находятся на нём при использовании клавиатуры. Чтобы избежать этой ошибки, следует придерживаться нескольких правил:
Практика № 10: именование классов
Не стоит забывать про хорошее именование классов. Идеально, если название класса описывает то, что происходит на странице или какой блок перед нами. Подробнее об этом я описывал в статье Ошибки именования в вёрстке. Вот небольшой пример неудачного именования:
Помимо различного вида именования, здесь указан чёткий порядок классов. Если в HTML-элементы поменяются местами, то весь смысл таких классов исчезнет. Определяйте название класса исходя из того, что за элемент перед вами или какие характеристики он имеет. Здесь всё зависит от той методологии, которой вы придерживаетесь.
Изучайте вёрстку на Хекслете — пройдите профессию «Верстальщик». Во время обучения вы выполните три проекта, которые останутся в вашем портфолио на GitHub.
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.