CSS 5 საუკეთესო ინსტრუმენტები ვებ დეველოპერებისა და დიზაინერებისათვის

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-child (1n)
float: მარცხენა;
ზღვარი-მარჯვენა: 30px;
ნათელია: არცერთი;
}
div: ბოლო შვილი
ზღვარი-მარჯვენა: 0;
}
div: nth-child (3n)
ზღვარი-მარჯვენა: 0;
float: უფლება;
}
div: nth-child (3n + 1) {
ნათელი: ორივე;
}

ვინაიდან ეს JS– ით არის განპირობებული, PostCSS– ის შექმნა ადვილი არ არის, მით უმეტეს, თუ დიზაინერი ხართ და სულაც არ გაქვთ საერთო მოდულებთან, ბუნდერებთან და ზოგადად npm მსოფლიოში. ამის თანახმად, PostCSS– ის პოტენციალი თქვენს მუშაობაში არის მასიური და არ უნდა იყოს უგულებელყოფილი.

PurgeCSS

გიყვართ თანამედროვე ფრონტზე ჩარჩოების დაფუძნებული სამუშაო სამუშაო, მაგრამ იმედგაცრუებულნი ხართ იმით, რომ გარშემო ძალიან ბევრი ბარგი შემოაქვთ? თუ დიახ, PurgeCSS არის თქვენი მეგობარი, ყოველ შემთხვევაში, რამდენადაც განიხილება CSS.

მათთვის, ვინც შეიძლება არ იცოდეს რა არის დიდი საქმე: აქ არის სწრაფი დამუშავება. როდესაც ერთი გვერდიანი აპლიკაციების შექმნას იყენებთ წინა რგოლის ჩარჩოების გამოყენებით, როგორიცაა React, Angular, Vue და ა.შ., თქვენ გადის ის, რასაც ეწოდება “მშენებლობის პროცესი”. არსებითად, თქვენ კოდირებთ ყველა თქვენს CSS- ს, JS- ს, SASS- ს და ა.შ., ცალკეულ ფაილებში (მათი ორგანიზება, როგორც ყველაზე ინტუიციური), მაგრამ მას შემდეგ რაც თქვენ დასრულდებით, თქვენ ბრძანებთ ბუნდლერს, რომ შექმნას ეს ნივთი. რას აკეთებს წაიკითხეთ თქვენ მიერ დაწერილი ყველა კოდის კოდი, გამოიყენეთ მასში სხვადასხვა ფილტრები (მინიფიკატი, დაბინძურება / uglification და ა.შ.) და გამოიტანეთ გამომავალი ფაილები, ჩვეულებრივ „app.js“ ყველა JavaScript– ისთვის და “App.css” ყველა CSS- ისთვის. ეს ფაილები, სუსტი ”index.html” – ით არის ყველაფერი, რაც გჭირდებათ პროგრამის წინა ბოლოს გაშვებისთვის. უარყოფითი ის არის, რომ მას შემდეგ, რაც ყველაფერი შედის ამ საბოლოო ფაილებში, მათი ზომა ხშირად ვრცელდება იმაზე, რაც დასაშვებია სწრაფი რეაგირების დროს; მაგალითად, იშვიათი არ არის ის, რომ ნახოთ “app.js”, რომელიც 500 კბ-ზე მეტია!

PurgeCSS დამატებულია, როგორც თქვენი სამუშაო სამუშაოების ნაკადის ნაწილი და ხელს უშლის გამოუყენებელ CSS- ს საბოლოო შედეგში შეყვანას. ტიპიური გამოყენების შემთხვევაა Bootstrap: ეს არის საშუალო ზომის ბიბლიოთეკა, რომელზეც რამდენიმე UI კლასია სხვადასხვა კომპონენტისთვის. თუ თქვენი პროგრამა იყენებს, ვთქვათ, Bootstrap- ის კლასების 10% -ს, დანარჩენი 90% არის ერთადერთი საბოლოო საბოლოო CSS ფაილში. მაგრამ PurgeCSS- ის წყალობით, ასეთი გამოუყენებელი CSS ფაილები შეიძლება ამოიცნონ და თავიდან აიცილონ მშენებლობის პროცესი, რის შედეგადაც მიიღება ბევრად უფრო მცირე საბოლოო CSS ფაილი (5-6 ჯერ ზომის შემცირება საკმაოდ ნორმალურია).

ასე რომ, წავიდეთ წინ, ”გაწმინდეთ” ზედმეტი CSS– ით PurgeCSS! ��

კუდი

კუდი არის CSS ჩარჩო, მაგრამ იმდენად მიდის წინააღმდეგობა მარცვლეულისგან, რომ ვფიქრობდი, აქ არ შევაჩერო CSS ინსტრუმენტებს შორის. თუ თქვენ გძულს inline CSS (ვინ არ გამოდის?), Tailwind სავარაუდოდ გამოიწვევს საშინლად გადაქცევას საშინლად, როდესაც მას პირველად შეხვდებით. მოდით პირველი გემოვნება მივიღოთ იმის გათვალისწინებით, თუ როგორ შეგიძლიათ კოდირება ტიპიური ფორმის გამოყენებით Tailwind CSS:

ნიკი

პაროლი

გთხოვთ, აირჩიოთ პაროლი.

Შესვლა


Პაროლი დაგავიწყდა?

© 2019 Acme Corp. ყველა უფლება დაცულია.

”ეს ხუმრობაა ან რა? რა არის ყველა იმ შემაშფოთებელი პატარა კლასები? უფრო მჭიდრო შემოწმებისას, რატომ ვარ ჯოჯოხეთი, მე ვაყენებ ზღვრებს, ბალიშებს და ფერს პირდაპირ HTML- სთან ერთად? არის ეს 2019 ან რა? ”

მოსალოდნელია მსგავსი მოსაზრებები. ვიცი, რადგან იგივე ვიგრძენი და მაშინვე ჩაკეტე სახურავი Tailwind- ზე. მხოლოდ მოგვიანებით გავარკვიე პოდკასტი, სადაც სტუმრმა Tailwind– ში გადააკეთეს ტრენდული, ღირსეული ზომის ვებსაიტები, რომ დავიწყე ყურადღება..

სანამ გადავდივართ შემდგომ, განვიხილოთ ეს კითხვები:

  • დაიღალეთ სტანდარტული ჩარჩო კლასების და მათი ფუნქციების დამახსოვრებით, რათა თქვენი დიზაინები თქვენი გემოვნებით მოაწყოთ? კარგი მაგალითია Bootstrap- ის სანავიგაციო ზოლის გარეგნობისა და ქცევის შეცვლა.
  • როგორ ფიქრობთ, პოპულარული ჩარჩოები, როგორიცაა Bootstrap, გადატვირთულია და შეეცადეთ გააკეთოთ ბევრად მეტი, ვიდრე უნდა?
  • აღმოჩნდებით თუ არა ჩარჩოების შერევა, რადგან გსურთ ყველაზე უკეთეს სამყაროში?
  • მოგწონთ უფრო მეტი კონტროლი თქვენს დიზაინებზე და მაინც იპოვოთ ვანილინის CSS გამოცდილება?

თუ რომელიმე მათგანის პასუხი არის „დიახ“, ცუდად გჭირდებათ ტეილოვდი. ახლა გადავხედოთ რა არის Tailwind და რას აკეთებს.

Tailwind არის ის, რასაც ეწოდება კომუნალური პირველი CSS, რომელიც განსხვავდება იმით, რაც ჩვენ ყოველდღიურ სამუშაოებში ვმოქმედებთ: სემანტიკური CSS. სემანტიკური CSS და კომუნალური CSS- ს შორის განსხვავება ისაა, რომ ყოფილი ცდილობს დაასახელოს სტილის ელემენტები იმ ვიზუალური სექციების სახელით, რომლებიც გვერდზე ჩანს. ასე რომ, თუ თქვენ გაქვთ სანავიგაციო მენიუ, ბარათები, კარუსელი და ა.შ., ამ გვერდზე, სემანტიკური საშუალება იქნება CSS სტილის წესების დაჯგუფება ისეთ კლასებში, როგორიცაა: .av, .ard, .კარუსელი და ა.შ., მათი ქვე-სექციები შესაბამისად იარლიყით (მაგალითად, .კარდი-სხეული, .კარდი-ქვედაკიზი და ა.შ.). ეს ჯერჯერობით ყველაზე გავრცელებული მიდგომაა CSS- სთან მიმართებაში, ჩვენ ყველანი მას კარგად ვიცნობთ ჩარჩოებით, როგორიცაა Bootstrap, Foundation, Bulma, UI Kit და ა.შ..

