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

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

但是，盡管這似乎無關緊要， 當然， 這很重要。 干凈的代碼， 優(yōu)化的方法 新技術是什么 允許 開發(fā)人員以可擴展的方式展示精美的設計。 表現 是用戶想要的 可擴展性 是客戶想要的。

所以， 為了對所有前端開發(fā)人員給予應有的尊重，并為設計師提供一些見解和想法， 我們已經編制了“ 2021年要遵循的前端趨勢”列表。

即使CSS自定義屬性（也稱為CSS變量）已經存在了一段時間，這也是開發(fā)人員多年來一直想要的東西。 例如， W3C模塊級別1從2015年開始。 但是，與任何新技術一樣， 需要一段時間才能獲得牽引力。 我們相信，到2021年， 自成立以來，我們將看到一些最大的采用率。

為什么酷？

自定義屬性實際上是 變數 在CSS中。 您可能會說：“但是我們在Sass中有變量， 不是嗎“ 是的， 我們的確是！ 但是當您將Sass編譯為CSS時， 你得到， 出色地， CSS。 而且沒有變量。 您不能再更改該變量的值。 只是紅色。

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

然而， 具有自定義屬性， 你有 。 然后，您可以重新定義為藍色。 直接在瀏覽器中 無需編譯。 要了解有關這些CSS技巧的更多信息，CSS變量和預處理器變量之間有什么區(qū)別？

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

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

可以用來瀏覽和試驗的網站之一是“可變字體”。 如果您是第一次聽這個詞，它也可以作為一個很好的演示。 可變字體允許您使用 一個 文件 并應用諸如或的屬性 完全控制 超過厚度或傾斜度…

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

為什么酷？

出色地， 很明顯，它給了我們， 開發(fā)人員（和設計師）， 幾乎無限的自由 字體的外觀。 你有沒有想過太多 但是“普通”太瘦了，您之間沒有任何東西嗎？

字體設計者對此非常了解，并經常提供中間屬性。 他們用數字（例如100（淺）或900（非常粗））以及介于300和300之間的任何數字來標記它們， 400， 600， 700， 等等。 但是也許您需要750，但它不可用？ 現在， 使用可變字體， 你做！

可變字體還有另一個巨大的好處。 如您所知， 字體對 加載時間。 無論是在帶寬還是在屏幕上呈現。 一個比較標準的請求可能看起來像這樣：

有這么多善良 您可以輕松超過500kb。 使用可變字體， 您只需要一種字體，就會收到所有其他變體。 一個請求。

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

這是一個“令人眼花”亂”的標題， 但這是真的！ 前端開發(fā)人員不僅是“ JS開發(fā)人員”， 但也只有“ CSS / HTML”開發(fā)人員。 這個標題是給他們的。

JavaScript不僅是一種趨勢， 盡管取決于您問的是誰， 諸如“是的， 如今， 如果您未啟用JS，您甚至都無法打開網站”或“關于為“關于”頁面加載5MB滑塊和廣告的提示”。

但是不管它有多少積極和消極的一面， 它的用途不斷增長。 所以， 哪些基于JS的技術/方法/工具應該更趨向于發(fā)展？

• React / Vue作為WordPress之類的CMS的前沿（無頭）
• WebGL（三。js）3D圖形， 模擬 互動性
• VR和AR內容
• 更優(yōu)化的構建工作流程（Webpack， 吞咽）
• 瀏覽器API提供更多控制/功能

并添加另一個深層次的理由-僅使用JS， 從技術上講，您幾乎可以構建所需的任何規(guī)模的項目。 僅用JS， 你可以做一個反應性的前端， 將其連接到某些數據存儲， 利用瀏覽器的API獲得最佳的用戶體驗， 并實時部署您的項目。 對設置的任何調整都可以在設置中輕松完成。

基于實用程序的樣式專注于通過預定義的類應用樣式。 那就是網頁樣式的一般含義。 然而， 這與標準方法有些不同。 看， 你不會用陰影來造型 背景， 等等。 您可以使用和和（例如border-radius）來設置HTML元素的樣式。

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

這一點都不新， 但是Tailwind的流行使開發(fā)人員重新考慮了這種方法。

尾風主頁

有人可能會說這幾乎是“用HTML編寫CSS”，在這種情況下，您實際上無法從CSS更改組件并在各處進行更新。 從技術上講 那是真實的， 但是，例如，當您的組件是React / Vue應用程序中的JS文件時， 然后你 做 在一處更新它們。

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

盡管總會有人喜歡它（討厭它）， 這是解決許多問題的好方法。 還， 您將永遠不知道它是否對您有用，直到您真正 試試吧。

使用新的CSS功能本身可能是一種趨勢。 雖然這不是對特定功能或方法的更改， 到目前為止，它對我們一直在編碼的方式提出了挑戰(zhàn)。 優(yōu)點？ 它解決了很多問題。 不好嗎 向后兼容。

但是感謝瀏覽器供應商在過去一兩年中取得的進步（看著您， 微軟）， 世界各地的大多數用戶都可以比以往更有效地訪問網絡。

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

CSS自定義屬性是這些功能之一， 但是大約有5年歷史（而且相當專業(yè)），它有自己的版塊。

雖然不經常使用， 由于許多開發(fā)人員很少需要支持從右到左的語言， 寫作模式確實存在。 對于儀表板/框架和多語言站點，它們是必不可少的。 得益于對定向寫入屬性（例如margin-inline-start）的更多支持， 您不必為RTL覆蓋從margin-left到margin-right的內容。

我們有彈性 然后我們有網格。 現在， 我們有 網格內的網格。 最初支持Grid時，開發(fā)人員可以立即使用Subgrids。 出色地， 現在我們有了它，它聽起來聽起來既酷又有用。 榮譽獎：Flexbox的差距（因為它也是網格的一部分）。 它按照它說的去做。 可悲的是 它還沒有得到很好的支持。

速記選擇器，最好用代碼片段進行解釋 我們從MDN取得的數據：

：is（header， 主要的， footer) p:hover {
紅色;
光標：指針；
}

標頭p：懸停，
主要提示：懸停，
footer p:hover {
紅色;
光標：指針；
}

DevriX專業(yè)人員隨時可以與您合作。 我們負責服務器管理， 自動化， 登臺服務器設置， 優(yōu)化， 可擴展性 鏈式部署等等。

DevriX的創(chuàng)意主管和前端開發(fā)人員
亞歷克斯（Alex）的熱情在于學習新的網絡技術， 探索創(chuàng)新的方法來優(yōu)化網站性能并改善用戶體驗。 亞歷克斯（Alex）喜歡騎自行車和數字藝術，最近開始在ELSYS技術學校教授設計。