2021年將遵循的5種前端趨勢

已發表: 2020-12-17

網上有大量“遵循的設計趨勢”文章。 我們還在2021年將遵循的熱門Web設計趨勢中進行了介紹。對此類文章的關注是可以理解的-設計本身就是客戶和訪客所看到的。 但是，其背後的代碼與大多數用戶無關。

但是，儘管這似乎無關緊要，但它非常重要。 乾淨的代碼，優化的方法和新技術使開發人員能夠以可擴展的方式呈現精美的設計。 性能是用戶想要的，可伸縮性是客戶端想要的。

因此，為了對所有前端開發人員給予應有的尊重以及對​​設計師的一些見解和想法，我們編制了此列表“ 2021年要遵循的前端趨勢”。

1. CSS自定義屬性

即使CSS自定義屬性（也稱為CSS變量）已經存在了一段時間，這也是開發人員多年來一直想要的東西。 例如，W3C Module Level 1是從2015年開始的。但是，與任何新技術一樣，要花些時間才能吸引人。 而且我們相信，自2021年成立以來，採用率將是最高的。

為什麼酷？

自定義屬性實際上是CSS中的變量。 您可能會說：“但是Sass中有變量，不是嗎？” 是的，我們做到了！ 但是，當您將Sass編譯為CSS時，就會得到CSS。 而且沒有變量。 您不能再更改該變量的值。 $primary: red就是紅色。

自定義屬性支持

自定義屬性在Internet Explorer之外的所有地方都得到很好的支持

但是，對於自定義屬性，您具有--primary: red 。 然後，您可以將--primary重新定義為blue。 直接在瀏覽器中，無需編譯。 要了解有關這些CSS技巧的更多信息，CSS變量和預處理器變量之間有什麼區別？

使用它們的一種巧妙方法是用於自定義主題。 您可以通過變量定義HSL值，然後允許用戶通過前端的滑塊更改色相。 使用“設置您的配色方案”功能，使用JS和BAM將滑塊值連接到CSS變量。

2.可變字體

就像CSS自定義屬性一樣，可變字體已經存在了一段時間，但仍未被廣泛使用。 原因之一是他們需要變得更流行的時間，教程/指南和技術的數量以供開發人員採用，以及字體本身需要。 您不能只選擇任何字體並對其進行更改。

您可以用來瀏覽和試驗的網站之一是“可變字體”。 如果您是第一次聽這個詞，它也可以作為一個很好的演示。 可變字體使您可以使用單個文件並應用"font-weight"或"font-style"類的屬性，從而完全控制厚度或斜度……

可變字體-gif

來源：網絡上可變字體介紹

為什麼酷？

好吧，很明顯，它為我們，開發人員（和設計師）提供了字體外觀幾乎無限的自由。 您是否曾經想到過"font-weight: bold"有點太多，但是“ normal”卻太細了，您之間沒有任何東西嗎？

字體設計者對此非常了解，並經常提供中間屬性。 他們用100（淺）或900（非常厚）之類的數字標記它們，以及介於300、400、600、700等之間的數字。但是也許您需要750，但它不可用？ 現在，有了可變字體，您就可以做到！

可變字體還有另一個巨大的好處。 如您所知，字體是加載時間的主要貢獻者。 在帶寬和屏幕渲染方面。 一個比較標準的請求可能看起來像這樣：

  • headings-font-normal.woff2
  • headings-font-bold.woff2
  • body-normal.woff2
  • body-italic.woff2
  • body-bold.woff2

有了這些好處，您可以輕鬆超過500kb。 使用可變字體，您只需要一種字體，就會收到所有其他變體。 一個請求。

您可以進一步閱讀《可變字體：網絡上可變字體簡介》。

3.更多JavaScript！

這是一個“令人眼花”亂”的標題，但這是真的！ 前端開發人員不僅是“ JS開發人員”，而且還是“ CSS / HTML”開發人員。 這個標題是給他們的。

