გვინდა გაგიზიაროთ ჩვენი 10 წლიანი გამოცდილება front-end ტექნოლოგიებსა და მათი მართვის მექანიზმებზე, ასევე წარმოგიდგენთ სისტემების კონკრეტულ ხარვეზებსა და Symbols-ის მიერ შემუშავებულ გადაჭრის მეთოდებს.

CSS-თან მუშაობის დროს უამრავ გამოწვევას შეიძლება შევხვდეთ დიზაინ სისტემების, სხვადასხვა გარემოებასა (browsers, devices, input sources) და განსხვავებული ბიზნეს მოთხოვნილებების გათვალისწინებისას. არსებული Framework-ების უმრავლესობა ახდენს utility class-ების აბსტრაქციას ისე, რომ მთელი CSS დანაზოგი HTML-ში გადადის. Scoping-ის პრობლემის გადასაჭრელად კი BEM იმიტომ მოისაზრება, რომ მსგავსი ტიპის ან საერთო სივრცის ელემენტებს ჰქონდეთ უნიკალური კლასი, რომელიც სტილების შეჯახებას აგვარიდებს თავიდან. შედეგად ჩნდება უამრავი ახალი ტერმინოლოგია, რომლებიც შესწავლას საჭიროებს და აბსტრაქტულობის თვალსაზრისითაც, კოდი არც თუ ისეთი მოქნილი, გარჩევადი და reusable არის. ვფიქრობთ, ეს ქაოტური პრობლემების ქაოტურივე გადაწყვეტაა.

რომ შექმნა button მარტივია, თუმცა ნამდვილი გამოწვევაა რომ გაითვალისწინო:
- ენები და წერის მიმართულება (rtl);
- სივრცისა და პროპორციის ცვლილებები;
- ინტერაქციული feedback (:hover, :focus, :disabled);
- სხვა კომპონენტებთან ჰარმონიულობა;
- სხვადასხვა ეკრანის ზომა;
- ფორმის, ზომის, ფერის ცვლილები ისე რომ არ დაიკარგოს accessibility და usability;
- reusability - მსგავსი კომპონენტების შექმნისას მისი თანამონაწილეობა. თუ ჩავთვლით მას როგორც ატომს, მაშინ გავხლიჩოთ და გამოვიყენოთ მისი შემადგენლობა სხვა მსგავსს სიტუაციებში.

მეორე მხრივ, როდესაც დიზაინ სისტემა არ ითვალისწინებს კოდის მიდგომებს, ის შეუძლებელს ხდის სისტემატიზაციას. ვფიქრობთ, რომ დიზაინ სისტემა ვერ იქნება დეფინიციის მთავარი წყარო თუ მას ორ განსხვავებულ სივრცეში აღვწერთ - დიზაინსა და კოდში. თუკი დიზაინერის ხელსაწყოები არის მასთან მუშაობის სივრცე, როგორ გავთვალოთ განსხვავებული ზომის device-ები და მით უმეტეს გამოთვლადი unit-ები (em, vw etc…) Sketch-ში, XD, ან Figma-ში?

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

მოწვევისთვის დარეგისტრირდით (https://symbo.ls/dev-signup/) და დაელოდეთ სიახლეებს. თქვენ შეგეძლებათ მისი github-ზე ნახვა, გამოყენება, ჩართვა დისკუსიებში და ჩვენთან ერთად მისი თითოეული დეტალის განხილვა.



This post has been edited by Cold-Fire on 3 Nov 2021, 09:39