Топ 5 CSS инструменти за уеб разработчици и дизайнери

CSS измина дълъг път, но инструментариумът около него не беше досега.


Ако смятате, че писането на CSS е като борба с чудовища в катран, вие не сте сами. Въпреки че CSS е една от най-основните технологии, захранващи мрежата, тя не е подходящ език за програмиране или рамка сама по себе си. В резултат на това, веднага щом проектът ви започва да става все по-изявен, това прави и бъркотията – правилата за селектиране сякаш са навсякъде и е трудно да намерите какво е къде; тъй като на страниците си включвате шрифтове, външен CSS, JS и други активи, крайният размер на пакета изглежда нараства и се чудите къде са се изгубили идеалите за бързи, удобни за потребителя предни крайници.

Но не трябва да е така. Днес инструментариумът около CSS се е развил до ниво, че работният поток не може просто да бъде опитомен, но да се направи и приятен. В тази статия ще говоря за пет такива CSS инструмента, които открих с огромна стойност в работата си. Съзнателно избягвам, включително „играчки“ инструменти като CSS генератори, генератори на менюта и т.н., защото създават повече проблеми, отколкото решават.

Влакът на CSS идва! Да тръгваме! �� ��

PostCSS

Ако обичате JavaScript, ще ви хареса идеята, която вече можем да добавим и контролираме CSS чрез JavaScript. И точно в това е способността PostCSS осигурява.

Това обаче не е просто синтаксисна захар на базата на JavaScript над CSS. PostCSS обгръща няколко мощни пакета / функции заедно, което води до много по-приятен и лесен работен процес при работа с CSS. Например:

  • Префиксите на доставчика се добавят автоматично въз основа на това, което собственост използвате.
  • Възможността да се открият кои функции на CSS могат да се използват в текущия браузър.
  • Използване на предстоящите, все още предстоящи издания, но много мощни актуализации на синтаксиса на CSS.
  • Отзивчива мрежа, която е толкова гъвкава, колкото се получава.

Мисля, че няма да направя справедливост към PostCSS, ако не включа примера на мрежата. И така, ето. Нещо толкова просто като това:

div {
загубена колона: 1/3
}

се преобразува в пълноценна CSS система с почти всички крайни случаи, които се грижат за:

div {
ширина: изчислено (99,9% * 1/3) –
(30px – 30px * 1/3));
}
div: nth-дете (1n) {
плувка: вляво;
марж-десен: 30px;
ясно: няма;
}
div: последно дете {
марж-десен: 0;
}
div: nth-дете (3n) {
марж-десен: 0;
плувка: дясно;
}
div: nth-дете (3n + 1) {
ясно: и двете;
}

Тъй като това е JS, управлявано от JS, PostCSS не е много лесно да се настрои, особено ако сте дизайнер и не сте имали много общо с модулите, пакетите и npm света като цяло. Въпреки това, потенциалът за PostCSS във вашата работа е голям и не бива да се пренебрегва.

PurgeCSS

Обичате ли модерния работен процес, базиран на рамката, но сте разочарован, че носят твърде много багаж? Ако да, PurgeCSS е ваш приятел, поне що се отнася до CSS.

За онези, които може би не знаят каква е голямата работа: ето бърза крачка. Когато изграждате приложения за една страница, използвайки предни рамки като React, Angular, Vue и т.н., преминавате през това, което се нарича „процес на изграждане“. По същество кодирате всичките си CSS, JS, SASS и т.н., в отделни файлове (организирайте ги, както ви е най-интуитивно), но след като сте готови, кажете на пакета да „изгради“ нещата. Това е, прочетете целия изходен код, който сте написали, приложете към него различни филтри (минимизация, объркване / заличаване и т.н.) и изплюйте изхода в единични файлове, обикновено “app.js” за всички JavaScript и „App.css“ за всички CSS. Тези файлове, заедно с кльощав „index.html“, е всичко, което ви е необходимо, за да стартирате предния край на приложението. Недостатъкът е, че тъй като всичко се включва в тези крайни файлове, техният размер често надхвърля допустимото за бързо време за реакция; например, не е необичайно да видите „app.js“ с над 500 KB!

