CSS კოდების ბაზის გასუფთავება. სტილის გადატვირთვა CSS Reset-ის გამოყენებით

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

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

Chrome Developer Tool

გამოდის, რომ Chrome Developer Tools-ს უკვე აქვს ჩაშენებული ფუნქცია. მე გამოვცადე ის საიტზე, რომელიც ვიცოდი, რომ ბევრი სტილი იყო, რომლის წაშლაც შეიძლებოდა. გრძნობები აირია. შესვლის ბარიერი ძალიან დაბალია, განსაკუთრებით დეველოპერებისთვის, რომლებიც უკვე მუშაობდნენ Chrome Developer Panel-თან. არაფრის დაყენება არ გჭირდება, კარგია.

რა უნდა გააკეთოთ საიტზე სტილის შესამოწმებლად:

გახსენით თქვენთვის საინტერესო საიტი

გახსენით დეველოპერის პანელი

გადადით აუდიტის ჩანართზე

აირჩიეთ ვებ გვერდის შესრულება და გაუშვით

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

კარგია?

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

დასკვნა: სასარგებლოა დამწყებთათვის, მაგრამ არა გრძელვადიანი გამოსავალი.

UnCSS

გამოუყენებელი სტილის საპოვნელად შეგიძლიათ გამოიყენოთ ბრძანების ხაზის ხელსაწყოები. UnCSS საინტერესო მაგალითია. ის ახვევს გვერდს phantomJS-ში და იჭერს JS-ში ჩასმული სტილებს. ძალიან მინდოდა ამ ხელსაწყოს გამოცდა, რადგან მან გადაჭრა ჩემი პრობლემა, რადგან Chrome Developer Panel საერთოდ არ არის დაკავშირებული კოდების რედაქტირებასთან. UnCSS-ით შედეგი შეიძლება შენახული იყოს პირდაპირ ფაილში, სრულყოფილი.

ინსტალაცია

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

sudo apt-get განახლება sudo apt-get install build-essential chrpath libssl-dev libxft-dev sudo apt-get დააინსტალირე libfreetype6 libfreetype6-dev sudo apt-get დააინსტალირე libfontconfig1 libfontconfig1-dev

sudo apt - მიიღეთ განახლება sudo apt - მიიღეთ დააინსტალირეთ build - აუცილებელი chrpath libssl - dev libxft - dev sudo apt - დააინსტალირე libfreetype6 libfreetype6 - dev sudo apt - დააინსტალირეთ libfontconfig1 libfontconfig1 - dev

UnCSS შეიძლება ინტეგრირებული იყოს მშენებლობის პროცესში, მაგრამ ჩვენ ამას ახლა გამოვტოვებთ. ვფიქრობ, არ არის კარგი იდეა მისი ჩასმა მშენებლობის პროცესში. Addy Osmani-ს აქვს კარგი სტატია ამ თემაზე. იდეალურ შემთხვევაში, ჩვენ გვსურს ამოიღოთ გამოუყენებელი სტილები პირდაპირ კოდიდან, ვიდრე უბრალოდ გავფილტროთ ისინი საბოლოო პროდუქტისთვის.

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

ბრძანების ხაზის გამოყენებით

uncss http://your-site.foo/ > unused-styles.css

uncss http: //your-site.foo/ > unused-styles.css

შედეგი იყოფა your-site.com და Chrome ბრაუზერის სტილებს შორის, მაგრამ ინახება ერთ ფაილში. ჩემს საიტს აქვს შრიფტის გასაოცარი შრიფტი და ყველა ხატულა, რომელიც არ გამოიყენება მთავარ გვერდზე, დასრულდა UnCSS გამომავალში. ახლა ამას ჩემთვის მნიშვნელობა არ აქვს. მათი დამალვა შესაძლებელია ბრძანების ხელახლა გაშვებით და ignoreSheets-ის მითითებით.

გაითვალისწინეთ, რომ ignoreSheets-ს შეუძლია მიიღოს სტრიქონი (სტილის სრული URL, რომელიც უნდა იგნორირებული იყოს) ან რეგულარული გამოხატულება. რეგულარული გამოხატვა უფრო ადვილია, რადგან ნაკლები სიმბოლოა და ის ფარავს ფაილის გზაზე შესაძლო ცვლილებებს.