თავის მხრივ, CSS- ის წერის „სასარგებლო“ სტილი ასახავს კლასებს ზუსტად მათი ფუნქციის შესაბამისად: კლასი, რომელიც აკონტროლებს ზღვარს ზედა და ქვედა მხარეებზე, დაასახელებს .margin-y- საშუალო და შეიძლება გამოყენებულ იქნას HTML- ში არსად. მარკირება სადაც საჭიროა ეს ზღვარი. მიუხედავად იმისა, რომ ეს გააცნობს გარკვეულწილად კლასის სახელწოდებებს (უბრალოდ დაათვალიეროთ კოდი, რომელიც მე უფრო ადრე გავზიარე ან ეკრანის ანაბეჭდად – ამდენი კლასელი!), CSS– ის განზრახვა ნათელია: თქვენ არ გჭირდებათ გადახტომა. უკან და მეოთხე დოკუმენტებს შორის, თქვენს CSS და HTML– ს შორის, რომ გაერკვნენ სწორი სახელები და სწორი ეფექტი.

ეს არის მუშაობის ძალიან გამათავისუფლებელი სამუშაო, მაგრამ ასევე არსებობს დაჭერა: თქვენ უნდა გქონდეთ თქვენი CSS საფუძვლები მკაფიოდ (მათ შორის Flexbox– ის თანამედროვე კონცეფციების ჩათვლით). ეს არის იმის გამო, რომ Tailwind არ გთავაზობთ გარე სტილებს თქვენი კომპონენტისთვის ნებისმიერი გვერდზე და თქვენზეა დამოკიდებული, რომ შეადგინოთ სტილები მოცემული სამშენებლო ბლოკიდან. კონფიგურაციის კიდევ ერთი პრობლემაა: Tailwind საშუალებას გაძლევთ რამდენიმე ჯგუფის CSS კლასის დაჯგუფება კომპონენტებად წოდებისკენ, მაგრამ ეს ხდება JavaScript– ის საშუალებით და მოითხოვს Webpack– ის მსგავსი მოდულის დამტვირთავსა და ბუნდერს..

ყველაფერი ნათქვამია და გაკეთებულია, Tailwind არის პოლარიზებული, გასაოცარი სტილის ახალი სტილის გაკეთება და მიმართავს მათ, ვინც უფრო მეტი სიმარტივისა და კონტროლისკენ ისწრაფვის.

საას

თუმც სასი დიდი ხანია რაც არსებობს, მე აქ გამოვყევი, რადგან დეველოპერებმა ჯერ კიდევ არ იციან რამდენად სასარგებლოა ეს. სტილისტურად გასაოცარი სტილის ფურცლები (ან SASS) არის CSS– ის სუპერმარკეტი, რომელიც შეიქმნა იმისთვის, რომ შეშფოთებული სიცილი მოეხსნა პროექტს, როდესაც CSS იზრდება რამდენიმე ხაზის მიღმა..

დახატეთ ეს: თქვენ საკმაოდ გრძელი გზა გაქვთ ჩაწერილი CSS თქვენი პროექტისთვის. თქვენ იყენებთ რამდენიმე ფერს, გაერკვნენ რამდენიმე მგრძნობიარე ზღვარი სხვადასხვა დივიზიონისთვის, შრიფტის სტილები და ა.შ. გარდა იმისა, რომ ახლა ხვდები, ეს ყველაფერი კარგად არ არის დამოკიდებული. იქნებ გსურთ სცადოთ უფრო დიდი ზღვარი ყველა განყოფილების, ბარათისა და ღილაკისთვის. აბა, ახლა რა? თვით იდეაც კი, რომ გიჭირთ შეცვლა თქვენი გიგანტური CSS ფაილის საშუალებით, საკმარისია ერთი თავის ტკივილი. ჩვენ ეს ყველაფერი გავაკეთეთ და ყველამ ვიცით, რამდენად არის მიდრეკილება შეცდომების მიმართ. სასი ამ პრობლემას აგვარებს ცვლადის შემოღებით:

როდესაც ვწერთ HTML- ს, ჩვენ ბუდეს ელემენტებს სხვა ელემენტების შიგნით. CSS– ის დაწერისას, ჩვენ უნდა დავწეროთ წესების ბრტყელი იერარქია, რაც ართულებს CSS– ს გონებრივ „მოთავსებას“ HTML. Sass- ით, თქვენ შეგიძლიათ მიბაძოთ გვერდის სტრუქტურას თქვენი სტილის ფაილების შიგნით:

