Დაჯგუფება მრავალი CSS სელექტორები

ჯგუფი მრავალჯერადი CSS სელექტორები გაუმჯობესება დატვირთვის სიჩქარე

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

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

დაჯგუფება სელექტორები

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

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

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

როგორ ჯგუფი CSS სელექციონერები

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

div, p {ფერადი: # f00; }

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

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

p.red, #sub {color: # f00; }

ასე რომ, ეს სტილი ვრცელდება ნებისმიერ პუნქტთან "წითელი" კლასის მახასიათებლისა და ნებისმიერი ელემენტის (რადგან არ განვმარტავთ რა სახის), რომელსაც აქვს "ქვე" -ს ID ატრიბუტი.

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

p, .red, #sub, div: ბმული {ფერადი: # f00; }

ასე რომ, ეს CSS წესი ვრცელდება შემდეგნაირად:

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

ეს ბოლო სელექტორია არის რთული შერჩევა. თქვენ ხედავთ, რომ ეს ადვილად შერწყმულია სხვა სელექტორებთან ამ CSS წესით. ამ წესით, ჩვენ ვამზადებთ # f00- ს (ეს არის წითელი) ამ 4 სელექტორზე, რომელიც სასურველია 4 ცალკე სელექტორის დაწერისთვის, რათა მივაღწიოთ იმავე შედეგს.

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

ნებისმიერი შერჩევა შეიძლება დაჯგუფდეს

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

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

th, td, p.red, div # პირველი {ფერი: წითელი; }

ან შეგიძლიათ სიის სიას ინდივიდუალურ ხაზებზე სიცხადე:

ე,
td,
p.red,
div # firstred
{
ფერი: წითელი;
}

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

ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 5/8/17.