Как да станете по-добри в писането на CSS

CSS3

Нека не бием около храста: писането на страхотен CSS код може да бъде болезнено.
Много разработчици не искат да правят CSS разработка. Мога да направя всичко, което искате, но не! Няма CSS.

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

Когато започвате проект, всичко работи добре. Имате няколко CSS селектори: .title input #app, easy pey.

Но когато приложението ви става все по-голямо и по-голямо, то започва да изглежда ужасно. Объркани сте за вашите CSS селектори. Намирате се да пишете неща като div # app .list li.item a. Продължавате да пишете един и същ код отново и отново. Хвърляте целия си код в края на файла си, защото просто не ви пука, CSS е гадно. И ето: 500 реда CSS са напълно непостижими.

Днес имам цел: да ви направя по-добър в писането на CSS. Искам да разгледате по-старите си проекти и да помислите: о момче, как изобщо бих могъл да напиша нещо такова?

Добре, може да си помислиш, имаш точка. Но какво да кажем за CSS рамките? Това е, за което се открояват, нали? Така пишем добър CSS код.

Сигурен. Но има някои недостатъци:

  • Често води до обичайния дизайн.
  • Може да е трудно да персонализирате или да надхвърлите рамките на CSS.
  • Трябва да ги научите, преди да ги използвате.

И в края на краищата кацнахте на тази статия и има причина за това, нали? Така че без допълнително обожание, нека научим как да се подобрим в CSS.

Забележка: това не е статия за това как да проектирате красиви приложения. Става въпрос за научаването как да пишете поддържан CSS код и как да го организирате.

SCSS

Ще използвам SCSS в моите примери.

SCSS е CSS предпроцесор. По принцип това е суперкомплект от CSS: той добавя някои готини функции като променливи, влагане, импортиране и mixins.

Ще говоря за това, какви функции ще използваме веднага.

Променливи

Можете да имате променливи с SCSS. Основната полза: повторната употреба. Да приемем, че имате палитра от цветове за приложението си. Вашият основен цвят е син.

Така че поставяте синьо навсякъде: цветът на фона на вашия бутон, цветът на заглавието ви, връзките. СВЕТЕ ВСЕКИ.

И изведнъж не харесвате синьо. Предпочитате зелено.

  • Без променливи: променете всички линии, където поставяте синия си цвят.
  • С променливи: просто променете променливата;)
// Деклариране на променлива
$ основен цвят: # 0099ff;
// Позовава променлива
h1 {
  цвят: $ първичен цвят;
}

Разполагане

Можете също да вложите кода си с SCSS. Така че този фрагмент

h1 {
  размер на шрифта: 5rem;
  цвят: син;
}
h1 педя {
  цвят: зелен;
}

може да стане това:

h1 {
  размер на шрифта: 5rem;
  цвят: син;
  
  педя {
    цвят: зелен;
  }
}

Много по-четено, нали? Вие прекарвате по-малко време в писане на сложни селектори с влагане.

Партии и внос

Що се отнася до поддръжката и четимостта, не е възможно да запазите целия си код в един голям файл. Може да отговаря на вашите нужди, когато експериментирате или създавате малко приложение, но на професионално ниво… дори не се опитвайте. За щастие за нас, SCSS ни позволява да го направим.

Можете да създадете частични файлове, като назовавате файла с водещ подчертаващ: _animations.scss, _base.scss, _variables.scss и т.н.

Що се отнася до импортирането, добре използвайте директивата @import. Например, това можете да направите:

// _animations.scss
Появяват се @keyframes {
  0% {
    непрозрачност: 0;
  }
  100% {
    непрозрачност: 1;
  }
}
// header.scss
@import "анимации";
h1 {
  анимация: появява се 0.5s улесняване;
}

Ах! може да си помислите Ти направи грешка тук! Това е _animations.scss, а не анимации;)

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