ეს ყველაფერი არც კი დაიწყებს სიკეთის ზედაპირის გაფანტვას, რომელსაც Sass გთავაზობთ: მოდულური დიზაინი, შეიტანეთ ფაილები, mixins, მემკვიდრეობა. . . სია გრძელდება და გრძელდება. რა თქმა უნდა, თქვენ უნდა შეისწავლოთ Sass– ის შემქმნელის სამუშაო ნაკადი და შევიდეს თქვენს შემადგენლობაში, მაგრამ, ჩემი აზრით, გატარებული რამდენიმე საათის განმავლობაში არის ინვესტიცია, რომელიც გადაგიხდის თქვენ და მეტს!

CSS ხაზები

მას შემდეგ, რაც ვებ დიზაინერები (და UI დეველოპერები – თუმცა მაინტერესებს, როგორ განსხვავდება ეს ორი ტერმინი ��) იყენებენ ტექსტის მარტივ რედაქტორებს – ან, როგორც ეს არის ამ დღეებში, კრომი პირდაპირ Chrome dev dev- ებზე იბადება – ისინი იშვიათად იღებენ მოსმენას ან ისარგებლებენ ამით. ლაინერი. მეორეს მხრივ, პროგრამისტებმა, რომლებიც იყენებენ ტექსტურ რედაქტორებს, როგორიცაა VS Code, Sublime Text ან სხვა IDE, კარგად იციან ეს ინსტრუმენტი, რადგან ეს მათთვის მეორე ბუნებაა. ყოველ შემთხვევაში, საქმე იმაში მდგომარეობს, რომ თუ თქვენ ხართ ერთ-ერთი იმ CSS პროგრამისტისგან, რომელიც დაიხრჩობა ბინძურ CSS- ში, შეგიძლიათ ისარგებლოთ ლაინერით.

უფრო მარტივად რომ ვთქვათ, ლინტერი არის პროგრამა, რომელიც ამოწმებს თქვენს კოდს შეცდომებისა და შეუსაბამობებისთვის. ეს ამას აკეთებს იმ წესების მთელი რიგით დახმარებით, რომ გაერკვია, რა არის არასწორი და რა არის არათანმიმდევრული. კარგი ხაზები ინტეგრირდება IDE- ებთან და კოდების რედაქტორებთან და შესაძლებელია კონფიგურაცია გაუშვათ, ყოველთვის შეინახოთ წყაროს ფაილი. ისინი ასევე დაგეხმარებათ ფერადი გადახედვისას, შეცდომების და ავტომატური დასრულებისას, როდესაც შედგენთ თქვენს CSS ფაილებს:

მაგრამ ეს არის საუკეთესო ნაწილი – თუ მიჰყევით CSS კონკრეტულ სტილს და გაფორმებით, შეგიძლიათ კრეფა თქვენს კმაყოფილზე. ეს უზრუნველყოფს, რომ CSS პროექტის ფარგლებში მიჰყვება იგივე სტილის სახელმძღვანელოს (ასევე შესაძლებელია კონფიგურაცია მოხდეს ფაილის ავტოფორმირებაზე, ყველა შენახვის / ჩადენის შემთხვევაში). ასე რომ, გუნდში თუ მარტო მუშაობთ, მონაწილეობა ყოველთვის შესანიშნავია თქვენი პროექტის მუშაობისთვის.

დასკვნა

დარწმუნებული ვარ, ამ დროისთვის დარწმუნებული ხართ, რომ თანამედროვე CSS განვითარება წარსულის ნახველ-კატების მიდგომისგან შორს არის. ��

ამის თქმას კიდევ ერთხელ ვაღიარებ, თუნდაც გატეხილი ჩანაწერის ჟღერადობას ვგულისხმობ: ზოგი სტატია, რომელიც მე მაქვს ამ სტატიაში გაშუქებული, მარტივი არ არის დაყენება, მით უმეტეს, თუ npm ეკოსისტემასთან მეგობრული თვალსაზრისით არ ხარ. . სანამ ზიზღს იგრძნობთ და სახე გამობრუნდება, მითხარით ეს: იყო CSS ადვილი, როდესაც იყავი პირველი სწავლა ეს? ადვილი იყო სწავლა დივიზიის ცენტრში, დაეუფლონ ფუტკრების განწყობას და ა.შ. ანალოგიურად, ინსტრუმენტებს, რომლებიც აქ აღწერეს, აქვთ სწავლის მრუდი, მაგრამ ისინი ნამდვილად ღირს.

გულწრფელად გითხრათ, როდესაც შედეგების განცდას დაიწყებთ, თავს დაითმობთ, რომ ამას მალე არ გააკეთებთ. მოდით არ გვესმოდეს 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