IgnoreSheets /.*font-awesome.min.css/

ეს არის შეცდომის შეტყობინება, რომელიც გამოჩნდება, როდესაც გვერდი ამოიწურება. დრო შეიძლება გაიზარდოს -t N-ის გამოყენებით, სადაც N არის მილიწამების რაოდენობა (არ დააყენოთ –t 360 და შემდეგ გაინტერესებთ, რატომ არ დაელოდა კოდი 5 წუთს).

დასკვნა: UnCSS უფრო მოსახერხებელია, რადგან ის უფრო ახლოს არის იმ ადგილთან, სადაც მე ვამუშავებ სტილებს. გამომავალი ფაილი სასარგებლოა არასაჭირო სტილის აღმოსაფხვრელად. მე ვხედავ მის გამოყენებას –includeSheets ოფციის გამო, რომელიც ავტომატურად იგნორირებას უკეთებს ყველაფერს, რაც ექვემდებარება რეგულარულ გამონათქვამს. მოსახერხებელია, მაგალითად, WordPress საიტებისთვის, სადაც სხვადასხვა დანამატებს შეუძლიათ თავიანთი სტილის კორექტირება, მაგრამ დეველოპერს სჭირდება მხოლოდ თემის სტილის style.css და ა.შ.

რომელი ინსტრუმენტი გამოვიყენო?

თავიდან ავირჩიე UnCSS და მოსახერხებელი ბრძანების ხაზი. თუმცა, სანამ მე ვწერდი ამ სტატიას, მე ვცადე ისინი კიდევ რამდენიმე საიტზე და მივიღე ნაკლებად პერსპექტიული შედეგები. კერძოდ, მაქვს რამდენიმე საიტი შექმნილი რამდენიმე წლის წინ, რომლებიც იყენებენ ჩარჩოს, სადაც მუდმივი კომენტარებია ჩართული /*!*…*/. ისინი კარგად არ მუშაობენ PostCSS-თან და, შესაბამისად, არ მუშაობენ კარგად UnCSS-თან. მე ჯერ არ ჩავუღრმავებულვარ ამ საკითხს, მაგრამ, შესაძლოა, PostCSS-ის უფრო ახალი ვერსია უფრო მიმტევებელია მსგავსი კომენტარების მიმართ. თუმცა, ახლა ეს გახდა კიდევ ერთი ბარიერი და მე არ შემიძლია სრულად გამოვიყენო UnCSS ჩემს საქმიანობაში.

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

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

როგორ გამოჩნდა CSS Reset ტექნოლოგია და როგორ გამოვიყენოთ იგი

CSS გადატვირთვაარის კასკადური სტილის ცხრილების თვისებების სია, რომლებიც აღადგენს ბრაუზერის ნაგულისხმევს.

ეს ტექნიკა საშუალებას გაძლევთ შექმნათ უნივერსალური ვებ სერვისი, რომელიც არ აქვს მნიშვნელობა ერთნაირად გამოიყურება და დაგეხმარებათ გამოუყენებელი სტილისგან თავის დაღწევაში.

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

მე მჯერა, რომ ყველა თავმოყვარე ვებ აპლიკაციის შემქმნელს უნდა ჰქონდეს საკუთარი თავისთვის მორგებული გადატვირთვის ჩარჩო. ეს შეიძლება იყოს ერთ-ერთი მზა ფაილი, ან შესაძლოა თქვენი პირადი გადატვირთვის ფაილი.

რაც შეეხება ისტორიას, მსგავსი ტექნოლოგია პირველად გამოიყენა Crespanis Andrew-მა 2004 წელს. თავის ტექნიკურ პუბლიკაციებში მან ურჩია განლაგების დიზაინერებს გამოიყენონ უნივერსალური სელექტორი დოკუმენტის დასაწყისში სტილებით, ე.ი. * და მასში გადატვირთეთ ობიექტის შეწევა, რომელიც ნაგულისხმევად არის დაყენებული თითოეულ ბრაუზერში.

ამ ტექნიკის პროგრამული დანერგვა ასე გამოიყურება:

მაგალითი იმისა, თუ როგორ მუშაობს ე. კრესპანისის მიდგომა

თუ აწარმოებთ მაგალითს, ხედავთ, რომ ბლოკი მდებარეობს ზედა მარცხენა კუთხესთან ახლოს.

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

