რატომ არის მარტივი მძიმით გამარტივდა კოდირება
CSS ან Cascading Style Sheets, არის ვებ დიზაინი ინდუსტრიის მიღებული გზა დაამატოთ ვიზუალური სტილის საიტი. CSS- ის საშუალებით შეგიძლიათ გააკონტროლოთ გვერდის განლაგება, ფერები, ტიპოგრაფია , ფონის სურათი და მრავალი სხვა. ძირითადად, თუ ეს ვიზუალური სტილია, მაშინ CSS არის გზა, რათა ამ სტილის თქვენს საიტზე.
დოკუმენტში CSS სტილის დამატება, შეგიძლიათ შეამჩნიოთ, რომ დოკუმენტი უფრო და უფრო გრძელდება. მაშინაც კი, პატარა საიტი მხოლოდ მუჭა გვერდები შეიძლება დასრულდეს ერთად მნიშვნელოვანი CSS ფაილი - და ძალიან დიდი საიტი უამრავი და უამრავი გვერდებზე უნიკალური შინაარსი შეიძლება ჰქონდეს ძალიან დიდი CSS ფაილი. ეს ღრუბელია, რომელსაც აქვს უამრავი მედია შეკითხვა, რომელიც შედის სტილების ფურცლების შესაცვლელად, თუ როგორ გამოიყურება ვიზუალური და გვერდი სხვადასხვა ეკრანებისთვის.
დიახ, CSS ფაილი შეიძლება მიიღოს ხანგრძლივი. ეს არ არის მთავარი პრობლემა, როდესაც საქმე საიტი შესრულებასა და სიჩქარეზეა გადმოტვირთული, რადგან ხანგრძლივი CSS ფაილიც საკმაოდ მცირეა (რადგან ეს მხოლოდ ტექსტური დოკუმენტია). მიუხედავად ამისა, ყველა ცოტა მიუთითებს, როდესაც საქმე ეხება გვერდზე სიჩქარე, ასე რომ, თუ შეგიძლიათ თქვენი სტილი ფურცელი leaner, ეს არის კარგი იდეა. ეს არის სადაც "მძიმით" შეიძლება ძალიან მოსახერხებელი მოდის თქვენი სტილის ფურცელში!
მძიმები და CSS
ალბათ გაინტერესებთ, რა როლი მძიმით თამაშობს CSS selector სინტაქსში. როგორც სასჯელში, მძიმით გამოირჩევა გამჭვირვალე და არა კოდირება. კომბინაცია CSS selector ჰყოფს მრავალი სელექტორები ფარგლებში იმავე სტილის.
მაგალითად, მოდით შევხედოთ ზოგიერთი CSS ქვემოთ.
ე {ფერი: წითელი; }
td {ფერი: წითელი; }
p.red {ფერი: წითელი; }
div # firstred {color: red; }
ამ სინტაქსის მიხედვით, თქვენ გნებავთ, რომ გსურთ t ტეგები, td tags, პარაგრაფის tags კლასის წითელი, და div tag ერთად ID უძღოდა ყველა აქვს სტილი ფერი წითელი.
ეს არის იდეალურად მისაღები CSS, მაგრამ არსებობს ორი მნიშვნელოვანი ნაკლოვანებები, რომ ეს ასეა:
- მომავალში, თუ თქვენ გადაწყვეტთ შეცვალოთ შრიფტის ფერის ამ თვისებების ლურჯი, თქვენ უნდა გააკეთოთ ეს ცვლილება ოთხჯერ თქვენს სტილში.
- იგი დასძენს ბევრი დამატებითი სიმბოლოების თქვენი სტილის ფურცელი, რომ თქვენ არ გჭირდებათ. ეს 4 სტილი შეიძლება არ გამოიყურებოდეს, როგორც ზედმეტი, მაგრამ თუ თქვენ აკეთებთ ამას მთელი სტილი ფურცელი, ხაზები დაამატებთ და ფურცელი იქნება ბევრად უფრო დიდი, ვიდრე ეს უნდა იყოს.
იმისათვის, რომ თავიდან იქნას აცილებული ეს ნაკლოვანებები და თქვენი CSS ფაილის გამარტივება, ჩვენ ვცდილობთ გამოყენებით გნებავს.
გამოიყენეთ მეთაურები ცალკეული სელექციონერებისათვის
ნაცვლად 4 ცალკე CSS სელექტორები და 4 წესები, შეგიძლიათ დააკავშიროთ ყველა ეს სტილის ერთ წესს ქონების მიერ ჰყოფს ინდივიდუალური სელექტორები ერთად მძიმით. აი, როგორ მოხდება ეს:
th, td, p.red, div # პირველი {ფერი: წითელი; }
კომბინირებული ხასიათი ძირითადად "სიტყვა" და "შიგნით" შეარჩევს. ასე რომ, ეს ეხება t თ ტეგები და td tags და პარაგრაფის tags ერთად კლასის წითელი და div tag ერთად ID ითამაშა. ეს არის ის, რაც ჩვენ გვქონდა ადრე, მაგრამ ნაცვლად 4 CSS წესები, ჩვენ გვაქვს ერთი წესი მრავალი სელექტორები. ეს არის ის, რაც კომას აკეთებს სელექციონერში, ის საშუალებას გვაძლევს მრავალჯერადად შევარჩიოთ ერთ-ერთი წესი.
არა მარტო ეს მიდგომა მიიღოს ამისთვის leaner, სუფთა CSS ფაილი, ის ასევე იღებს მომავალი განახლებები იმდენად ადვილია. ახლა თუ უნდოდა შეცვალოთ ფერი წითელიდან ლურჯიდან, თქვენ უნდა გააკეთოთ მხოლოდ ერთ ადგილას ცვლილება ორიგინალური 4 სტილის წესების ნაცვლად! დაფიქრდით ამ დროის დაზოგვა მთელ CSS- ში და ხედავთ, თუ როგორ დაგიზოგავთ ეს რამდენჯერმე და სივრცეში გრძელი რანგში!
სინტაქსი ვარიაცია
ზოგიერთი ადამიანი აირჩიოს, რათა CSS უფრო ნათლად მიერ ჰყოფს თითოეული selector საკუთარი ხაზი, ნაცვლად წერილობით ეს ყველაფერი ერთ ხაზზე ზემოთ. ეს ასეა:
ე,
td,
p.red,
div # firstred
{
ფერი: წითელი;
}
გაითვალისწინეთ, რომ თითოეული მენიუს შემდეგ მძიმით შეიტანეთ და შემდეგ გამოიყენეთ "შევა" მომდევნო სელექტორის შესასვლელად საკუთარი ხაზიდან. თქვენ არ დაამატებთ მრიცხველს საბოლოო შერჩევის შემდეგ.
თქვენს მიერ შერჩეულთა შორის კომების გამოყენებით თქვენ უფრო კომპაქტურ სტილის ფურცელს შექმნით, რაც უფრო ადვილია მომავალში განახლებისთვის, რაც დღეს უფრო ადვილია წაკითხვისთვის!
ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 5/8/17