CSS Geliştiricileri Ne Yapar ve Neden Birine İhtiyacınız Var?

CSS geliştiricileri, birincil sorumluluğu ziyaretçinin tarayıcısına gösterişli ve tarz bir ürün sunmak olan web uzmanlarıdır. Pratik olarak her web sitesi CSS kullanır, ancak CSS genellikle modern web geliştirme yığınında “eşit” olarak kabul edilmez. Ne yazık ki, bu yanlış algılama, CSS'nin hafife alınmasına veya hatta bir dereceye kadar gözden kaçırılmasına neden olabilir.

CSS olmayan geliştiricilerin CSS ile uğraşmasına izin vermek, genellikle kodunuza CSS korsanları ve hataları girmesine neden olur ve geliştiriciler için gereksiz hayal kırıklığına neden olabilir. Bu makalede, her sitenin neden güvenilir, profesyonel bir CSS geliştiricisine ihtiyaç duyduğunu daha iyi anlayabilmeniz için işin neleri kapsadığını herkese tanıtmak istiyorum.

CSS Geliştiricileri Ne Yapar?

Temel bilgilerle başlayalım. CSS neden bu kadar önemli ve CSS geliştiricilerinin tam olarak ne yapması gerekiyor?

CSS belirli bir dildir ve bu nedenle kendi başına var olamaz. Anlamlı olması için HTML gerektirir. Bu nedenle, CSS geliştiricilerinin yaptığı ilk şey HTML kodu yazmaktır.

Düzenli HTML Yazmak Her Zaman Önemlidir

Basit, temiz ve yeterince organize edilmiş HTML yazmak büyük bir sorumluluktur çünkü mütevazı HTML belgesi, son kullanıcılarınıza teslim ettiğiniz ilk şeydir.

Üretime hazır bir HTML belgesi yazıyorsanız, web sitenizden en iyi şekilde yararlanmak için tüm gerekli ve isteğe bağlı etiketleri belgenin başlığına eklediğinizden emin olmalısınız. Doğru doctype, dil, meta etiketleri, favicon'ları, yükleme tekniklerini ve SEO'yu ayarlamaktan bahsediyorum.

Web sitenizi daha performanslı, daha erişilebilir hale getirmeye ve diğer hizmet ve araçların yanı sıra hedef kitlenize ve arama motorlarına daha fazla maruz kalma sağlamaya yardımcı olabilecek her şey. HTML belgesinin gövdesi de şişirilmemelidir. Semantik HTML etiketlerinin ne zaman kullanılacağını, gerekli HTML niteliklerinin nasıl ekleneceğini ve derin yuvalama veya bölünmeden nasıl kaçınılacağını bilmek göz ardı edilmemeli, bunun yerine projenin en başından uygulanmalıdır. Hiçbir profesyonel geliştirici, projenin yarısında en iyi uygulamaları izlemeye başlamaz, ancak HTML gibi görünüşte temel şeyler bile sıklıkla yanlış yapılır.

Genel tasarım, genellikle çeşitli HTML bileşenlerini nasıl düzenlediğimizi belirler. CSS geliştiricileri tasarımcılarla yakın çalışır ve her tasarımcı tasarımı sağlamak için aynı aracı kullanmaz. Sketch, Photoshop, InVision veya Figma'ya aşina olmak ve tasarımı "dilimleyebilmek" CSS geliştiricileri için olmazsa olmaz becerilerdir. Tasarımın aynı anda uygulanmasını mümkün kılmak için bir bileşenin nasıl yapılandırılacağı her zaman akılda tutulmalıdır. BEM veya OOCSS gibi iyi bir adlandırma kuralı kullanmak, şişirilmiş HTML veya sürdürülemez CSS kodu yazmayı önlemelidir.

JavaScript Her Yerde

