Son olarak CSS Grid'i kullanabildiğim tüm konuşmalarda, beni şöyle düşündü: Şimdi başka hangi şaşırtıcı CSS özelliklerini kullanabilirim? CSS Değişkenleri anında akla gelenti.
CSS Değişkenleri hakkında bir şey duyduğumdan beri bir süre geçti ve beni heyecanlandıran ön uç gelişime yepyeni bir araç seti ve düşünce tarzı ekliyor.
CSS Değişkenleri birkaç yıldır etrafta dolaşıyor, ancak geniş kullanımda görünmüyor. Sass gibi ön işlemcilerin popülaritesiyle, ön geliştiriciler uzun zaman önce bu kaşınmayı kaşıdı.
İlk olarak 2014'te CSS Değişkenleri tarafından heyecanlandım ve o zamandan beri ilgi alanımın içine ve dışına daldılar. Şimdi onları üretim sitelerine almayı düşünüyorum ve size ne kadar basit ve kolay kullanacağınızı göstereceğim.
Özel mülkün bildirilmesi basit: Biz sadece istediğimiz mülkü yaratmalı ve başlangıcına iki çizgi eklemeliyiz. Bunlar, herhangi bir yerde ilan edilebilir, ancak eklenir: Kök, şu anda iyi bir yaklaşım gibi görünüyor.
--my-reusable-value: 20px;Özelliği kullanarak da oldukça basittir. Buna var () işlevi üzerinden erişir ve yukarıda beyan ettiğimiz özelliği kullanırız.
padding: var(--my-reusable-value);Bu basit ve şanlı değil mi?
CSS Değişkenleri kullanımı kolay ve hatırlanması oldukça kolaydır. CSS Değişkenleri ile en büyük zorluk (çoğu CSS'de olduğu gibi) bunları kullanmak için doğru zaman ve yeri bilmek. Onları rasgele bir şekilde fırlatmak, bir stil sayfasının karmaşasını yaratmak için emin bir ateş yolu ve hata ayıklamada atılan bu değişkenlerle muhtemelen daha zor hale gelecektir.
Uygun kullanım durumları ve bunları kullanmak için stratejiler göz önünde bulundurulmalı ve bu, çabalarınızın çoğunun odaklanması gereken yerlerdir.
Aşağıdaki örnekte, Sass değişkenlerini kullanarak şu anda nasıl duyarlı bir bileşen oluşturduğumun temel bir örneğini göstereceğim. Sonra CSS Değişkenleri ile bir ön işlemcinin mümkün olmadığı şekilde nasıl geliştirilebileceğini göstereceğim. Bu, değişkenlerin kullanıldığı her yol için geçerli olmayan ancak CSS Değişkenlerinin farklı şekilde nasıl kullanılabileceğini göstermek için kullanılan özel bir kullanım durumudur.
Kalemi görmek CSS Değişkenleri - CSS Değişkenleri olmayan duyarlı kullanım durumu Adam Hughes tarafından @beynimi kaybettim ) CodePen .
Sass'i kullanırken denediğim birkaç farklı metodoloji var. Şu anki sürüme git, değiştirmek istediğim CSS blokları içinde medya sorguları yerleştiriyor. Burada, bu öğeyi her yerde bileşenin stillerini dağıtmadan değiştirmek için bir değişken, standart CSS, mixin veya bir uzantı kullanabilirim.
Bununla ilgili bir problem, birden fazla medya sorgusu ve ilgili türden değil, çok sayıda değişkene sahip olmaktır. Haritaları daha fazla organizasyon sağlayacak değişkenler için kullanabilirdim, ancak asıl meselenin tek bir özelliği tanımlamak için birden fazla değişken kullandığımız olduğunu düşünüyorum. Bu sadece yanlış geliyor.
Sass değişkenleri zamanın ilerisinde kullanılır, yani onları kullanacağımız her şekilde planlamamız gerekir. Gelişmeyi kolaylaştırıyorlar ama teknik olarak bize yeni süper güçler sağlamıyorlar.
Kalemi görmek CSS Değişkenleri - Duyarlı kullanım durumu Adam Hughes tarafından @beynimi kaybettim ) CodePen .
CSS Değişkenlerinin açıklanmasına gerek yoktur, bunlar dinamiktir. Bu çok farklı bir şekilde faydalıdır. Artık değişkenleri her yerden ve medya sorguları gibi belirli bağlamlarda koşullu olarak değiştirebiliriz.
Medya sorgu stillerimize doğru bir şekilde sunarak, duyarlı stiller için dağınık olan medya sorgularının miktarını azaltabiliriz. Ayrıca, farklı biçimlerde genel boşluk ve tipografi stilini görmek için gerçekten güzel ve temiz bir yol sunar.
Duyarlı tasarımların ve temaların CSS Değişkenleri için iki mükemmel kullanım örneği olduğunu düşünüyorum, ancak çok fazla olasılık var.
Sass Değişkenleri ve CSS Değişkenleri, her biri kendi profesyonelleri ve ortakları olan iki farklı canavardır.
Sass'ın popülaritesi ve Sass'ın daha programlı doğası nedeniyle, daha derinlemesine örgütlenme modelleri zaman içinde gelişmiştir. Özellikle sass haritalarını ve benzer tip değişkenleri haritalarda birleştirmeyi seviyorum. Yollar için renkler, boyutlar ve kısayollar, haritalara dahil etmek için popüler seçimler gibi görünüyor.
CSS Değişkenlerinin nispeten daha küçük kullanımı nedeniyle, en iyi uygulamalar henüz gelişmemiştir. Haritalar ve diziler CSS'de de aynı şekilde mümkün değildir, bu nedenle bu yeni örgütlenme kalıpları sorunları Sass'e farklı bir şekilde yenilikçi ve çözmek zorunda olacaktır.
CSS Değişkenleri, çalışma zamanında tarayıcı tarafından dinamik olarak işlenirken, SSS Değişkenleri, CSS derlendiğinde kullanılır.
Bu benim için CSS Değişkenlerinin temel satış noktasıdır. İnsanların bu özelliği zaman içinde nasıl kullandığını ve bunun potansiyeline kadar yaşayacağını görmek ilginç olacaktır.
Kişisel olarak, Webpack , Gulp ve yeni-framework-out-out-out-out- artıklarını kaldırabileceğimiz daha çok şeyin daha iyi olduğu fikrindeyim . Yeni tarayıcı özelliklerine sahip olmak, geliştiricilerin önemli olduğunu düşündükleri şeyleri yapmak için derleme ve JavaScript çerçevelerine güvenmemiz gerektiği anlamına gelir. Önceden geliştiricilerin yüksek bir yüzdesinin CSS'lerinde bir şekilde veya başka bir şekilde değişkenler kullandığını tahmin etmeliyim, bu yüzden bunu çekirdek özellik kullanan herkes yapmak için mantıklı bir şey gibi görünüyor. Yapı adımında (hepimizin hemfikir olduğumuzu düşünüyorum bu günlerde oldukça muazzam oluyor) ve web üzerinde daha fazla tutarlılık anlamına geliyor.
Destek, göze çarpan bir istisna ile dikkat çekici bir ürün arıyor: IE 11. Çoğu modern tarayıcı, CSS Değişkenlerini birkaç hataya sahip Edge ile destekliyor.
% 78.11 bu daha yüksek CSS Kılavuzundan (yazı yazıldığı sırada) değil, ancak IE11 desteğinin bir sorun olabileceğini.
Bence zaman şimdi. IE11 desteğinin daha iyi olmayacağı ve Windows'un önceki sürümlerinden bazı kullanıcıların yeni sürüme geçmesinin uzun zaman alacağını biliyoruz. Ancak modern tarayıcılardaki destek mükemmeldir, bu da CSS Değişkenlerine bakmamız ve olasılıkları denememiz gerektiği anlamına gelir.
Bu, eski tarayıcı desteğine olan sorumluluğumuzu unutmamamız gerektiği anlamına gelmez. Daha eski tarayıcılar için bir destek etiketi, hatta bir polifiliz kullanan temel bir geri dönüş sistemi düşünülmelidir. Dahası, eğer gerçek site kullanımınız eski tarayıcılara göre daha fazla çarpıksa.
Bu, ön uç geliştirme için heyecan verici bir zamandır ve ben, bu teknolojilerden daha fazlasını üretim yerlerinde kullanmak için sabırsızlanıyorum.