CSS, tasarımcılar için son derece güçlü bir biçimlendirme dili olabilir.
Bununla birlikte, üretilen CSS sadece kodun yaratıcısı tasarımcı tarafından takip edilen ilkeler kadar iyidir.
Herkesin CSS'yi kasıtabileceğini düşünürken, CSS yazma ve üst düzey CSS üretme arasında büyük bir fark vardır.
Doğru yolda olduğunuzdan emin olmak için, her web tasarımcısının takip etmesi gereken sekiz CSS ilkesi.
CSS'yi kodlamada zamana yatırım yapacaksanız, sadece zaman ayırmak mantıklı olacaktır. onaylamak oluşturduğunuz kod. Ancak, bu tasarımda kaç kişinin bu hayati adımı atladığını beni şaşırtmaktan asla vazgeçmiyor. Kodunuzu onaylamak, herhangi bir sorunu temizlemenize ve ziyaretçileriniz için iyi bir şekilde çalışacağından emin olmanızı sağlar.
CSS dosyanızı doğrulamaya ek olarak, HTML veya XHTML dosyalarınızı da doğrulamanız gerekir. Bu dosyaları doğrulamadan önce, doğru HTML veya XHTML DOCTYPE bildirmek için zaman ayırdığınızdan emin olun. DOCTYPE'nizi ilan etmek, sıradan bir ayrıntı gibi görünebilir, ancak tasarımla ilgili sorunlara devam eden hayal kırıklığına uğramış tasarımcılarla kaç tane tartışma yaptığımı sayabilirim. Bunun sebebi, yalnızca eski bir DOCTYPE’i beyan etmiş olmalarıdır. hiç bir DOCTYPE ilan etmemişti).
İster tek başınıza isterse de tasarımcılardan oluşan bir ekiple çalışıyor olun, yarattığınız işi belgelemek önemlidir. Bir tasarım ekibi bağlamında bunun neden önemli olacağını muhtemelen görebilirsiniz, ancak solo bir projede çalışmanın neden önemli olduğunu merak ediyor olabilirsiniz. Eh, solo projenizin sonunda bir grup projesine dönüşme şansı her zaman vardır ve eğer bu olursa, geriye dönük bir belge oluşturmak ve oluşturmaya çalışmaktan çok daha kolay. Ancak, projenizin tek bir adam gösterisi kalması durumunda bile, bir yıl boyunca bakmadığınız bir projeyi tekrar gözden geçirmeye karar verdiğinizde ne kadar yararlı belgelerin olduğuna şaşırabilirsiniz.
CSS kodu için doküman oluşturmaya geldiğinde, çoğu tasarımcının doğal dürtüleri, onu doğrudan / * ve * / arasında yerleştirerek kodlarına eklemektir. Bu listedeki ilkelerin birçoğu gibi, bu yaklaşımı almak konusunda teknik olarak yanlış bir şey yoktur. Ancak, doğrudan CSS kodunuza yorum eklemek, dosyanın boyutunu artırarak yükleme sürelerini artırabilir ve bir web sitesinin genel performansını yavaşlatabilir. Üst düzey CSS kodu yazmak konusunda ciddi iseniz, kodunuzu belgelemelisiniz, ancak ayrı bir dosyada.
Her ne kadar ayrı bir dosyada belgelemenin daha etkili olduğuna inanıyorum, ancak bu uygulamaya katılmayan birçok dosya olduğunu biliyorum. Ayrı bir dosyada belgelemeyi reddederseniz, yapabileceğiniz en iyi şey bir CSS kompresörü kullanmaktır (aslında, belgeler için ayrı bir dosya kullanmayı seçseniz bile, yine de bir CSS kompresörü kullanarak faydalanabilirsiniz). Bunu kullanabilirsiniz CSS Kompresörü CSS Drive Gallery'den veya alternatif bir CSS kompresörü bulmak için Google'da arama yapın.
Hackler CSS topluluğundaki birçok kişi için kabul edilebilir bir uygulama haline gelmesine rağmen, bu “CSS hack” lerinin takip etmeniz gereken bir prensip olduğu anlamına gelmez. Bu yaklaşımın tasarımla ilgili problemi, kasıtlı olarak sorunlara karmaşık bir çözüm aradığın anlamına gelir. Her biri bir ya da iki hack olduğunu düşünürken ve sonra kimseyi incitmeyecek olsanız da, karşılaştığınız herhangi bir problemi “kandırmak” zihniyetine girmeniz, genel tasarım anlayışınız üzerinde olumsuz bir etki yaratabilir.
Hacklerden kaçınmak, uzmanların bir süredir dağıtmakta oldukları bir tavsiyedir. 2003'e kadar geri dönüp görebiliyorsun. Peter-Paul Koch (Başarılı bir geliştirici ve yazar olan), CSS hacklerinin etkilerini bir süredir tasarımcılara uyarıyor: “Karmaşık canavar, modern Web gelişiminin tam merkezinde yeniden ortaya çıktı. Günümüzde, kendisini sonsuz bir şekilde yuvalanmış bir masa olarak değil, ama sonsuz karmaşık bir CSS hack olarak gösteriyor. ”
Div'ler yüksek düzeyde esneklik sağladığından, bunları aşırı kullanmak kolay olabilir. Aslında, bu konu tasarımcıları arasında CSS topluluğunun bu konuyu etiketlemek için kendi terimini yarattığını çok yaygın hale getirdi: divitus. Kurbanı bu duruma düşürmekten kaçınmak için, otomatik olarak bir div etiketi kullanmadan önce, işinizi sizin için tamamlayacak gerçek bir HTML etiketi olup olmadığını kendinize sorun. Örneğin, birden çok başlık divs oluşturmak yerine, neden H1 ve H2 gibi mevcut olan HTML başlık etiketlerini kullanmıyorsunuz?
Divs konusunu dikkate almaya başladığınızda, otomatik olarak yeni bir div oluşturmak yerine uygun HTML etiketini kullanmanın faydalarını hızlı bir şekilde göreceksiniz. Oluşturmak zorunda olduğunuz kod miktarını azaltmakla kalmaz, (web sitenizin yüklenme süresini kısaltarak zamandan tasarruf etmenizi sağlar), aynı zamanda kodunuzu daha mantıklı bir yapıya kavuşturur.
Yeni veya deneyimsiz bir tasarımcıya sınıflarını nasıl belirlemeye karar verdiklerini soruyorsanız, bunun gerçekten önemli olmadığını söyleyebilirler. Bu teknik olarak doğru olsa da, bu CSS sınıflarını adlandırma konusunda çok kısa bir görüş. CSS sınıf isimlerini önemsemeyen kategoriye giren tasarımcılar olmasına rağmen, sınıf adlarını düşünen tasarımcılar da var, ama aslında yanlış yaklaşımı alıyorlar.
Sizi teorik örneklerle kafanıza atmak istemediğimden, bunu somut olarak açıklayayım. Sayfanızdaki kutulardan birini kontrol etmek için bir sınıf oluşturduğunuzu varsayalım. Kutu, sayfanın alt kısmında yer alacaktır, okuyuculardan yorumlar içerecek ve ten rengi bir arka plan vermek ve dolguyu kontrol etmek için CSS kullanacaksınız. Bu .tan-box'ı (çok iyi niyetli tasarımcıların yapacağı şey) adlandırmak yerine, onu .comment-box olarak adlandırın. .Comment-box'ın .tan-box'dan daha iyi bir sınıf adı olmasının nedeni, arka plan rengini yolda maviye çevirmeye karar verirseniz (veya kutuyu sayfanın alt kısmından farklı bir alana taşımaya karar verirseniz) Bu web sitesi için CSS'yi inceleyen sizi veya başka bir tasarımcıyı karıştırmaz.
Kestirme, kendi CSS kodlarını yazmaya yeni başlayan tasarımcılar için kafa karıştırıcı olabilirken , kısa yolun stiline alıştığınızda, tasarımcı olarak takip edebileceğiniz en etkili uygulamalardan biri haline geliyor .
Shorthand kullanmanın birçok yararı vardır. Birincisi, dosyalarınızın boyutunu azaltır, bu da web sitenizin yüklenme süresini azaltır. Ek olarak, yalnızca kodunuzu düzenlemeyi kolaylaştırmakla kalmaz, aynı zamanda gelecekte kodunuzda değişiklik yapmanız gerekip gerekmediğini basitleştirir. Kestirmeye adapte olmaya başladığınızda, kodunuzu tek bir satırda yazmanın pratiğine de girmelisiniz (birden fazla hat üzerindeki beyanları yaymak yerine).
Bir tasarımcı olarak, ana akım nüfus içindeki herkesten çok daha teknik olarak eğimlisin. Çünkü, teknolojiyi yaşayan ve nefes alan bir azınlığın bir parçası olduğunuz için, çoğu insanın hiç düşünmediği bir sürü alışkanlık vardır. Örneğin, hayatınızda olabildiğince fazla “kağıt izi” ni ortadan kaldırmak için muhtemelen yolunuzdan çıkmış olabilirsiniz. Ancak, nüfusun çoğunluğunun hala işleri düzenli olarak bastığını hatırlamak önemlidir. Bir öğeyi ileride başvurmak üzere kaydetmek istediğinizde del.icio.us ile etiketlerken, ortalama İnternet kullanıcısı aynı sayfayı çıkarır.
Kullanıcılar hala internetten bilgi yazdırdığından , içerik yazıcınızı kolaylaştıracak CSS'yi kullanmak önemlidir . Ziyaretçiler, ziyaret ettikleri web sitesi için güzel bir mizanpaj oluşturmaya koyduğunuz tüm işleri takdir edecekler, ancak bu web sitesinden bir sayfa basmaya karar verdiklerinde, çıktılarının yalnızca içerdiği bilgilerin farkına vardıklarında sizi daha da memnun edeceklerdir. istedikleri metin (ve bilgisayarlarında harika görünen harika grafiklerin hiçbiri değil ama yazıcılarından bir ton mürekkep harcıyor). CSS, içeriğin yazdırıldığı zaman düzgün bir şekilde biçimlendirilmesini sağlamak için oldukça basit olduğundan, gerçek bir tasarımcının tasarım sürecinin bu adımını ihmal etmesi için bir mazeret yoktur.
Bu son prensibin klişe olduğunu düşünebilirsiniz, ancak tartışmasız listenin en önemlisi. Mümkün olan en iyi tasarımcı olmaya adanmışsanız, her zaman CSS bilginizi genişletmek için çalıştığınızdan emin olmanız gerekir . Neyse ki, CSS eğitiminize devam etme isteğiniz ve isteğiniz varsa bunu yapmak kolaydır. Sürekli eğitim, teknik olmayan birçok endüstrideki bireyler için zor bir görev olsa da, İnternet gerçekten CSS'nin temeli olduğundan, öğrenebileceğiniz serbest kaynakların miktarı tam anlamıyla sonsuzdur. Abarttığımı düşünüyorsanız, Google’a “CSS” yazın ve göz atmanız için 483.000.000 sonuç olduğunu göreceksiniz.
Çevrimiçi kaynaklardan öğrenmeye ek olarak (ve eğer isterseniz kaynakları da), diğer CSS tasarımcılarından çok şey öğrenebilirsiniz. İşlerini analiz edip edemiyorsanız, çevrimiçi olarak verdikleri tavsiyeleri dinleyin ya da yüz yüze görüşmelerde konuşun, ilkeleri izlemeye kendini adamış diğer tasarımcılarla etkileşim kurarak ve işbirliği yaparak çok fazla değer elde edebilirsiniz. üst çentik CSS tasarımı ve inanılmaz iş parçaları üretiyor.