ამრიგად, ერთ-ერთი მიდგომა იყენებს ვებ ობიექტების ყველა საზღვრის დამატებით ნულიზაციას (ხაზის დამატება საზღვარი: 0;), ხოლო მეორეში - ელემენტების საზღვრების და გარე კონტურის პარამეტრების გადატვირთვა (დამატებულია პირველ ვარიანტში მონახაზი: 0; საზღვარი: 0;).

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

ამიტომ, ბევრი ვებ გურუ და IT პროფესიონალი განაგრძობდა ახალი მიმართულების გაუმჯობესებას. ასე რომ, ერიკ მაიერმა ჩაატარა გარკვეული გამოკვლევა, შეისწავლა იმ დროს დაწერილი ბევრი ნამუშევარი და შექმნა ძლიერი ინსტრუმენტი სახელწოდებით CSS Reset.

ფრთხილად! ვებ მაფია! მოკლავს ნებისმიერი ბრაუზერის სტილის სტანდარტს!

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

მინდა აღვნიშნო მნიშვნელოვანი დეტალი: სტილის მარკირების გადატვირთვა უნდა მოხდეს სხვა თვისებების დაყენებამდე, რადგან css ამუშავებს სტილის წესებს თანმიმდევრობით და გადაწერს იმავე ტეგებისთვის რამდენჯერმე მითითებული პარამეტრების მნიშვნელობებს.

მოდით დავუბრუნდეთ ერიკ მაიერს და მის CSS გადატვირთვას. თავის გადაწყვეტაში ის ადგენს წესებს CSS ენის თითქმის ყველა ელემენტისთვის, კონტეინერებიდან დაწყებული ისეთ პატარა ტეგებამდე, როგორიცაა ძლიერი, var, მარკა და სხვა. აქ არის ამ დოკუმენტის ოფიციალური მეორე ვერსია: http://meyerweb.com/eric/tools/css/reset/index.html

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