И това е всичко, което трябва да знаем за променливите, влагането, частиците и импорта. SCSS има още няколко функции като mixins, наследяване и други директиви (@for, @if, ...), но няма да ги обхвана тук.

Ако искате да знаете повече за него, проверете техните документи. Те са добре написани и лесни за разбиране.

Организиране на CSS код: Методологията на BEM

Не мога да си спомня колко пъти използвах термини за улов на моите CSS класове. Знаете: .бутон .page-1 .page-2 .custom-input.

Често не знаем как да назовем нещата. И все пак е важно. Какво става, ако създавате приложение и сте решили по някакви причини да го оставите настрана за няколко месеца? Или по-лошо, какво ще стане, ако някой вземе обратно проекта? Ако вашият CSS код не е посочен правилно, ще бъде трудно да разберете за какво говорите.

BEM ни помага да решим този проблем. BEM е конвенция за именуване и означава Модификатор на блокови елементи.

Тази методология може да направи нашия код структуриран, по-модулен и за многократна употреба. Сега да обясним какво е блок, елемент и модификатор.

блокове

Мислете за блока като за компонент. Спомняте ли си, когато играхте Легос като дете? Е, нека се върнем назад във времето.

Как бихте изградили обикновена къща? Трябва ви прозорец, покрив, врата, стени и това е всичко. Ами това са нашите блокове. Те имат смисъл сами по себе си.

Именуване: името на блока: .block
Примери: .card, .form, .post, .user-навигация

елементи

Сега как бихте изградили прозорец с вашите легоси? Ами може би някои от тях изглеждат като рамки и когато сглобите четири от тях, получавате красив прозорец. Това са нашите елементи. Те са частите на блок и са необходими, за да изградим нашия блок. Но извън блока си те са безполезни.

Именуване: име на блок + __ + име на елемент: .block__element
Примери: .post__author, .post__date, .post__text

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

Сега, когато сте изградили прозореца си, може да искате да имате зелен или малък. Това са неща, наречени модификатори. Те са знамена на блокове или елементи и се използват за промяна на поведението, приспособленията и т.н.

Именуване: име на блок ИЛИ име на елемент + - + име на модификатор: .block__element - модификатор, .block - модификатор
Примери: .post - важен, .post__btn - деактивиран

Някои бележки

  • Когато използвате BEM, наименувате с класове и само класове. Без идентификатори, без маркери. Просто класове.
  • Блокове / елементи могат да бъдат вложени в други блокове / елементи, но те трябва да бъдат напълно независими. Запомнете тази дума: независим.
    Затова не поставяйте полета на бутон, защото искате той да бъде поставен под заглавие, в противен случай бутонът ви ще бъде обвързан с вашето заглавие. Използвайте класове на полезност вместо това.
  • Да, HTML файлът ви ще бъде претоварен, но не се притеснявайте - това е малък недостатък в сравнение с това, което ви носи BEM.

Пример

Ето едно упражнение за вас. Отидете до любимите си или най-използваните уебсайтове и се опитайте да помислите какви биха били блоковете, елементите и модификаторите.

Например, това си представям в магазина на Google:

Твой ред е. Бъдете любопитни и помислете какво биха могли да направят хората по-добре. Както винаги, трябва да търсите сами, да експериментирате и да създавате, за да постигнете по-добро желание.

Поставяме всичко заедно

По-долу ще намерите някои примери, показващи силата на BEM.

Организиране на CSS файлове: модел 7–1

Все още с мен? Страхотен! Сега нека да видим как да организираме CSS файлове. Тази част наистина ще ви помогне да бъдете по-продуктивни и ще ви позволи незабавно да намерите къде трябва да промените вашия CSS код.

И за да направим това, ще научим за модела 7–1.

Не ми прилича на нещо, може да си помислите

Повярвайте ми, това е доста просто. Трябва да спазвате 2 правила:

  1. Напишете всичките си партитури в 7 различни папки.
  2. Импортирайте ги всички в един файл main.scss, разположен на кореново ниво. И това е.