Modeller veya araç ipuçları gibi bazı bileşenler etkileşimli olmalıdır. Bu genellikle JavaScript'i iyi kavramayı gerektirir, "derin" JavaScript'i değil, JavaScript olaylarını ve DOM işlemeyi gerektirir. Kullanıcınızın kaynaklarını tüketmek ve web sitenizi ağırlaştırmak veya daha da kötüsü, çökmesini ve tamamen tepkisiz hale getirmek istemediğiniz için DOM yönetimi zor olabilir.

JavaScript dünyası hızla gelişiyor ve bazen her gün yeni çerçeveler ve araçlar ortaya çıkıyor gibi görünüyor. JavaScript'in muazzam popülaritesi nedeniyle, en son en iyi uygulamaları kullanmak ve son kullanıcılara en keyifli deneyimi sunmak istiyorsanız döngüde kalmak çok önemlidir.

CSS

Çoğu kişi JavaScript ile neredeyse aynı hızda gelişmediğini iddia etse de, bu CSS için de geçerlidir. Ancak, CSS değişkenleri, CSS ızgarası ve hatta Flexbox gibi yeni özelliklerde ustalaşmak için biraz zaman gerekir.

Ardından, bugün bile sorun oluşturabilecek tarayıcı desteği var. Siteniz modern bir tarayıcıda bir milyon dolar gibi görünebilir, ancak eski tarayıcılarda çok fazla değil. Flexbox, IE11'de desteklenebilir, ancak yine de beklendiği gibi çalışmayabilir. Bu sorunlardan nasıl kaçınılacağını bilmek, bir CSS geliştiricisinin işinin bir parçasıdır.

Neyse ki topluluk çok yardımcı oluyor ve Flexbugs veya Gridbugs gibi siteler çok zaman kazandırabilir.

CSS Araçları, Teknikleri ve İlkeleri

Bazen güvenilir kod sunmamıza yardımcı olması için görev yürütücüler veya Grunt, Gulp ve web paketi gibi paketleyiciler gibi araçlara güvenebiliriz. Kodu aktarmak için kodunuzu linterler, küçültücüler, babel veya PostCSS ile güçlendirebilirsiniz.

Ardından, CSS geliştiricilerinin günlük görevlerinin bir parçası olan çeşitli yazı tiplerini, tipografiyi, resimleri, simgeleri, simge yazı tiplerini, animasyonları, geçişleri ve diğer soyut yönleri dikkate almamız gerekir. Her bir özelliğin kendine has özelliği, sınırlamaları, sorunları ve çözümleri vardır. Ne kadar çok özellik ve teknikte uzmanlaşırsanız, projenizdeki bileşenleri tasarlamak ve uygulamak o kadar kolay olur.

Önemli sayıda CSS özelliği ve değeri vardır ve her şey bilinemez. Neyse ki araçlarımız, özellikle kod editörleri ve geliştirme araçları olmak üzere bu konuda bize yardımcı oluyor. Ancak, bir z-endeksi sorununu çözmeniz gerektiğinde araçlar bile baş ağrılarını çözmeye yardımcı olamaz. Başarısız olmak, öğrenmenin en iyi yoludur.

Bunun özellikle CSS ile çalışırken doğru olduğunu söyleyebilirim ve bu yüzden:

Z-endeksi sorununu çözmeyi hiç denemediyseniz, yığın bağlamını asla öğrenemezsiniz. Bootstrap sınıfını geçersiz kılmayı hiç denemediyseniz, o zaman özgüllüğü asla öğrenemezsiniz. Şamandıra sorununu çözmeyi hiç denemediyseniz, kutu modelini asla öğrenemezsiniz.

Bazen çözüm basittir, ancak sadece bir soru sormak zordur. Diğer dillerle karşılaştırıldığında benim döngümün neden çalışmadığını soramazsınız. Sorunu CSS'de çözmek için tam bağlama ihtiyacınız var ve bu çoğu kişinin anlamadığı bir şeydir: cascade .

