Как улучшить свои навыки в CSS

Как улучшить свои навыки в CSS
Как улучшить свои навыки в CSS

Оригинал данной статьи находится здесь: How to get better at writing CSS

Давайте не будем ходить вокруг да около: написание отличного CSS-кода может быть болезненным процессом. Многие разработчики не хотят иметь дела с разработкой на CSS. «Я могу сделать всё, что вы пожелаете, но нет! Только не CSS».

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

Когда начинается проект, всё работает хорошо. У вас есть несколько CSS-селекторов: .title, input, #app, проще простого.

Но когда ваше приложение становится всё больше и больше, оно начинает выглядеть неприятно. Вы приходите в замешательство по поводу ваших CSS-селекторов. Вы можете начать писать такие штуки, как div#app .list li.item a. Вы продолжаете писать такой код снова и снова. Вы выбрасываете весь свой код в конец файла, потому что вас просто-напросто всё равно, CSS отстой. И вот что вы получаете: 500 строк CSS полностью непригодный для дальнейшей поддержки.

У меня есть сегодня цель: улучшить ваш навык использования CSS. Я хочу, чтобы вы взглянули на ваши старые проекты и подумали: «О, нет, как я вообще мог такое написать?»

Ок, вы можете подумать, что вы правы, а не я. Но что насчет CSS фреймворков? Это ведь то, на чем они основаны, не так ли? Это то, как мы пишем правильный CSS-код.

Действительно. Но есть некоторые минусы:

  • это часто приводит с шаблонному дизайну
  • на CSS фреймворках сложно осущствлять тонкую настройку кода
  • вам необходимо сначала изучить эти фреймворки перед тем, как использовать их

И после всего, вы возвращаетесь к этой статье и есть одна причина сделать это, правильно? Так что, хватит лишних слов, давайте начнем изучать, как улучшить свои навыки в CSS.

Заметка: это статье посвящена не тому, как создавать дизайн красивых приложений. Она об изучении того, как писать удобный CSS-код и как его организовать.

SCSS

Я буду использовать SCSS в моих примерах.

SCSS — это CSS-препроцессор. В общих словах, это надмножество CSS: он добавляет некоторые классные возможности, например, переменные, вложенность, импорт и миксины.

Я расскажу сейчас об этих возможностях.

Переменные

У вас могут быть переменные при использовании SCSS. Основным преимуществом является возможность повторного использования. Давайте представим себе, что у вас есть палитра цветов для вашего приложения. Ваш основной цвет — синий.

Так что вы используете синий цвет везде: background-color для вашей кнопки, color для вашего заголовка и ссылок. Синий везде.

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

  •  Без использования переменных: вы меняете все строки, в которых вы использовали синий цвет.
  •  С использованием переменных: вы всего-лишь меняете значение переменной:)
// Declare a variable
$primary-color: #0099ff;
// References a variable
h1 {
  color: $primary-color;
}

Вложенность

Вы можете также создавать вложенные друг в друга блоки с использованием SCSS. Так, например, сниппет

h1 {
  font-size: 5rem;
  color: blue;
}
h1 span {
  color: green;
}

может превратиться в это:

h1 {
  font-size: 5rem;
  color: blue;
 
  span {
    color: green;
  }
}

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

Фрагменты и импорты

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

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

_animations.scss, _base.scss, _variables.scss, и так далее.

Что же касается импортов, ну, используйте директиву @import. Например, вот что вы можете сделать:

// _animations.scss
@keyframes  appear {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
}

// header.scss
@import "animations";
h1 {
   animation: appear 0.5s ease-out;
}

Ах! Вы можете подумать, что вы допустили здесь ошибку! Это _animations.scss, не animations 😉

Нет. SCSS достаточно умен для того, чтобы знать о том, что вы имеете в виду файл фрагмента, когда вы упоминаете о нем таким образом.

И это все, что нам нужно знать о переменных, вложенности, фрагментам и импортах. SCSS имеет также некоторые другие возможности вроде миксинов, наследования и других директив (@for, @if, …), но мы не будем на них останавливаться.

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

Организация CSS-кода: Методология БЭМ

Я уже не помню, сколько раз я использовал все эти невыразительные названия для моих CSS-классов. Ну, вы знаете это: .button, .page-1, .page-2, .custom-input.

Мы часто не знаем, как назвать подобные вещи. И это, на самом деле, важно. Что, если вы создавали приложение и решили по некоторым причинам отложить работу над ним на несколько месяцев? Или еще хуже, что, если кто-то присоединиться к вашему проекту? Если ваш CSS-код не был должным образом проименован, то будет тяжело понять, что вы имели в виду на самом деле.

БЭМ помогает нам решить такого рода проблему. БЭМ это соглашения по наименованию и оно расшифровывается как Блок-Элемент-Модификатор.

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

Блоки