7-те папки:

  • база: тук, поставете целия си код на котлона. Под котлона имам предвид целия CSS код, който ще пишете всеки път, когато стартирате нов проект. Например: правила за типография, анимации, помощни програми (под комунални услуги, имам предвид класове като margin-right-large, text-center, ...) и така нататък.
  • компоненти: Тук името е изрично. Тази папка съдържа всички компоненти, използвани за създаване на страниците ви като бутони, формуляри, плъзгачи, изскачащи прозорци и т.н.
  • оформление: използва се за оформление на различните части на вашата страница, тоест заглавката, долния колонтитул, навигацията, секцията, вашата собствена мрежа и др.
  • страници: Понякога може да имате страница, която има свой специфичен стил, който се откроява от това, което обикновено правите. След това поставете вашия стил в папката със страници.
  • теми: Ако имате различни теми за приложението си (тъмен режим, администратор и т.н.), поставете ги в тази папка.
  • резюмета: Поставете тук всичките си функции, заедно с променливи и миксини. Накратко, всичките ви помощници.
  • продавачи: какво би било приложение или проект без външни библиотеки? Поставете в папката на доставчиците всички файлове, които не зависят от вас. Може да искате да добавите вашия файл с шрифтове Awesome, Bootstrap и подобни неща тук.

Основният файл

Тук ще импортирате всичките си части.

@import резюмета / променливи;
@import резюмета / функции;
@import база / нулиране;
@import база / типография;
@import база / комунални услуги;
@импортиране на компоненти / бутон;
@import компоненти / форма;
@ импортиране на компоненти / потребителска навигация;
@import оформление / заглавие;
@import оформление / долен колонтитул;
...

Да. Изглежда непосилно. Но знаех, че ще мислиш това. Тази архитектура е адаптирана към по-големи проекти, но не и към малки. Така че тук има версия, пригодена за по-малки проекти.

Първо, няма да се нуждаете от папката на доставчиците. Просто поставете целия си външен CSS код в маркер за връзка, поставен в заглавие. След това можете да пропуснете папката с теми, тъй като вероятно ще имате само една тема за приложението си. И накрая, няма да имате много конкретни стилове за вашите страници, така че можете да пропуснете и този. Страхотно, останали са 4 папки!

След това имате два варианта:

  1. Искате вашият CSS код да бъде организиран и да следвате модела 7–1, така че да пазите резюметата, компонентите, оформлението и базовите папки.
  2. Предпочитате да имате една голяма папка, в която да поставите всичките си партиални файлове и вашия main.scss файл, така че ще имате нещо подобно на това:
Sass /
  _animations.scss
  _base.scss
  _buttons.scss
  _header.scss
  ...
  _variables.scss
  main.scss

От теб зависи.

Убедихте ме! Но как да го използвам? Искам да кажа, че браузърите не поддържат scss файлове нали?

Добро хващане! Това е последната ни стъпка и веднага ще научим как да компилираме SCSS към CSS.

От SCSS към CSS

За това ще са ви необходими Node.js и NPM (или Прежда).

Ще използваме пакет, наречен node-sass, който ни позволява да компилираме .scss файлове в .css файлове.

CLI (интерфейсът на командния ред) е доста лесен за използване:

node-sass <вход> <изход> [опции]

Има много опции там, но ще използваме само две:

  • -w: гледайте директория или файл. Това означава, че node-sasswaits за всички промени в кода ви и когато те се случат, той автоматично се компилира в CSS. Наистина полезен при разработване.
  • --outout-style: какъв ще бъде изходът на вашия CSS файл. Тя може да бъде една от тези стойности: вложени | разширени | компактни | компресирани. Ще го използваме за създаването на вашия CSS файл.

Ако сте любопитен човек (което се надявам да сте, разработчик трябва да е любопитен!), Отидете тук за пълните документи.