Cascade, CSS'deki en iyi özelliktir ve size karşı değil, sizin için çalışmalıdır. Bazı geliştiriciler, CSS-in-JS gibi özel yaklaşımlar icat ederek bu sorunu çözerler. CSS'nizi React gibi kapsüllenmiş bir ortamda paketlerseniz, başka bir yerde kullanamazsınız. Ölçeklenebilir platformunuzda istediğiniz yaklaşımın bu olduğundan şüpheliyim. Çağlayanla ilgili sorunlarınız varsa, onu kucaklamayı öğrenin ve sonra onu nasıl evcilleştireceğinizi öğrenin.

Ben bu makaleyi hazırlarken Max Bock CSS zihniyeti hakkında yazmıştı ve CSS geliştiricilerinin tam olarak yapması gereken de bu. CSS geliştiricileri, kutunun içinde düşünür, içerik değişikliklerini tahmin eder ve varsayılan değerleri ve bağlamı geçersiz kılmadan mümkün olduğunca az kod yazmaya çalışırken mümkün olduğunda sabit sayılardan kaçınır.

Neden Bir CSS Geliştiricisine İhtiyacınız Var?

Çoğu ön uç ve hatta tam yığın geliştirici CSS kodunu yazabilir. Ancak bunların her biri, HTML kodunu karıştırmadan veya gerekli olmadığında JavaScript'e güvenmeden her CSS hatasını düzeltemez veya tasarımı uygulayamaz.

Profesyonel bir CSS geliştiricisi, kodu son ayrıntılarına kadar önemser, düzenler ve bileşenler, hatta en karmaşık olanlar bile oluşturmaktan hoşlanır ve her sorunu veya hatayı nasıl çözeceğini bilir.

CSS Kodlama Standartları

Herhangi bir kod yazmadan önce, kod yazmayla ilgili bazı temel kurallara sahip olmak genellikle iyi bir fikirdir. CSS geliştiricileri, kodlama standardına uymalıdır; bu, projenin sürdürülebilirliği ve ölçeklenebilirliği için gereklidir.

Proje boyunca hangi adlandırma kuralının kullanılacağını seçin. Erken bir adlandırma kuralı oluşturmak, geliştiricilerin daha iyi ve daha organize kod üretmesine yardımcı olabilir. Ayrıca, projeye dahil olan herkesin, yalnızca HTML kodunu okuyarak bileşen yapısını ve bileşenler ile öğeler arasındaki ilişkiyi anlamasına yardımcı olabilir.

Girinti, seçici türleri, steno özellikleri, CSS'deki birimlerin nasıl ele alınacağına karar verin. Örneğin, kodlama standardı rem birimlerinin kullanımını öneriyorsa piksel birimlerini kullanmaktan kaçının. Herkesin kendine özgü bir yazma/kodlama stili vardır, ancak bir profesyonel olarak her kavramı benimseyebilmeniz ve daha da önemlisi her kavramı anlayabilmeniz gerekir.

CSS Tasarım Uygulaması

Tasarımı koda dönüştürmeden önce her sayfayı, düzeni ve bileşeni anlamak için zaman ayırmalısınız. Mümkünse, her sayfayı inceleyin, sayfaların ve bileşenlerin bir listesini oluşturun ve bir desen bulmaya çalışın.

Daha fazla sayfada bulunan bir bileşen fark ederseniz, etrafındaki ortamı tanımalı ve onu bağımsız bir bileşen olarak düşünmeye çalışmalısınız. Kartlar veya listeler gibi benzer bileşenler varsa, aynı bileşenin bir varyasyonuna sahip olabilirsiniz. Bu şekilde, HTML kodunu yeniden kullanabilir ve değiştirilmiş görünmesi için yalnızca biraz CSS kodu yazabilirsiniz.

Tipografi ve aralık gibi diğer alanlarda da desenler bulmaya çalışmak iyi bir fikirdir. Bazen bu, tek tek sayfalar yerine tüm projede kullanılabilecek yardımcı sınıflara yol açar.

CSS Kodunuzu Düzenleyin

CSS geliştiricileri, kodlarını düzenlemeli ve herkes için anlamlı bir yapı oluşturmalıdır. CSS işlemcileri gibi araçları kullanırken, CSS geliştiricileri derlenmiş kodu oluşturma sürecini belgelemelidir.

