BEM მეთოდოლოგია

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

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

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

• OOCSS
• SMACSS
• BEM (უფრო გასაგები getbem.com)

აქვე ორი რესურსი, (getbem.com -ზე აღმოჩენილი),  რომელიც საინტერესოდ გამოიყურება (თუმცა გამხელილი ცოდვების რიცხვიდან ჯერ თვალი არ გადამივლია) არის SUITCSS და AMCSS და მოდი აქვე ვახსენოთ ACSS ცოტა ქალური ინტუიციით გადავწყვიტე, რომ დამეწყო BEM მეთოდოლოგიით. რეალურად ეს მეთოდოლოგია უფრო მეტია ვიდრე CSS-ის ორგანიზება. როგორც მეთოდოლოგიის ერთერთი შემქმნელის ვიდეოდან ირკვევა ის უზრუნველყოფს მოდულის სრულ ინკაპსულაციას (ფაილური სისტემის დონეზე), რაც იმას ნიშნავს რომ თუ რომელიმე პროექტში გჭირდება ჩამოსაშლელი მენიუ ან სისტემაში ლოგინის ფორმა, დააკოპირებ ფოლდერს და თან გაყვება საჭირო კლასებიც, ჯავასკრიპტიც, HTML (რეალურად BEMJSON-ის სახით) და ზედ დოკუმენტაციაც მიყვება. სულ დამავიწყდა მეთქვა რომ ბემი, ქართველებისთვის ძალიან საყვარელ კომპანიაში Yandex-სში შეიქმნა, მაგრამ მოდით ნუ ვიქნებით სნობები, დავიკიდოთ მისი წარმომავლობა და რეალურად მეთოდზე გავაკეტოთ კონცენტრირება.

რა არის ბემი

როგორც ოფიციალურ საიტზე ვკითხულობთ:

BEM (Block, Element, Modifier) არის კომპონენტური მიდგომა, რომლის ძირითადი იდეაა დაყოს ინტერფეისი დამოუკიდებელ ბლოკ-ელემენტებად, რაც აასწრაფებს და გაამარტივებს დეველოპმენტს, რთული UI -სთვისაც კი და საშუალებას მოგვცემს მრავალჯერ გამოვიყენოთ არსებული ელემენტები, კოდის დუბლირების გარეშე.

კარგი იქნება, სანამ კითხვას გააგრძელებთ ბოლომდე თუ წაიკითხავთ BEM-ის ოფიციალურ დოკუმენტაციას. ბემის სრული ფილოსოფიის გასაგებად, შეგიძლიათ იმ გუნდის ერთერთ წევრს მოუსმინოთ რომელმაც ეს მეთოდოლოგია შეიმუშავა. თუმცა, მოდი დავუბრუნდეთ მოსაწყენ რეალობას. ის კონცეფცია რაზეც ვლადიმირი საუბრობს ვფიქრობ, რომ ძალიან შეზღუდულია და კონკრეტულ მოთხოვნებსაა მორგებული და ძალიან გაჭირდება მისი ადაპტირება სხვადასხვა ტექნოლოგიებთან მიმართებაში. თან მოდი აქვე ვთქვათ, რომ რეალურად უმეტესობა ჩვენგანს ალბათ მცირე მოცულობის პროექტები უფრო აინტერესებს.
როდესაც დავიწყე რეალური პროექტის აწყობა და BEM მეთოდოლოგიის მისადაგება, ვნახე რომ ბევრი რამ არ მომეწონა. გაჩნდა ბუნებრივია შეკითხვები და გადავწყვიტე მენახა რეალური საიტები, რომლებიც აღნიშნულ ტექნოლოგიას იყენებენ. ჩამონათვალში პირველივე ნიმუშს უცნაური აბრევიატურა - BEVM აქვს საიდანაც Envato-ს ჯგუფის ძალიან საინტერესო პოსტზე მოვხვდი, სადაც საუბარია, როგორ მოირგო ამ ჯგუფმა მეთოდოლოგია სათავისოთ ( Block Element Variation Modifaer). თუმცა ვისაც კითხვა გეზარებათ აქვეა ენვანტოს წარმომადგენლის, ჯორდან ლევისის ვიდეო ძალიან საინტერესო რესურსებითურთ: აქვე ერთი საინტერესო ვიდეო, რომელშიც მეთოდოლოგიის ძირითადი პრინციპების გარდა (1-დან მე-5 ვიდემოდე) საუბარია როგორ შეგვიძლია გამოვიყენოთ SASS მიქსინები ბემ კლასების აღსაწერად. ძალიან საინტერესო მიდგომა ვნახე ერთერთ საიტზე https://codefights.com/ რეალურად ეს არის BEM, ოღონდ მოდიფიკატორები პირდაპირ იწყება დეფიზით -modificators, ხოლო ელემენტებისთვისაც არ გამოიყენება სტანდარტული შეთანხმება __element, არამედ --element. აქვე საინტერესოა რომ -იწყება გლობალური კლასები, რომლებიც არც ერთ ბლოკს არ მიეკუთვნება (მაგ. -clearfix) რაც არ მომწონს ამ მიდგომაში ისაა რო რთული გასარკვევია კლასი ზოგადია და შესაძლოა ყველგან იქნას გამოყენებული თუ კონკრეტულ ბლოკს მიეკუთვნება. იმ მასალების გაცნობის შემდეგ, რომელიც პოსტში მოვიყვანე და იმ ამოცანების გათვალისწინებით რომელიც მაქვს გადასაწყვეტი, შემდეგ ფორმულირებაზე ჩამოვყალიბდე:

1. უფლებას მივცემ საკუთარ თავს ავღწერო HTML Element სელექტორები, კლასის სელექტორის გარეშე (ანუ, პირდაპირ body {...} და არა მაგ. .body ან .page როგორც ბემის საიტზეა გამოყენებული)
2. ელემენტებს გამოვყოფ ორი ქვედა ხაზით როგორც კლასიკურ BEM-შია მიღებული (Block__element)
3. მოდიფიკატორებს წინ ჩამოვაშორებ ბლოკის და ელემენტის სახელს (ნაცვლად block__element--modifirer ავღწერ პირდაპირ --modifirer)
4. და მექნება ზოგადი მოდიფიკატორები და თულები, რომლებიც დაიწყება ერთი ტირით (ნაცვლად მოდიფიკატორების ორისა): -hide, -justify-center

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