JavaScript不僅是一種趨勢，儘管取決於您問的是誰，但可能會出現一些非常激烈的對話，並帶有諸如“是的提示，如今，如果您未啟用JS，您甚至無法打開網站”或“為“關於”頁面加載5MB的滑塊和廣告”。

但是，無論它有多少積極和消極的一面，它的用途都會增加。 那麼，基於JS的技術/方法/工具應該有哪些發展趨勢？

  • React / Vue作為WordPress之類的CMS的前沿（無頭）
  • WebGL（Three.js）3D圖形，模擬，交互性
  • VR和AR內容
  • 更優化的構建工作流程（Webpack，gulp）
  • 瀏覽器API提供更多控制/功能

並增加另一個深入研究它的重要理由-僅使用JS，您就可以在技術上構建幾乎任何您想要的規模的項目。 僅使用JS，您就可以做一個響應式前端，將其連接到某些數據存儲，利用瀏覽器的API獲得最佳的用戶體驗，並實時部署項目。 對設置的任何調整都可以在設置中輕鬆完成。

4.基於實用程序的樣式

基於實用程序的樣式專注於通過預定義的類應用樣式。 那就是網頁樣式的一般含義。 但是，這與標準方法有些不同。 瞧，您沒有為帶有陰影，背景等的.card設置樣式。您為帶有.shadow和.bg-light以及.br-5 （例如border-radius）的HTML元素設置樣式。

對於只需要快速輸出某些內容而又不用擔心CSS的JS開發人員來說，這種方法效果非常好。

這根本不是什麼新鮮事，但是Tailwind的流行使開發人員重新考慮了這種方法。

尾風主頁

尾風主頁

有人可能會說這幾乎是“用HTML編寫CSS”，在這裡您無法真正從CSS更改組件並在各處進行更新。 從技術上講，這是事實，但是當你的組件在JS文件作出反應/ Vue公司的應用程序，例如，那麼你就在一個地方進行更新。

缺點之一是您需要學習另一個框架。 它不只是CSS，您必須記住屬性，因為某些元素可能看起來像這樣：

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

儘管總會有人喜歡它（討厭它），但這是解決許多問題的好方法。 此外，在您真正嘗試之前，您永遠不會知道它是否對您有用。

5. CSS新功能

使用新的CSS功能本身可能是一種趨勢。 儘管這不是對特定功能或方法的更改，但它對我們到目前為止的編碼方式提出了挑戰。 優點？ 它解決了很多問題。 不好嗎向後兼容。

但是，由於瀏覽器供應商在過去一兩年中（在您看來，微軟）取得了進步，因此，世界上大多數用戶可以比以往更有效地訪問網絡。

ccs陰影部分

CSS Shadow Parts作為另一個即將推出的功能

CSS自定義屬性是這些功能之一，但已有大約5年的歷史（並且相當重要），它具有自己的部分。

寫作模式

儘管不經常使用，但由於許多開發人員很少需要支持從右到左的語言，所以確實存在書寫模式。 對於儀表板/框架和多語言站點，它們是必需的。 例如，由於增加了對諸如margin-inline-start之類的方向寫入屬性的支持，因此您無需為RTL覆蓋margin-left-margin-right。

CSS子網格

我們有了柔韌性，然後有了網格。 現在，我們在grids內部有網格。 最初支持Grid時，開發人員希望可以立即使用Subgrids。 好吧，現在我們有了它，它聽起來聽起來既酷又有用。 榮譽提名：Flexbox的差距（因為它也是網格的一部分）。 它按照它說的去做。 可悲的是，它還沒有得到很好的支持。

:is

速記選擇器，最好從我們從MDN提取的代碼段中進行最佳解釋：

 / *選擇標題內部的任何段落
或正在懸停的頁腳元素* /
：is（頁眉，主要，頁腳）p：懸停{
紅色;
光標：指針；
}
 / *以上等同於以下* /
標頭p：懸停，
主要提示：懸停，
頁腳p：hover {
紅色;
光標：指針；
}