PurgeCSS се добавя като част от работния процес на изграждане и не позволява неизползваният CSS да бъде свързан в крайния изход. Типичен случай на използване е Bootstrap: това е библиотека със среден размер с няколко UI класа за различни компоненти. Ако приложението ви използва, да речем, 10% от класовете на Bootstrap, останалите 90% са единственият разрез във вашия окончателен CSS файл. Но благодарение на PurgeCSS такива неизползвани CSS файлове могат да бъдат идентифицирани и предотвратени от процеса на изграждане, което води до много по-малки окончателни CSS файлове (намаляването на размера на 5-6 пъти е доста нормално).

Така че, продължете напред, „почистете“ ненужния CSS с PurgeCSS! ��

Tailwind

Tailwind е CSS рамка, но е толкова против зърното, че реших, че ще го включа тук сред инструментите за CSS. Ако мразите вградения CSS (кой не е ?!), Tailwind най-вероятно ще ви накара да се отдръпнете в ужас при първия път, когато го срещнете. Нека да получим първи вкус, като разгледаме как можете да кодирате типична форма с помощта на Tailwind CSS:

Потребител

парола

Моля, изберете парола.

Впиши се


Забравена парола?

© 2019 Acme Corp. Всички права запазени.

„Това шега ли е или какво ?! Какви са всички тези досадни малки класове? При по-внимателна проверка защо, по дяволите, определям полетата, подплънките и цвета директно заедно с HTML? Това 2019 г. ли е или какво? “

Очакват се мисли като тези. Знам, защото почувствах същото и веднага затворих капака на Tailwind. Едва чак по-късно попаднах на подкаст, където гостът преработи модерен, приличен уебсайт в Tailwind, че започнах да обръщам внимание.

Преди да продължим по-нататък, помислете за тези въпроси:

  • Омръзна ли ви да запомняте стандартните рамкови класове и техните функции, така че да можете да персонализирате дизайна си по ваш вкус? Добър пример е промяна на външния вид и поведението на навигационната лента Bootstrap.
  • Смятате ли, че популярните рамки като Bootstrap са излишни и се опитвате да направите много повече, отколкото трябва?
  • Смятате ли, че смесвате рамки, защото искате най-доброто от всички светове?
  • Харесва ли ви да имате повече контрол върху дизайна си и въпреки това намирате ваниловия CSS опит за превъзходен?

Ако отговорът на което и да е от тях е „да“, ви е необходим зле. Сега нека да разгледаме какво представлява Tailwind и какво прави.

Tailwind е това, което се нарича първо полезен CSS, което се различава от това, което правим в ежедневните си работни процеси: семантичен CSS. Разликата между семантичния CSS и полезния CSS е, че първият се опитва да групира стилни елементи по името на визуалните секции, които се появяват на страницата. Така че, ако имате навигационно меню, карти, въртележка и др. На страница, семантичният начин на правене на нещата би бил да групирате правилата в стила на CSS в класове като .nav, .card, .carousel и т.н., които техните подраздели съответно етикетирани (например .card-body, .card-footer и т.н.). Това е най-често срещаният подход към CSS и всички ние сме запознати с него чрез рамки като Bootstrap, Foundation, Bulma, UI Kit и т.н..

От друга страна, “полезният” стил на писане на CSS имена класове точно според тяхната функция: клас, който контролира марж за горната и долната страна, ще бъде наречен като .margin-y-medium и може да се прилага навсякъде в HTML маркиране, където това поле е необходимо. Въпреки че това въвежда донякъде пълзящо име на клас (просто погледнете бързо кода, който споделих по-рано или на екрана – толкова много класове!), Намерението на CSS е кристално ясно: няма нужда да скачате напред и назад сред документацията, вашия CSS и HTML, за да разберете правилните имена и правилния ефект.

Това е много освобождаващ начин на работа, но има и уловка: трябва да имате стабилно своите CSS основи (включително съвременни концепции като Flexbox). Това е така, защото Tailwind не предлага стилове за изчерпване на кутиите за компонентите на страницата ви и от вас зависи да конструирате стиловете от дадените градивни елементи. Друг проблем е проблемът с настройката: Tailwind ви позволява да групирате няколко CSS класа заедно в така наречените компоненти, но това е направено чрез JavaScript и изисква модулен товарач и пакет, като Webpack.

