HTML ve CSS kodu nasıl daha hızlı yazılır?

HTML ve CSS kodu nasıl daha hızlı yazılır? Emmet ve Pug ile HTML ve CSS kodlarını daha hızlı yazarak iş akışınızı hızlandırın.

Modern web siteleri çok sayıda HTML kodu gerektirir. Birden çok farklı görünüm ve duruma sahip karmaşık düzenlerin basit bir metin düzenleyiciyle oluşturulması zor olabilir. Neyse ki, üzerinde çalışabileceğiniz bir dizi HTML oluşturma aracı var. Burada en popüler iki araç olan Emmet ve Pug’a hızlı bir şekilde göz atacağız.

Ancak, bu güçlü zaman kazandıran araçların her ikisini de kullanmak için HTML kodunuzu bilmeniz gerekir. Bu yüzden, dalmadan önce popüler anlamsal HTML etiketlerini doğru şekilde kullandığınızdan emin olun. Ayrıca, HTML standart şablon aracı olan HTML Boilerplate nasıl kullanılacağı ile ilgili yazımıza bakmayı unutmayın.

Kod kullanmadan bir web sitesi mi oluşturmak istiyorsunuz? O zaman kodlama da acemi olanlar için en iyi web tasarım araçları tam size göre olabilir.

Anında HTML oluşturun

Tek seferde büyük miktarda HTML yazarken, her etiketi elle yazmak çok yorucu olabilir. Örneğin, bir bağlantı listesi yazarken, <ul>, <li> ve <a> etiketlerinin hepsinin doğru yerde açılıp kapandığından emin olmamız gerekir. Aksi takdirde bağlantılar çalışmayabilir ve tüm sayfa düzeni tamamen bozulur.

Emmet nasıl kullanılır

Bunun olma ihtimalini azalttığınızdan emin olmak için Emmet’in yeteneklerini kullanabilirsiniz. Bu, sizi çok fazla yazmadan kurtaracak ve HTML ve CSS iş akışınızı büyük ölçüde geliştirecek bir araçtır. Emmet, CSS benzeri bir seçici yazarak öğeler oluşturmanıza olanak tanır. Daha sonra bu öğeyi ayrıştırıp normal HTML’ye genişletebilirsiniz. Aşağıda Emmet’te oluşturulan orijinal bir unsur bulunmaktadır.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet bu öğeyi algılayacak, ayrıştıracak ve ardından aşağıda gösterildiği gibi öğeyi standart HTML’ye dönüştürecektir. Emmet öğesine hızlı bir bakış, <li> ‘ nin ( * 3 ) ile çarpıldığını ve her <li> örneğinin Bölüm olarak adlandırılacağını ve ardından uygun numaranın (3’e kadar) geleceğini gösterir. 

Emmet öğesinin kaç karakter içerdiğini ve standart HTML’nin kaç karakter içerdiğini not edin. Bu küçük kod parçası bile Emmet kısaltması kullanılarak ne kadar zaman kazanılabileceğini gösterir.

<nav>
  <ul>
    <li><a href=”” class=”chapter”>Chapter 1
 of 3</a></li>
    <li><a href=”” class=”chapter”>Chapter 2
 of 3</a></li>
    <li><a href=”” class=”chapter”>Chapter 3
 of 3</a></li>
  </ul>
</nav>

Emmet aynı zamanda bağlamın da farkındadır. Örneğin, bir <tablo> düzenliyorsak, onu doldurmak için bazı <tr> öğelerinin (bunlar satırlar) olmasını isteyebiliriz. Tek yapmamız gereken, kaç tanesine ihtiyacımız olduğunu belirtmek.

Bu, Emmet’in neler yapabileceğinin hızlı bir örneğidir, ancak daha birçok yapılandırma seçeneği mevcuttur. Bunlar arasında CSS düzenleme, BEM (Blok Öğesi Değiştirici) sınıfı oluşturma ve hatta bir Lorem Ipsum oluşturucu vardır.

Ayrıca çoğu kod editörünün yerleşik Emmet’e sahip olduğunu veya eklentiler aracılığıyla desteklediğini de belirtmek gerekir. Bununla ilgili çok daha fazla bilgiye Emmet Belgeleri sayfasından ulaşabilirsiniz.

Dinamik içerik için Pug’ı kullanın

Emmet statik içerik için ideal iken, içeriğin daha dinamik olması gerekiyorsa ne olur? Örneğin, kişiselleştirilmiş ana sayfalar, karmaşık sıra tabloları oluşturmamız veya ortak HTML bloklarını tekrarlamamız gerekebilir. Bunların hepsi JavaScript’te mümkündür, ancak bu içeriği önceden oluşturarak, kullanıcının tarayıcısına güvenmeden ek bir hız artışı elde edebiliriz.

Pug, HTML için bir şablon oluşturma aracıdır. Sayfaları “.pug” formatında yazabilirsiniz ve Pug bu dosyayı okuyacak, içine bazı dinamik veriler enjekte edecek ve standart HTML’yi döndürecektir. Aşağıdaki örnek, Emmet örneğiyle (yukarıda) aynı HTML’yi oluşturmak için kodu Pug’da nasıl yazacağınızın temsili bir gösterimidir.

ul
  each val in [1, 2, 3]
    li
      a(href=””, class=”chapter”) Chapter
#{val} of 3

Bir Pug dosyası, iç içe geçmeyi belirtmek için tek başına girintiyi kullanır. Tek geçişte büyük miktarlarda HTML oluşturmak için değerleri yineleyebilir. Bu “.pug” dosyaları, bir proje genelinde birçok kez yeniden kullanılmak üzere tasarlanmıştır.

Pug, paket yöneticisi npm’den yüklenebilir. Ancak, Pug’a nasıl başlayacağınız konusunda daha fazla bilgi istiyorsanız, resmi web sitesini ziyaret edebilirsiniz.

Daha fazla oku:

• 19 Havalı CSS animasyon örneği
• En iyi kod editörleri 2020: En iyi seçeneklere yönelik rehberiniz
• Google AMP, Web Sitesi İçin Doğru Seçim mi?