მაგალითად, Yahoo! შექმნეს YUI CSS Reset, რომელიც მათ თავისუფლად გახადეს (მისი ნახვა შეგიძლიათ ამ ბმულზე: http://yui.github.io/yui2/#start).

კრის პოტეტმა და მისმა თანამოაზრეებმა განავითარეს Siolon's CSS ბრაუზერის გადატვირთვა ( http://www.siolon.com/blog/browser-reset-css/). და ეს შეიძლება გაგრძელდეს ძალიან დიდი ხნის განმავლობაში.

აქ მინდა ჩამოვთვალო CSS Reset-ის გამოყენების რამდენიმე მნიშვნელოვანი წესი და სახელმძღვანელო:

1. როგორც უკვე ვთქვი, პირველი, რაც უნდა იმუშაოს css კოდში, არის პარამეტრების გადატვირთვა. მიუხედავად იმისა, რომ ეს ინტუიციურია, ძალიან ხშირად დამწყები და გამოცდილი დეველოპერები აბრკოლებენ ამ შეცდომას;
2. CSS გადატვირთვისთვის ცალკე CSS დოკუმენტის გამოყენება კარგ პრაქტიკად ითვლება. გარდა ამისა, ასეთი ფაილი ხდება უნივერსალური დეველოპერის ინსტრუმენტი და მისი გამოყენება შესაძლებელია სხვადასხვა ვებ პროექტებში;
3. არ შეგეშინდეთ პირადი ცვლილებების განხორციელება ან საკუთარი გადატვირთვის ჩარჩოების შექმნა;
4. შეეცადეთ ბრმად არ გამოიყენოთ მზა გადაწყვეტილებები სტილის გადატვირთვისთვის და შემდეგ ხელახლა განსაზღვროთ ზოგიერთი პარამეტრი. ეს საფრთხეს უქმნის კოდის ზედმეტობას. და IT ადამიანებს ეს არ მოსწონთ. ამიტომ, Yahoo CSS Reset-ის შემთხვევაში, თუ თქვენ გჭირდებათ გასწორება ცენტრში და არ დატოვეთ ამ თვისებებში: წარწერა, th (ტექსტის გასწორება: მარცხნივ;), მაშინ თავისუფლად დაწერეთ საკვანძო სიტყვის ცენტრი.

ჩემთვის მე ვიყენებ ჩემს CSS გადატვირთვას, რომელიც მოიცავს ძირითადი ზოგადი შაბლონის წესებს და ჩემს კორექტირებას.

ამით მთავრდება სტატია. მადლობელი ვიქნები, თუ დააფასებთ ჩემს შრომას და ასევე შეუერთდებით ჩემი აბონენტების რიგებს. არ დაგავიწყდეთ ჩემი ბლოგის ბმული თქვენს მეგობრებსა და კოლეგებს გაუზიაროთ. Წარმატებები!

Ნახვამდის!

პატივისცემით, რომან ჩუეშოვი

წაიკითხეთ: 114 ჯერ

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

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

ვებსაიტისთვის არასაჭირო CSS სტილის პოვნის ვარიანტები

styles ფაილის (მისი შიგთავსი - ძველი წავშალე და ახალი ჩავდე, რის შემდეგაც Filezilla-ს მეშვეობით შევინახე ცვლილებები) ახლით (დაზიანებული) შეცვლამ საიტზე შესამჩნევი ცვლილებები არ გამოიწვია (ჯერ არა, ყოველ შემთხვევაში. , არ არის გამოვლენილი). მთლიანობაში, ძალიან კმაყოფილი ვარ და გირჩევთ სცადოთ. სწრაფი, მარტივი და მოსახერხებელი (და ასევე უფასო).

Წარმატებას გისურვებ! მალე შევხვდებით ბლოგის საიტის გვერდებზე

მეტი ვიდეოს ყურება შეგიძლიათ

");">

შეიძლება დაგაინტერესოთ

როგორ გავზარდოთ ვებსაიტის დატვირთვის სიჩქარე და გავაუმჯობესოთ სერვერის დატვირთვა
CSS - რა არის ეს, როგორ უკავშირდება კასკადური სტილის ფურცლები Html კოდს Style-ისა და Link-ის გამოყენებით
CSS ოპტიმიზაცია და შეკუმშვა გვერდის სიჩქარეში - როგორ გამორთოთ გარე სტილის ფაილები და გავაერთიანოთ ისინი ერთში, რომ დააჩქაროს დატვირთვა როგორ დავაკონფიგურიროთ ცხრილების, სიების და სხვა Html ელემენტების ფონის ალტერნატიული ფერი საიტზე nth-child ფსევდო კლასის გამოყენებით
რისთვის არის CSS, როგორ დავაკავშიროთ კასკადური სტილის ფურცლები Html დოკუმენტთან და ამ ენის ძირითადი სინტაქსი
სიის სტილი (ტიპი, სურათი, პოზიცია) - Css წესები Html კოდში სიების გარეგნობის მორგებისთვის
როგორ მივიღოთ სწრაფი ვებ – გვერდი - სურათების და სკრიპტების ოპტიმიზაცია (შეკუმშვა), ასევე Http მოთხოვნების რაოდენობის შემცირება

სუფთა და ორგანიზებული CSS-ის სარგებელი აშკარაა. უნაკლო CSS-ის მქონე ვებსაიტი უფრო სწრაფად იტვირთება და უფრო თვალსაჩინო იქნება ძიების შედეგებში. ვებ დეველოპერებისთვის სუფთა CSS კოდი მომავალი კლიენტებისთვის პროფესიონალიზმის აშკარა ნიშანია.

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

CSS Cleanup Tools

ProCSSor თქვენი CSS-ის გასაუმჯობესებლად

ProCSSor არის მარტივი, უპრობლემო ინსტრუმენტი თქვენი CSS-ის მყისიერად გასაუმჯობესებლად. ხელმისაწვდომია OS X-ის, iOS-ის ან ნებისმიერი ბრაუზერის საშუალებით, ინსტრუმენტი იღებს CSS ფაილს, ჩასმული ფრაგმენტს ან URL-ს და დაუყოვნებლივ ასწორებს და აჩვენებს მომავალ კოდს თქვენი CSS-ისთვის.

CSS Lint

CSS შემოწმების ინსტრუმენტი ცვლილებების ახსნით

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

ბინძური მარკირება

Dirty Markup ინსტრუმენტი აერთიანებს რამდენიმე სხვადასხვა ტექნოლოგიას

Dirty Markup-ს აქვს უნიკალური მიდგომა კოდის ოპტიმიზაციის მიმართ; ის მუშაობს მაშინ, როდესაც ველი ივსება კოდით და აერთიანებს რამდენიმე განსხვავებულ ტექნოლოგიას: HTML Tidy, JavaScript, Ace Editor და აკეთებს კოდების სრულყოფილ წმენდას. ის მუშაობს ისევე, როგორც CSS, როგორიცაა JavaScript ან სტანდარტული HTML.

CleanCSS

CleanCSS ინსტრუმენტი ასრულებს CSS ოპტიმიზაციას

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

კოდის გამალამაზებელი

Code Beautifier მარტივი CSS გასუფთავების ინსტრუმენტი

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

Spritemapper

Spritemapper წარმოქმნის sprites-ს, აერთიანებს მრავალ სურათს CSS სტილის ფურცელში

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

ზედა ქურთუკი

Topcoat არ არის ტრადიციული CSS დასუფთავების ინსტრუმენტი

Topcoat არ არის ტრადიციული CSS დასუფთავების ინსტრუმენტი; ეს არსებითად არის CSS განვითარების ნაკრები, სუფთა CSS კურაციის მიდგომა. თუ თქვენ გაქვთ კარგად დაწერილი CSS, ალბათ არასდროს დაგჭირდებათ CSS კოდის გასუფთავება.

CSSTidy ინსტრუმენტი მუშაობს Windows, Mac ან Linux პლატფორმებზე.

CSSTidy მსგავსია მრავალი CSS დასუფთავების ხელსაწყოს, მაგრამ ეს გთავაზობთ რამდენიმე უნიკალურ ატრიბუტს. CSSTidy შეიძლება გამოიძახოთ ბრძანების ხაზის ან PHP-ის გამოყენებით და ის მუშაობს Windows, Mac ან Linux პლატფორმებზე. CSSTidy-cleanup ინსტრუმენტი შეიძლება იდეალურად მოერგოს თქვენს არსებულ სამუშაო პროცესს და შეინარჩუნოს თქვენი CSS სუფთა ხაზგარეშე. W3C Valdiator CSS კოდის ვალიდაციის ინსტრუმენტი

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

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

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

ლინტი ჩვენთვის ყველაფერია

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

პირველი, რის გაკეთებასაც მიჩვეული ვარ, როცა კოდის ბაზის გაგება მჭირდება, არის ლინტინგი. Linting არის პროგრამის შესრულების პროცესი პოტენციური შეცდომებისა და ცუდი პრაქტიკის მოსაძებნად. მე მჯერა, რომ კოდის სისუფთავის შენარჩუნებით ჩვენ პირველ ნაბიჯს ვდგამთ კარგი კოდისკენ. სიტყვა linting-ის ეტიმოლოგია შეგიძლიათ იხილოთ ამ თემაში StackOverflow-ზე.

Sass-ს აქვს რუბიში დაწერილი ლინტერი, რომელსაც ეწოდება SCSS-lint. შეგიძლიათ თავად დააყენოთ ან ჩამოტვირთოთ Sass-Guidelines-ის მიერ რეკომენდებული კონფიგურაცია, რომ დაუყოვნებლივ დაიწყოთ. ასევე Node.js-ს აქვს sass-lint, ისინი არ არიან 100% თავსებადი და შეიძლება განსხვავებულად იმუშაონ.

სცადეთ გაუშვათ SCSS-Lint თქვენს Sass ფაილების დირექტორიაში, რათა შეამოწმოთ შეცდომები. ძალიან დიდია შანსი, რომ ტონა შეცდომა დაგემართოს. როგორც წესი, ამის შემდეგ გსურთ შეწყვიტოთ ექსპერიმენტები კოდის გასუფთავებასთან დაკავშირებით. Იყავი მომთმენი. ამ ეტაპზე, შეგიძლიათ სცადოთ კონფიგურაცია ნაკლებად შემზღუდველი გახადოთ თქვენთვის უმნიშვნელოვანეს წესებთან დაკავშირებით (როგორიცაა ფერის ფორმატი) ან აიღოთ ხარი რქებით და გამოიყენოთ ლაქების სრული ძალა.

აღმოჩენილი შეცდომების გასწორება

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

დავუშვათ, რომ გსურთ დაამატოთ დაკარგული ნული ყველა მცურავი წერტილის რიცხვში (ანუ 0-დან 1-მდე), ამ ტიპის შეცდომები დაფიქსირებულია LeadingZero წესის გამოყენებით SCSS-lint-ში. ამისათვის გამოიყენეთ რეგულარული გამოთქმა \s+\.(\d+) საძიებლად (ყველა რიცხვი, რომელიც მიჰყვება წერტილს), ხოლო შესაცვლელად \0.$1 (ფართი, ნული, წერტილი და ნაპოვნი რიცხვი). და თუ თქვენ გაწუხებთ BorderZero linter წესი, მაშინ შეგიძლიათ შეცვალოთ ყველა საზღვარი: none წესები საზღვრით: 0 თქვენს რედაქტორში ძიების/ჩანაცვლების გამოყენებით. ტორტივით მარტივი!

მე ახლახან შევქმენი scss-lint-regex საცავი GitHub-ზე, რათა შევაგროვო ყველა რეგულარული გამონათქვამი ერთ ადგილას. აუცილებლად შეხედეთ მას, თუ დიდ პროექტში ლინგირების პრობლემა გაქვთ. და ფრთხილად იყავით პოვნა/ჩანაცვლებასთან დაკავშირებით, მას ზოგჯერ შეიძლება ჰქონდეს მოულოდნელი გვერდითი მოვლენები. ყოველი ცვლილების შემდეგ გაუშვით git diff, რათა დაადგინოთ რა შეიცვალა, ეს უზრუნველყოფს თქვენს კოდს შეცდომების დამატებას.

მას შემდეგ რაც დაასრულებთ ძიების/ჩანაცვლების რედაქტირებას, ვერ აიცილებთ ხელით რედაქტირებას იმ ადგილებში, რომლებიც გაუმჯობესებას საჭიროებს (არასწორი შეწევა, გამოტოვებული ან ძალიან ბევრი ცარიელი ხაზი, გამოტოვებული სივრცეები და ა.შ.). ამას დიდი დრო სჭირდება, მაგრამ ძალიან დაგეხმარება შემდეგ ეტაპზე, ამიტომ მნიშვნელოვანია ამის გაკეთება წინსვლამდე.

მთარგმნელის შენიშვნა

ზოგიერთი რამ შეიძლება გაკეთდეს SassBeautify დანამატების გამოყენებით ტექსტურ რედაქტორებში, როგორიცაა sublime ან atom.

პროექტის სტრუქტურის მიმოხილვა

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

პროექტის მეთოდოლოგიის არჩევა არც ისე მნიშვნელოვანია, მთავარია გქონდეთ და დისკომფორტი არ შეგიქმნათ. ეს შეიძლება იყოს SMACSS, 7-1 ან ITCSS - არჩევანი თქვენზეა. სცადეთ თქვენი კოდის რესტრუქტურიზაცია არჩეული მეთოდოლოგიის მიხედვით. მე ჩვეულებრივ გამოვიყენებ 7-1 შაბლონს, რომელიც ჩვენ შევიმუშავეთ Sass-ის სახელმძღვანელოში, ამიტომ მოგცემთ რამდენიმე რჩევას, რომელიც დაგეხმარებათ, თუ აირჩევთ ამ მარშრუტს.

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

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

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

როგორც სწორი და მცირე კომპონენტის მაგალითი, შემიძლია შემდეგი მოვიყვანო:

ციტატა ( padding: 10px; ) .quote__attribution ( შრიფტის ზომა: 80%; ) .quote > :first-child ( margin-top: 0; ) .quote > :last-child ( margin-bottom: 0; )

შეეცადეთ იფიქროთ მოდულებში. Ნაკლები. უფრო ადვილია. უფრო დამოუკიდებელი.

არასაჭირო მოცილება

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

უკვე 3 წელი გავიდა, მაგრამ ნიკოლას გალაჰერის ეს ტვიტირჩება ჩემი საყვარელი CSS კითხვა:

გაუქმება არის CSS-ის ნამდვილი ჭირი. სტილის წერისას, ჩვენ ხშირად მივდივართ წინ და უკან, ვცდილობთ ახალ წესებს - ჩვეულებრივ, რამდენიმე სრულიად არასაჭირო დეკლარაციას ვიღებთ. მაგალითად, overflow: hidden, რომელიც აღარ არის საჭირო, ან font-size, რომელიც არ ცვლის შრიფტის ზომას. მათი დატოვებით ვზრდით ტექნიკურ ვალს. ამაში კარგი არაფერია.

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

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

მშობელი (/* ...აქ ნივთები... */ ) .child-A (ფერი: წითელი;) .child-B (ფერი: წითელი;)

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

CSS ჭკვიანია და თქვენც ისეთივე ჭკვიანი უნდა იყოთ

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

A (ფერი: შავი; /* არა */)

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

CSS-ს აქვს ჩაშენებული გზა ამ პრობლემის გადასაჭრელად, მემკვიდრეობის მნიშვნელობა:

A (ფერი: მემკვიდრეობით; /* დიახ! */)

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

სიაში ბოლო, მაგრამ არანაკლებ მნიშვნელოვანი მნიშვნელობა არის currentcolor, ბევრმა დეველოპერმა არ იცის ამის შესახებ. თუ თქვენ ერთ-ერთი მათგანი ხართ, არ ინერვიულოთ, უბრალოდ ჰკითხეთ საკუთარ თავს: "თუ თქვენ არ დააყენეთ ელემენტების საზღვრის ფერი, მაშინ რატომ ემთხვევა ის ავტომატურად ელემენტის შრიფტის ფერს?" დიახ, ეს იმიტომ ხდება, რომ ნაგულისხმევად, საზღვრის ფერის თვისება დაყენებულია currentcolor-ზე (სპეციფიკაცია). გეთანხმები, სახელიდან ყველაფერი აშკარაა.

ჩემი აზრით, თუ გსურთ გამოიყენოთ ელემენტის შრიფტის ფერი, ფიქსირებული მნიშვნელობის ან Sass ცვლადის ნაცვლად უნდა გამოიყენოთ currentcolor.

ელემენტი (ფერი: ღრმა ვარდისფერი; საზღვრები: 1px მყარი; /* ფერი არის ნაგულისხმევი `მიმდინარე ფერი“ */ ) .element svg (შევსება: მიმდინარე ფერი; /* შევსების ფერი იგივე იქნება, რაც ტექსტი */ )

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

თქვენი Git კარგად უნდა იყოს

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

ამიტომ, გირჩევთ, გულმოდგინედ იმუშაოთ თქვენი ვერსიის კონტროლის სისტემასთან (ლოგიკურია ვივარაუდოთ, რომ Git ასრულებს ამ როლს). ეს ნიშნავს, რომ ყველა ვალდებულება აკეთებს ერთ რამეს - უზრუნველყოს, რომ კოდიდან ერთი ნაბიჯით უკან დაბრუნდი შეცდომით, კონფლიქტების გარეშე.

მე ვიცი, რომ ბევრი ადამიანი მიიჩნევს, რომ Git რთული და ძნელად გასაგებია და მისი ადვილად სწავლის გზები სცილდება ამ სტატიის ფარგლებს. მერწმუნეთ: თქვენი Git ისტორია ლექსის მსგავსი უნდა იყოს, თუ არ გსურთ თქვენი ტვინი ადუღდეს.

დასკვნა

ასე რომ, მე მოკლედ ჩამოვაყალიბებ სტატიის მთავარ პუნქტებს მათთვის, ვისაც ძალიან ეზარება მთელი ტექსტის წაკითხვა:

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

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

შემდეგ ააწყვეთ თქვენი პროექტი არჩეული მეთოდოლოგიის მიხედვით. არ აქვს მნიშვნელობა რომელს აირჩევთ, მნიშვნელოვანია, რომ მიჰყვეთ მას. თუ თქვენს პროექტს არ აქვს ძალიან ბევრი კომპონენტი, მაშინ სტრუქტურირება კარგი დასაწყისია. იპოვეთ ინტერფეისის მრავალჯერადი გამოყენებადი ნაწილები და გადაიტანეთ მათი სტილები ცალკეულ ფაილებში. თავისუფლად დაწერეთ დოკუმენტაცია, ეს გაამარტივებს პროცესს და იგრძნობთ, რომ წინ მიიწევთ.

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

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

ბოლოს და ბოლოს, არ დაგავიწყდეთ აღნიშვნა, როცა ყველაფერი დამთავრდება. Წარმატებები!