Всичко казано и направено, Tailwind е поляризиращ, поразяващ нов начин на стайлинг и ще се хареса на онези, които копнеят за по-голяма простота и контрол.

Саас

Макар че дръзки приказки има отдавна, включих го тук, защото разработчиците все още не знаят колко е полезно. Stylistically Awesome Style Sheets (или SASS) е набор от CSS, който е разработен, за да укроти лудостта на пълзящите в проекта, след като CSS нараства от няколко реда.

Представете си това: сте изминали дълъг път за написването на CSS за вашия проект. Използвате няколко цвята, измислите някои разумни граници за различни div, стилове на шрифтове и т.н. С изключение на това, че сега осъзнавате, че не всичко е толкова добре. Може би искате да опитате по-големи маржове за всички секции, карти и бутони. Е, сега какво? Дори самата идея да се наложи да търсите-замените чрез своя гигантски CSS файл е достатъчна, за да създадете едно главоболие. Всички сме направили това и всички знаем колко е податливо на грешки. Sass решава този проблем чрез въвеждане на променливи:

Когато пишем HTML, ние влагаме елементи вътре в други елементи. Но когато пишем CSS, трябва да напишем плоска йерархия от правила, което затруднява психически „приспособяването“ на CSS към HTML. С Sass можете да имитирате структурата на страницата във вашите файлове със стил:

Всичко това дори не започва да надраска повърхността на благините, които предлага Sass: модулен дизайн, включва файлове, миксини, наследяване. , , списъкът продължава и продължава. Разбира се, ще трябва да научите работния процес на компилатора на Sass и да го включите във вашия, но според мен, тези два часа, прекарани, са инвестиция, която ще ви плаща отново и отново!

CSS Linters

Тъй като уеб дизайнерите (и разработчиците на потребителски интерфейс – макар да се чудя как тези два термина са различни ��) използват прости текстови редактори – или както е в наши дни, кодирайте направо от инструментите за разработване на Chrome – те рядко могат да чуят или да се възползват от Linter. От друга страна, програмистите, които използват добри текстови редактори като VS Code, Sublime Text или други IDE, познават този инструмент много добре, тъй като той е вторият им характер. Във всеки случай, въпросът е, че ако сте един от онези разработчици на CSS, които се удавят в разхвърлян CSS, можете да се възползвате от линтер.

Най-просто казано, линерът е програма, която проверява кода ви за грешки и несъответствия. Това прави с помощта на набор от правила, които има, за да установи какво не е наред и кое не е в съответствие. Добрите линтери се интегрират с IDE и редактори на кодове и могат да бъдат конфигурирани да се стартират всеки път, когато запазите изходния файл. Те също така ви помагат при визуализация на цветовете, грешки и автоматично завършване, когато съставяте вашите CSS файлове:

Но ето това е най-добрата част – ако следвате определена CSS стилистика и форматиране, можете да ощипвате облицовката по ваш вкус. Това гарантира, че CSS в рамките на един проект следва едно и също ръководство за стил (линът може също така да бъде конфигуриран така, че да форматира автоматично всеки файл за запис / запис на изходния код). Така че, независимо дали работите в екип или сами, линията винаги е чудесно допълнение към работния процес на вашия проект.

заключение

Сигурен съм, че досега сте убедени, че съвременната CSS разработка е далеч от подхода на стадо-котките от миналото. ��

Това каза, пак ще призная нещо, дори и да звуча като счупен запис: някои от инструментите, които обхванах в тази статия, не са лесни за настройка, особено ако не сте приятелски настроени с npm екосистемата , Но преди да се почувствате отвратени и да обърнете лицето си, кажете ми това: лесно ли беше CSS, когато бяхте първи изучаване на то? Лесно ли беше да се научиш да центрираш div, да овладееш промените в настроението на плувки и т.н.? По същия начин инструментите, които описах тук, имат някаква крива на обучение, но те си заслужават.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map