Gerekirse, CSS geliştiricileri stil kılavuzları oluşturabilir. Stil kılavuzları, yeni sayfalar oluştururken veya mevcut sayfalara nasıl yaklaşılacağına karar verirken referans olabilir. Benim tavsiyem, stil kılavuzunu tüm ekip için küresel olarak erişilebilir kılmaktır çünkü görsel bir bağlam olduğunda karar vermek genellikle çok daha kolaydır. Stil kılavuzları renk paletleri, tipografi kuralları, kodlama standartları ve hatta statik sayfalar içerebilir. Bütçe ve hayal gücünüz dışında sınır yoktur.

Üretimde CSS Kodu

CSS kodu yazmak, tarayıcılar arası sorunları, hataları, animasyonları, geçişleri, duyarlılığı ve baskı stillerini ele almayı gerektirir. Bu özelliklerin çoğu, çok yönlü geliştiriciler tarafından kolayca yönetilemez. O kadar ileri gider ve bunların genel olarak en az sevilen CSS görevleri olduğunu ve her geliştiricinin bunlarla nasıl başa çıkacağını bilmediğini söylerdim. Öte yandan, uzman CSS geliştiricileri, her hata, tarayıcı ve ortam göz önünde bulundurularak nasıl kod üretileceğini bilir (veya en azından bilmelidir).

Modern yaklaşımları kullanmak bir yoldur, ancak eski tarayıcıları desteklemek ve azaltılmış hareketler gibi kullanıcı ayarlarına saygı duymak da göz ardı edilmemelidir.

CSS geliştiricileri de HTML ve JavaScript kodu yazar. Bu, varlık tesliminin CSS geliştiricisinin sorumluluğunda olduğu anlamına gelir. CSS geliştiricileri, yazı tiplerini yüklemekten, Kritik CSS'yi çıkarmaktan, ertelenmiş ve zaman uyumsuz JavaScript yüklemesini kullanmaktan ve duyarlı görüntüler sağlamaktan sorumlu olmalıdır.

Bu tekniklerin hiçbirinin uygulanması kolay değildir ve gümüş kurşun yoktur.

CSS Geliştiricileri Sizin İçin Neler Yapabilir?

Yukarıdakilerin tümü neden özel bir CSS geliştiricisine ihtiyacınız olduğunu açıklıyor. İşte ele aldıkları önemli şeylerden sadece birkaçı:

• Her proje üyesinin kodlama standardına bağlı kalmasını sağlayın
• Tasarım uygulayın
• Kodu düzenleyin
• kodu yaz
• Hataları düzelt
• Yeni teknikler hakkında bilgi edinin
• Kodu geliştirin

Toplama

Çok uzun bir süre boyunca, CSS geliştiricilerinin rolünün varlığı ve önemi sorusu, özellikle yapıcı ve iyi niyetli olmayan tartışmaları teşvik etti. CSS geliştiricisini bir kez ve herkes için uygun bir rol olarak kabul etmeye ve kabul etmeye çalışalım.

Chris Coyier, The Great Divide adlı makalesinde bazı teknoloji liderlerinden alıntı yapıyor ve çoğu, bir bölünme olması gerektiği konusunda hemfikir, modern JavaScript çerçevelerinin bilgisini gerektirmeyen CSS tabanlı bir rol olmalı. "Yalnızca CSS" den fazlasını biliyorsanız yardımcı olabilir, ancak rol mevcut olmalıdır ve JavaScript tabanlı rollere eşit olarak kabul edilmelidir.

Ne de olsa, ürününüzü mükemmel bir şekilde cilalayabilecek uzman bir profesyonelin ellerine mi bırakmak istiyorsunuz yoksa yeterince iyiye mi razı olacaksınız?

Toptal Mühendislik Blogunda Daha Fazla Okuma:

• CSS'de SVG Animasyonlarına Nasıl Yaklaşılır?