Сега знаем какви инструменти ще използваме. Останалото е още по-просто. Просто следвайте тези стъпки:

  • Създайте свой проект: mkdir my-app && cd my-app
  • Инициализирайте го: npm init
  • Добавете библиотеката node-sass: npm инсталирайте node-sass --save-dev
  • Създайте папки, вашите index.htmland вашите main.scss файлове:
докоснете index.html
mkdir -p sass / {резюмета, база, компоненти, оформление} css
cd sass && touch main.scss
  • Добавете тези скриптове във файла package.json:
{
  ...
  "скриптове": {
    "watch": "node-sass sass / main.scss css / style.css -w",
    "build": "node-sass sass / main.scss css / style.css - компресиран в изходен стил"
  }
  ...
}
  • Добавете връзката, която съдържа препратката към вашия компилиран CSS файл, в основния маркер на вашия index.html файл:

<Глава>
  
  
  
  
   Моето приложение 
<Тяло>
  

Моето приложение

И това е, вие сте готови да продължите! Стартирайте npm run watch, когато кодирате и отворете файла index.html в браузъра си. Ако искате вашият CSS да бъде минимизиран, просто стартирайте npm run build.

бонуси

Добавяне на презареждане на живо

Може да искате да добавите презареждане на живо, за да бъдете още по-продуктивни, вместо да презареждате ръчно вашия локален файл index.html.

Още веднъж следвайте тези прости стъпки:

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

Сега, когато стартирате npm run start, веднага можете да видите промените си, без да докосвате нищо.

Добавяне на autoprefixer

Зададохме инструменти за разработка, страхотно! Сега, нека да поговорим за инструментите за изграждане и по-специално един: Autoprefixer.
Това е инструмент (особено приставка за postcss), който анализира CSS и добавя префикси на доставчици към CSS правила, използвайки стойности от Can I Use.

Наистина, когато създавате уебсайт, можете да използвате нови функции, които не се поддържат напълно във всички браузъри. Следователно, префиксите на доставчика са решението за добавяне на поддръжка за тези функции.

Това е пример за това как изглежда:

-webkit-animation-name: myAnimation;
-moz-анимация-име: myAnimation;
-ms-animation-name: myAnimation;

Познахте, досадно е да пишете. Ето защо се нуждаем от autoprefixer, за да направим нашия CSS код съвместим с браузърите, без да добавяме допълнителен сложен слой.

Така че това, което ще направим с код за изграждане на нашия CSS е:

  1. Компилирайте всички наши SCSS файлове в един основен CSS файл.
  2. Префикс на нашия CSS файл с Autoprefixer.
  3. Компресирайте нашия CSS файл

Това ще бъдат последните стъпки, така че понесете с мен, почти сте свършили

  • Добавете две зависимости, postcss-cli и autoprefixer: npm инсталирайте autoprefixer postcss-cli --save-dev
  • Променете скрипта за изграждане и добавете тези скриптове към package.json:
{
  ...
  "скриптове": {
    "start": "npm-run-all - паралелен часовник на liveserver",
    "liveserver": "live-server",
    "watch": "node-sass sass / main.scss css / style.css -w",
    "compile": "node-sass sass / main.scss css / style.css",
    "префикс": "postcss css / style.css - използвайте autoprefixer -o css / style.css",
    "press ":" css node-sass / style.css css / style.css - компресиран в изходен стил ",
    "build": "npm-run-all компилиране на префикс за компресиране"
  ...
}

Сега, когато стартирате runnpm run build, вашият CSS код се компресира и са добавени префикси на доставчика! Страхотно нали?

Но знаете ли какво е още по-страхотно? Създадох репо за вас само в случай, че искате бързо да започнете

Ааааа и това е всичко за днес! Сега сте готови да напишете поддържан, модулен и многократен CSS код.

Надявам се тази статия да ви е харесала Ако е така, не се колебайте да ми дадете отзиви в коментарите.