Verimli, Geliştirilmiş CSS Geliştirme
CSS, bir heykeltıraşın araç seti ile karşılaştırılabilir; İş yerinde heykeltraşlar gibi, tasarımcılar da web sitelerinin yapılandırılmış düzenlerini oluşturmak için CSS kullanıyoruz.
Yıllar içinde bu süreç daha organize olmuştu; En iyi kodlama uygulamalarını oluşturmak için kurallar koyulmuştur.
Bu makalede, kodunuzu hızlandırmak için stil sayfaları yazarken kullanabileceğiniz bazı fikirlere göz atacağız.
Verimli CSS yönetimi kolaydır ve kolay okunur ve web tasarımcıları için bir kaynak olabilir. Organize olmak büyük bir adımdır, ancak CSS kullanmak bundan biraz daha karmaşık olabilir.
Bu makaleyi okurken kendi tercihlerinizi aklınızda bulundurun; Herhangi bir geliştiriciden alabileceğiniz en iyi tavsiye, kendi çalışma tarzınızı bulmaktır. En avantajlı olmak için buradaki tekniklerden birkaçını kendi yöntemlerinizle birleştirin.
Neden CSS Streamlining Rahatsız?
Birçok tasarımcı, ayrıştırma kodu hakkında konuşurken ön uç ve arka uç dillerini karıştırıyor. CSS ve HTML, bir web sitesindeki öğeleri biçimlendirmek ve stil oluşturmak için kullanılan ön uç tasarım dilleridir. Dosyalar, ziyaretçinin tarayıcısı tarafından indirilir ve ayrıştırılır; bu, ön uç kodunun önemli bir yükleme süresine sahip olduğu anlamına gelir.
Tarayıcı tarafından indirilen ve ayrıştırılan kod, arka uç dillerinde (PHP veya Ruby gibi) yazılan kod gibi, okunması ve hesaplanması zaman alır. Kolaylaştırılmış CSS, bir web sitesine büyük ölçüde fayda sağlayabilir çünkü yükleme sürelerini kısaltabilir ve sayfa öğesi yapılandırmasını hızlandırabilir.
Günümüzün yüksek hızlı bağlantıları ve gelişmiş işletim sistemleri ile faydalar açık olmayabilir. Yükleme sürelerini karşılaştırmak ve web sitesinin nasıl yüklendiğini görmek için web sitenize bir mobil tarayıcıda bakmak isteyebilirsiniz.
CSS verimli bir şekilde kodlandığında, işlenirken web sitesi öğelerinin biçimini ve stilini görmelisiniz. Bu, tarayıcıdan tarayıcıya farklı görünebilir, ancak yine de gerçekleşir. Web sitenizin kodunu ne kadar çok test ederseniz, o kadar çok göreceksiniz.
Kodunuzu standart ve basit tutun. Blogunuzu veya kişisel web sitenizi ilk geliştirmeden birkaç ay sonra güncelliyorsanız, aşina olduğunuz CSS stilleri arasında dolaşmak yenilerini ele almaktan daha kolaydır. Uyarlanıyor belirlenen standartlar uzun vadede yardımcı olur.
Verimli Kod ile Nasıl Çalışılır?
Kodlama stillerini en yüksek verimle kullanmaya başlamak için, bazı yeni fikirleri benimsemeniz gerekecektir. Bunlar, günümüzde birinci sınıf internet siteleri ve uygulama geliştiricileri tarafından kullanılan temel CSS teknikleridir.
Kodunuzu Basit Tutun
Bu kolayca gözden kaçabilir. Stilleriniz için bir dizi veriyi haritalarken, bunu basit tutun. Gerekirse, veri kümelerini bir sütun yığınında oluşturun.
Stilinizde çalışmak için farklı bölümlerin bir listesini oluşturarak başlayın. Metin, formlar, düzen kutuları, üstbilgiler, altbilgiler ve ihtiyacınız olabilecek başka şeyler ekleyebilirsiniz. Gerçekten organize olmak için, bilinen birkaç stilde, id veya class Gezinme bağlantıları için.
Bu ilk adım, herhangi bir stil diline girmeden önce web siteniz için düz kelimeler kullanarak bir plan oluşturmanıza yardımcı olur. Daha sonra, kod yazmak için oturmak çok daha kolay olacaktır; Önünüzdeki kaynak listesine sahip olmanız, kodları neredeyse insanüstü bir oranda doldurmanıza yardımcı olacaktır.
Kod Bloklarının Ayrılmış ve Seyrek Olmasını Sağlayın
CSS kodunun nasıl yazılması gerektiği konusunda devam eden bir tartışma var. İlk başladığımda, blok gösterimi kullandım çünkü şimdiye kadar gördüğüm tek şey buydu. Ancak, metin ayrıştırmak ve okunaklı hale geldiğinde tek satırlı gösterim daha hızlıdır.
Blok stili CSS'yi göz ardı etmek için bir dava yapmıyorum. Önemli bir öğe ile uğraşırken veya id Altı veya yedi ana özellik barındıran, engellenen formda tutmak daha kolay olacaktır. Tarzınızın önemli kısımlarını ayırıp, bir bakışta bulmanızı kolaylaştırıyor olacaksınız.
Blok gösterimde uzun stiller okumak da daha kolaydır çünkü çoğu metin editörü uzun satırlar sarmaktadır ve 10 ya da daha fazla değere sahip olduğunuzda özellik-değer çiftlerini okumak kafa karıştırıcı olabilir. Web tasarımcısı olmak için, CSS kodunu nasıl uzatacağınızı öğrenmek zorundasınız. Verimliliği göz önünde bulundurun ve en iyi kararınızı kullanın.
Diğer Geliştiricilerle Çalışma
Profesyonel bir web tasarımcısıysanız veya biri olmayı hedefliyorsanız, bir takımla er ya da geç çalışırsınız. Bu takıma bağlı olarak bir nimet veya lanet olabilir.
Tasarımcılar genellikle işlerinde büyük değişiklikler yapmak konusunda isteksizdirler. CSS kodu biraz farklıdır çünkü yalnızca özellik değerlerini kullanarak güzel bir düzen oluşturmaya çalışıyorsunuz ve dosyalar birkaç el arasında geçtiğinde dağınık olabilir. Öyleyse organize ol.
Yorumlar önemli bir yardımdır. Eğer satırlar ya da kod blokları başkalarını karıştırıyor ya da yanlış yönlendiriyorsa, yorumlar saat tasarrufu sağlayacaktır. Stil sayfasına koyduğunuz her şeyi mümkün olduğunca zarif bir şekilde açıklayın.
Yinelenen veya eklenen stillerin üzerine yazılmadığından emin olun. Düşünün ki h1 için h4 başlıklar, bir CSS belgesinde yukarıya doğru biçimlendirilir, ancak daha sonra bazı kod aşağıya yazı tiplerini değiştirir. Bu, kodu yazmayan biri için son derece kafa karıştırıcı olabilir ve şu anda hatayı düzeltmek ve düzeltmek zorundadır.
İletişim de önemlidir. Etraftaki en etkili kodu yazabilirsin, ama iletişim eksikliği takımını mahveder. Elinizdeki göreve odaklanın ve ekip tarafından toplu olarak üretilmiş yaratıcı fikirlerle çalışın (sadece kendi değil).
Ayrı CSS Belgelerini Takip Edin
Kodu temiz ve düzenli tutmanın başka bir yolu, stil türlerini ayrı tutmaktır. Bu, tüm stilleri tek bir belgede tutmanın gerçekçi olmayacağı büyük web siteleri için iyi sonuç verir.
Facebook iyi bir örnek. Muhtemelen tüm farklı sayfaları için pek çok farklı stile sahiptir: profil, arama, kayıt, fotoğraflar, vb. Eğer stiller tek bir dosyada birleştirildiyse, sadece Basit bir hatayı düzeltin.
Facebook, web sitenizden çok daha fazla trafik çekiyor, ancak ilkeler aynı. Organizasyon bir endişe ise, ayrı stil sayfaları uzun bir yol gidebilir. Web tasarımcıları genellikle, yapılandırdığı belgenin yönüne göre kod düzenler (örn. Layout.css , text.css , forms.css ).
Her sayfada tüm stiller yüklenmemelidir. Ve burada fayda var: yöntem web sitenizi oluştururken daha fazla özelleştirme sağlar. Ayrı görünümler ve stiller oluşturarak büyük ölçüde ayrıştırma zamanını kısaltabilirsiniz.
IE için Test Desteği
Web geliştiricileri, Internet Explorer'ı her zaman, özellikle CSS ile kötü amaçlı yazılım olarak boyadılar. Neyse ki, koşullu yorumlar (çoğu tarayıcıya düzenli yorumlar gibi görünüyor) HTML’ye uygulayabilirsiniz.
Internet Explorer'da stil uygulamak için bunları kullanabilirsiniz. Eğer aşina değilseniz koşullu yorumları kontrol edin; CSS özellikleri doğru çalışmıyorsa ve bir alternatife ihtiyacınız olduğunda çok değerli olabilirler.
Serbest bırakılması ile Internet Explorer 9 Beta Birleştirilmiş bir İnternet deneyimine biraz daha yaklaşıyoruz. Tek sorun, tarayıcıların hala IE6 ve IE7 gibi eski tarayıcıları çalıştıran ve ciddi işleme hataları olan (hatalı işleme motorları nedeniyle) ve bazen dış stiller gerektirmesidir. Neyse ki, destek geliştirdi ve Microsoft şeyleri çeviriyor gibi görünüyor.
İçindekiler Tablosu Ekleme
Bu adım isteğe bağlıdır, ancak stil sayfalarım için harikalar buluyorum. Tabloyu CSS belgesinin kendisinde saklayabilirsiniz, ancak bunu özellikle tersine çevirmek için buldum. Özellikle satır içi yorumlar eklemek çok kolay.
Stillerinizi bir tabloya yerleştirmenin temel nedenleri, erişimi kolaylaştırır ve düzenleme işlemini kolaylaştırır. Kodu, mantıksal bölümlere ayırmak için belgenizin başlangıcına işaretçiler yerleştirin.
Kendi anahtarlarınızı oluşturmak iyi bir yaklaşımdır. Örneğin, tablonuzu belgenin ana alanlarına (düzen, yazı tipi, başlık, gezinme vb.) Göre ayırmayı planlıyorsanız, bölümleri benzersiz karakterlerle girebilirsiniz.
Kullanabilirsin =!layout ve =!font sırasıyla düzeni ve yazı tipi bölümlerini tanımlamak için. Muhtemelen kodun herhangi bir yerinde tam olarak bu karakter dizileriyle karşılaşmayacaksınız, bu yüzden onları hem tablonuza hem de her yorum bölümünün başına ekleyerek güvende olmalısınız. Ardından, istediğiniz bölüme geçmek için metin düzenleyicinizdeki arama fonksiyonunu kullanın.
Bu aynı zamanda pek çok kişinin koda bakacağı projeler için iyi bir stratejidir. Her şeyi organize ve erişilebilir tutar.
Kodu optimize etmenin ve daha verimli hale getirmenin birçok yolu vardır ve bu ipuçları büyük bir başlangıçtır. CSS gelişiyor ve bununla ilgili birçok yeni fikir oluşuyor.
Tasarım sektöründe yapmak için tutku ve özveri gerekir. Dijital tasarım tutkunuz varsa, CSS en iyi uygulamalarına uymak zor olmamalıdır. Bu büyük küresel web tasarımcısı topluluğuna başkalarına ulaşmak büyük bir yardım olabilir; endüstri uzmanları genellikle teknik ve yeniliklerini paylaşmaktan memnun olurlar.
Bu yazı sadece Web Tasarımcısı Deposu için yazılmıştır. Jake Rocheleau , tutkulu bir web tasarımcısı ve sosyal medya meraklısı. Jake, en yeni dijital ve internet trendlerini ve tasarım topluluğuyla iletişim kurmayı ve okumayı sever. İşi hakkında daha fazla bilgi edinmek için onu Twitter'da bulun. jakerocheleau .
CSS'yi düzene sokmanın yöntemleri nelerdir? Acemi CSS geliştiricileri için herhangi bir öneriniz var mı? Hangi yeni özellikler veya ek destek gelecekteki CSS yinelemelerinde görmek istersiniz?