Думайте о блоке, как о компоненте. Помните, когда вы ребенком играли в Лего? Ну, давайте вернемся назад, в детство.

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

Имя: имя блока: .block

Примеры: .card, .form, .post, .user-navigation

Элементы

А теперь как бы вы произвели окно с помощью кусочков вашего Лего? Возможно, что некоторые кусочки выглядят как части рамы, и когда вы соединяете четыре таких кусочка, то вы получаете прекрасное окно. Это ваши элементы. Они являются частями блока, и они нужны для того, что создать ваш блок. Но не будучи соединенными в блок, они бесполезны для строительства.

Имя: имя блока + __ + имя элемента: .block__element

Примеры: .post__author, .post__date, .post__text

Модификаторы

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

Имя: имя блока ИЛИ имя элемента + __ + имя модификатора: .block__element—modifier, .block—modifier

Примеры: .post—important, .post__btn—disabled

Некоторые заметки

  •  когда вы используете БЭМ, вы присваиваете имена классам и только классам. Не идентификаторам, не тегам. Только классам.
  • блоки/элементы могут быть вложены в другие блоки/элементы, но они должны быть полностью независимы. Запомните это слово: независимы. Так что не проставляйте отступы для кнопки, поскольку вы можете захотеть вставить такую кнопку в заголовок, в противном случае, ваша кнопка будет привязана к вашему заголовку. Используйте вспомогательные классы вместо этого.
  • да, ваш HTML-файл может быть перегружен, но не волнуйтесь — это достаточно небольшое неудобство по сравнению с тем, что БЭМ дает вам.

Пример

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

Например, вот как я могу представить Google Store:

как я предсталяю себе Google Store

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

Собираем все вместе

Вы найдете ниже несколько примеров, показывающих силу БЭМ.

Написание компонента для записи

Написание множество кнопок

Организация CSS-файлов: шаблон 7-1

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

А для того, чтобы это сделать, мы изучим шаблон 7-1.

В ы можете подумать, что это ни о чем вам не говорит.

Поверьте мне, это очень просто. Вам нужно следовать двум правилам:

1. Записывайте ваши фрагменты в 7 различных папок.

2. Импортируйте их в один файл main.scss, расположенный в корневом уровне. И это все.

Вот эти 7 папок:

  •  base: здесь размещайте ваши шаблонные файлы. Под шаблонными файлами я имею в виде весь CSS-код, который вы пишете каждый раз, когда создаете новый проект. Например, правила типографии, анимации, утилиты (под утилитами я имею в виду классы вроде margin-right-large, text-center, …) и так далее.
  •  components: это имя явно говорит нам о том, что здесь находится. Эта папка содержит все те компоненты, которые используются для создания ваших страниц вроде кнопок, форм, свайперов, всплывающих окон и т. д.
  •  layout: используется для разметки различных частей вашей страницы, например, header, footer, navigation, section, сетка вашей страницы и прочее
  •  pages: у вас иногда может быть страница, которая имеет свой собственный стиль, что может несколько отличаться от того, что делаете обычно. В таком случае, расположите ваш стиль в папке pages.
  •  themes: если у вашего приложения есть различные темы (темная, административная и так далее), поместите их в эту папку.
  •  abstracts: поместите все ваши функции здесь, вместе с переменными и миксинами. В кратце, все ваши вспомогательные функции
  •  vendors: что будет собой представлять ваше приложение без внешних библиотек? Поместите в папку vendors все файлы, которые с вами не связаны. Вы можете сюда добавить файл Font Awesome, Bootstrap, и все такое прочее.

Основной файл

Это то, куда вы будете импортировать все ваши фрагменты

@import abstracts/variables;
@import abstracts/functions;
@import base/reset;
@import base/typography;
@import base/utilities;
@import components/button;
@import components/form;
@import components/user-navigation;
@import layout/header;
@import layout/footer;
...

Да. Он выглядит несколько огромным. Но я знал, что вы так подумаете. Эта архитектура адаптирована для крупных проектов, но не для малых. Так что здесь представлена версия, адаптированная для малых проектов.

Во-первых, вам не понадобится папка vendors. Просто поместите весь ваш внешний CSS-код внутри тега link, расположенного в блоке header. Затем вы можете пропустить папку themes, поскольку у вас может быть только одна тема для вашего приложения. Наконец, вам возможно не захочется иметь большое количество специфических стилей на ваших страницах, так что вы можете пропустить и это. Великолепно, 4 папки пропущены!

Затем, у вас есть два возможных варианта:

1. Вы хотите, чтобы ваш CSS-код был организован и вы хотите дальше следовать шаблону 7-1, поэтому вы оставляете папки abstracts, components, layout и base.

2. Вы предпочитаете иметь одну большую папку, где бы вы располагали ваши шаблонные файлы и ваш файл main.scss, так что у вас будет нечто вроде этого:

sass/
   _animations.scss
   _base.scss
   _buttons.scss
   _header.scss
   ...
   _variables.scss
   main.scss

Все зависит от вас.

Вы убедили меня! Но как я могу использовать это? Я имею в виду, что браузеры не поддерживают scss файлы?

Отлично! Это наш последний шаг, и после этого мы будем изучать, как компилировать SCSS в CSS правильно.

Из SCSS в CSS

Для этого, вам необходимы Node.js и NPM (или Yarn ).

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

В CLI (Command Line Interface) достаточно легок для использования:

  node-sass <input> <output> [options]

У данной команды есть множество опций, но мы будет использовать только две:

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

—output-style: что будет в выводе вашего CSS-файла. Это может быть одно из следующих значений: nested|expanded|compact|compressed. Мы будем использовать это для построения вашего CSS-файла.

Если вы любопытный человек (я надеюсь, что это так, поскольку разработчик должен быть любопытным!), посмотрите полную документацию.

Теперь мы знаем, какие инструменты мы будем использовать. Остались только еще более простые вещи. Просто следуйте этим шагам:

  •  создайте ваш проект:
    mkdir my-app &amp;&amp; cd my-app
  •  инициализируйте его:
    npm init
  •  добавьте библиотеку node-sass:
    npm install node-sass —save-dev
  •  создайте ваши папки, ваш index.html и ваш main.scss:
touch index.html
mkdir -p sass/{abstracts,base,components,layout} css
cd sass && touch main.scss
  •  добавьте следующие скрипты в файл package.json:
{
   ...
   "scripts": {
     "watch": "node-sass sass/main.scss css/style.css -w",
     "build": "node-sass sass/main.scss css/style.css --output-style compressed"
   },
   ...
 }
  • добавьте гиперссылку, которая содержит ссылку на ваш скомпилированный CSS-файл в теге head вашего файла index.html:
<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <link rel=”stylesheet” href=”css/style.css”>
    <title>My app</title>
  </head>
  <body>
    <h1 class=”heading”>My app</h1>
  </body>
</html>

И это все, ваш проект готов! Запустите npm run watch во время процесса кодирования и откройте файл index.html в вашем браузере. Если вы хотите минимизировать ваш CSS, просто запустите npm run build.

Бонусы

Добавление живой перезагрузки

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

Еще раз, следуйте этим простым шагам:

  •  установите пакет live-server: npm install -g live-server. Замечание: это глобальный пакет
  •  добавьте npm-run-all к зависимостям вашего проекта: npm install npm-run-all —save-dev: это позволит вам запускать множество скриптов одновременно.
  • добавить эти скрипты к package.json:
{
   ...
   "scripts": {
     "start": "npm-run-all --parallel liveserver watch",
     "liveserver": "live-server",
     "watch": "node-sass sass/main.scss css/style.css -w",
   },
   ...
 }

А теперь когда вы запускаете npm run start, вы можете немедленно увидеть ваши изменения без особых усилий.

Добавление инструмента для автоматической простановки префиксов

Мы настроили инструменты разработчика, великолепно! Теперь, давайте поговорим об инструментах сборки и особенно об одном из них: Autoprefixer .

Это инструмент (особенно плагин postcss), который парсит CSS и добавляет префиксы вендора к правилам CSS, используя значения из Can I Use .

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

Это пример того, как это все выглядит:

    -webkit-animation-name: myAnimation;
    -moz-animation-name: myAnimation;
    -ms-animation-name: myAnimation;

Вы угадали, это утомительно писать. Поэтому нам нужен автопрефиксер для создания вашего CSS-кода, совместимого с браузерами без добавления дополнительного слоя сложности.

Вот что мы будем делать для сборки нашего CSS-кода:

1. Скомпилировать все SCSS-файлы в один основной CSS-файл.

2. Проставить префикс для вашего CSS-файла с помощью Autoprefixer.

3. Сжать ваш CSS-файл

Это будут последние шаги, так что потерпите меня, мы уже почти закончили 🙂

  • добавьте две зависимости, postcss-cli и autoprefixer: npm install autoprefixer postcss-cli —save-dev
  • модифицируйте скрипт build и добавьте следующие скрипты в package.json:
{
   ...
   "scripts": {
     "start": "npm-run-all --parallel liveserver watch",
     "liveserver": "live-server",
     "watch": "node-sass sass/main.scss css/style.css -w",
    "compile": "node-sass sass/main.scss css/style.css",
    "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",
    "compress": "node-sass css/style.css css/style.css --output-style compressed",
    "build": "npm-run-all compile prefix compress"
   ...
 }

А теперь, когда вы запустите npm run build, ваш CSS-код сжимается и добавляются префиксы вендора! Замечательно, не так ли?

Но вы знаете, что является еще более замечательным? Я установил репозиторий для вас на случай, если вы захотите быстро начать проект 🙂

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

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