Modern araçlarla en iyi CSS yapısı
CSS, HTML ve JavaScript ile birlikte üçüncü harika web geliştirme dilidir. Bununla birlikte, bu ikisinin aksine, CSS birçok geliştirici tarafından oldukça ihmal edilmektedir. Neden? Ve modern CS'nin nedenleri hala alakalı mı?
Farklı teknolojiler çeşitli odak noktalarını vurgular. Örneğin React, JavaScript için JavaScript'e mükemmel bir şekilde dahil edebilmesi için JSX genişlemesini tanıtıyor. Vue.js ise, JavaScript'i HTML'ye bağlayabilmeleri için HTML öznitelik sahiplerini tanıtarak HTML'de JavaScript'i entegre eder.
Bununla birlikte, her iki durumda da ihmal edilen şey, her iki durumda da web geliştirmenin üçüncü büyük dilidir. Aslında, CSS birçok geliştirici arasında oldukça popüler değildir, çünkü özellikle CSS tasarım için daha fazla ve gelişim için daha az bir araçtır. Gelişim açısından, CSS genellikle çok sezgisel görünmüyor ve hatalara eğilimli görünmüyor ve çeşitli tarayıcılar ve web cihazları nedeniyle sunumda beklenmedik farklılıklar da var.
CSS ayrıca birkaç nedenin olduğu hızlı bir şekilde karışma eğilimindedir. Bir yandan, kurallar CSS'nin nasıl yapılandırılabileceği dilinde açıkça eksik. Öte yandan, tanım gereği CSS küreseldir, bu yüzden aslında bağımsız bileşenler arasında çatışmalara yol açan genellikle istenmeyen yan etkiler vardır.
Bu nedenle modern web geliştirmenin amacı, CSS'yi yerel olarak kullanmak ve mümkün olduğunca izole etmek olmalıdır, böylece yan etkiler istenen alan dışındaki herhangi bir etkiyi etkileyemez. En basit yaklaşım, bir style-Kuttribute sağlanır. Bu, daha önce çağrılan sorunu çözer style-Tartribut her zaman üzerinde tanımlandığı öğeyi ifade eder.
Bununla birlikte, bu yaklaşımın çok sayıda dezavantajı vardır. İle style-attributes tüm öğeler yapamaz, örneğin, sözde elementler molar desteklenmedi. Ayrıca, medya sorguları desteklenmediğinden, reaktif bileşenleri yolda tasarlamak mümkün değildir. Yeniden kullanım eksikliği, tedarikçinin (otomatik) önek eksikliği ve yazılı bir CSS'de önbellekteki depolamayı verimli bir şekilde ezberlemenin imkansızlığı negatiftir.
Önerilen editoryal içerik
Rızanızla, burada harici bir YouTube videosu (Google Ireland Limited) burada davet edilir.
YouTube videosu her zaman yüklenir
YouTube videosu artık yüklüyor
CSS satır içi tanımlayın
CSS modülünü kullanın
Zorluk aslında CSS'yi yerel düzeyde tanımlamak ve kalınlık, sadelik, sadelik, konfor, yapı ve verimlilikte dezavantajları kabul etmek zorunda kalmadan izole etmektir. Bütün bunlar, SO -Constred CSS modülü ile nispeten yeni bir yaklaşımla elde edilebilir. Bunlar, yalnızca yerel etkiye sahip olan düzenli CSS dosyalarıdır.
Ancak bu, web tarayıcısının özellikleri değil, gibi oluşturma araçlarının (genellikle JavaScript'e dayalı) webpack gerekli. Yaklaşım nispeten basittir. CSS dosyasını HTML üzerinden yüklemek yerine, JavaScript koduna normal bir JavaScript modülü gibi aktarılır. Bu kolayca mümkün olmadığından, bu pasaj için inşaat araçlarına ihtiyaç vardır.
İthalat sırasında, CSS dosyasında arşivlenen sınıfların adları artık JavaScript kodunda erişilebilen Chiari Oluşturulan Kimlikler ile değiştiriliyor. Bu, bir geliştiricinin okunabilir sınıf adlarıyla bileşenleri tanımlamakta çalışabileceği anlamına gelir, ancak yürütme aşamasında sınıfların adlarının açık ve dolayısıyla yerel olduğu garanti edilir. Yolda daha fazla çatışma olamaz.
Tüm CSS olasılıkları CSS dosyalarında, sahte öğeler ve multimedya sorgusunda bulunduğundan ve gerekirse bu dosyalar SASS, SCS veya başka bir dua ile de işlenebilir. Buna ek olarak, yaklaşım, web tarayıcının bir işlevi olmadığı için Internet Explorer gibi eski web tarayıcılarıyla bile çalışır.
Temalar CSS modülü ile de uygulanabilir. Tek yapmanız gereken CSS modülünde kullanılabilecek CSS değişkenlerini tanımlamaktır. Ne yazık ki, sorun tam olarak sorun: Internet Explorer, CSS değişkenlerini desteklemiyor, bu yüzden CSS modülüne ilişkin temalar yalnızca modern web tarayıcısında çalışıyor. İnternet Explorer'ı görmezden gelebilirseniz, CSS modülleri seçim araçlarıdır, aksi takdirde, temaları desteklemek istiyorsanız bir sorununuz vardır.
Önerilen editoryal içerik
Rızanızla, burada harici bir YouTube videosu (Google Ireland Limited) burada davet edilir.
YouTube videosu her zaman yüklenir
YouTube videosu artık yüklüyor
CSS modülünü kullanın
CSS temaları
Bu sorun için teknik bir çözüm bulmaya hazırlanmadan önce, temaları daha iyi anlamak önemlidir. Genel olarak, temalar iki hedefe ulaşmak için kullanılır: bir yandan, boyutlar, mesafeler, renkler ve co. En basit ve en yaygın varyant, bir ışığın ve karanlık bir modun desteğidir.
Aslında, temalar için daha birçok seçenek var, bu nedenle temalar her biri ışık ve karanlık bir varyantta tekrar varyantlara sahip olabilir. Burada karmaşık senaryoların nasıl düşünülebileceği aşağıda açıklanmıştır.
İçerik açısından, bir temanın teknik ve teknik yönlerini ayırmak mantıklıdır. Teknik yönler, bileşenlerde kullanılabilecek temel değerlerdir. Daha önce de belirtildiği gibi, bu boyutlar, mesafeler ve renkleri içerir. Örneğin, konuşulan isimlerin atanması tavsiye edilir, örneğin küçük,, orta VE büyükve gerçekten yolda seçilen değerleri niyetle parçalamak.
Bileşenlerde, yalnızca bu terimlere her zaman referans verilir. Bu nedenle, örneğin karakterin boyutundaki bir makalenin başlığını belirleyerek bir dolaylılık oluşturulur. orta Görüntülenmelidir. Yol boyunca, makalelerin başlıkları için karakterin boyutu, karakterlerin diğer boyutlarını etkilemeden merkezi olarak değiştirilebilir. Bununla birlikte, genel olarak ve bileşenler aracılığıyla, karakterin büyüklüğünde olan bileşenler aracılığıyla da değişme olasılığı da vardır. orta anlaşılmalıdır.
Bu dolaylığı uygulamak için, iki alanda bir temanın sökülmesi tavsiye edilir: ilk olarak teknik yönlerle veya temel değerlerle, ikincisi bu değerlerin bileşenler üzerinde eşlenmesi ile ilgilenir. Tabii ki, bazı durumlarda haklı istisnalar olabilir çünkü boyutlar, mesafeler ve co. Doğrudan bir bileşende tanımlanmalıdır, bu nedenle tanımları da kasıtlı olarak diğer tüm bileşenlerin tanımlarından farklıdır.
Önerilen editoryal içerik
Rızanızla, burada harici bir YouTube videosu (Google Ireland Limited) burada davet edilir.
YouTube videosu her zaman yüklenir
YouTube videosu artık yüklüyor
CSS temaları
Stil Bileşenleri
Genel olarak temaları ve CSS'yi tanımlamak için, başlangıçta belirtilen zorlukları birleştiren ve entegre eden bir yaklaşım hala gereklidir. Bu amaçla reaksiyon formu var Stil BileşenleriNPM üzerinden kurulabilir. Modül esasen adı verilen bir işlevi dışa aktarır styledHTML öğelerini ve istenen CSS bilgilerinin ortak bir bileşende bağlanmasının mümkün olduğu yardımıyla.
Bir geliştirici olarak yolda, her bir tasarlanmış öğeye profesyonel adınızı vermek zorunda kalırsınız, böylece (klasik CSS'de sıklıkla olduğu gibi) sayısız div-Edizler yönetmeli, ancak en başından beri profesyonel bir yapı oluşturabilirler. Stiller doğrudan JavaScript'te tanımlandığından, stil bileşenlerini kullanırken sınıfların adlarını kendileri atama ihtiyacı. Tabii ki, bu kaputun altında olmaya devam ediyor, ancak bu geliştirmede tamamen şeffaf.
Modül, sahte öğeler ve medya soruları da dahil olmak üzere tüm CSS'nin becerilerini destekler. Ayrıca, bunun için ayrı bir yol düşünmek zorunda kalmamak için tedarikçinin önekini otomatik olarak ele alır ve ev temalarının tanımını destekler. Son olarak, CS, bileşenleri stilde son derece esnek ve aynı zamanda güçlü hale getiren JavaScript değişkenleri aracılığıyla parametrelendirilebilir. Başka bir nokta, modülün TypeScript ile mükemmel bir şekilde uyumlu olmasıdır.
Önerilen editoryal içerik
Rızanızla, burada harici bir YouTube videosu (Google Ireland Limited) burada davet edilir.
YouTube videosu her zaman yüklenir
YouTube videosu artık yüklüyor
Stil Bileşenleri
Modern CSS
Ne CSS modülünün ne de stil bileşenlerinin BEM veya OOCSS gibi bir prosedürün kullanılmasını gerektirmediği açıktır, çünkü her iki durumda da CSS sadece yerel olarak bileşen düzeyinde tanımlanır. Bu yapısal önlemler nihayetinde modern web geliştirmede gününü yaşadı ve bu nedenle artık alakalı değil – ya da en azından birkaç yıl öncesine göre çok daha az alakalı.
Aynı zamanda SASS, SCS ve benzeri bulguların önemi. Google Trends'e göre, daha az, Google Trends'e göre, zaten 2015, SASS 2017'de idi. O zamandan beri, bu teknolojilerin kullanımı sürekli olarak düştü. Bu teknolojilerin yerini, “JS'de CSS” olarak da bilinen ve aynı zamanda çok sayıda JSS çerçevesi tarafından da tanıtılan JavaScript'e entegre edilen CSS ile değiştirilir.
Tüm teknik yeniliklere rağmen, bir şey değişmedi: Temalar bölümünde açıklandığı gibi CSS'nin teknik ve teknik yönlerini temiz bir şekilde temizleyebilmek hala önemlidir. Sadece bu başarılı olursa, büyük ve karmaşık uygulamalarda konularla da çalışan ölçeklenebilir CSS yazabilirsiniz.
Önerilen editoryal içerik
Rızanızla, burada harici bir YouTube videosu (Google Ireland Limited) burada davet edilir.
YouTube videosu her zaman yüklenir
YouTube videosu artık yüklüyor
Modern CSS
Çözüm
Modern CSS çok accomodating geliştiricidir. Sayısız alet ve önlemle karşılaşmanız gereken zamanlar sona erdi. Stil bileşenleri gibi tek bir basit modül artık tüm ortak web tarayıcılarında çalışan, CSS'nin tüm işlevlerini destekleyen, kullanımı kolay ve konforlu ve okunaklı ve anlaşılabilir kalan yapılandırılmış CSS'yi mükemmel bir şekilde yazabilmek için tamamen yeterlidir.
Internet Explorer'ın desteği olmadan yapabiliyorsanız, bağımsız bir modüle bile ihtiyacınız yoktur, ancak Next.js gibi bazı çalışma zamanı ortamları tarafından desteklenen CSS modülünü kullanabilirsiniz. Bu yaklaşımların web tasarımında ve web geliştirmede geleceğe ait olduğu varsayılabilir.
()