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

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

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

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

為什么酷？

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

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

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

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

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

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

資料來源：網(wǎng)絡(luò)上可變字體的介紹

為什么酷？

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

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

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

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

您可以進(jìn)一步閱讀《可變字體：網(wǎng)絡(luò)上可變字體簡介》。

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

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

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

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

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

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

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

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

尾風(fēng)主頁

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

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

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

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

但是感謝瀏覽器供應(yīng)商在過去一兩年中取得的進(jìn)步（看著您， 微軟）， 世界各地的大多數(shù)用戶都可以比以往更有效地訪問網(wǎng)絡(luò)。

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

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

雖然不經(jīng)常使用， 由于許多開發(fā)人員很少需要支持從右到左的語言， 寫作模式確實存在。 對于儀表板/框架和多語言站點，它們是必不可少的。 得益于對定向?qū)懭雽傩裕ɡ鏼argin-inline-start）的更多支持， 您不必為RTL覆蓋從margin-left到margin-right的內(nèi)容。

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

速記選擇器，最好用代碼片段進(jìn)行解釋 我們從MDN取得的數(shù)據(jù)：

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

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

DevriX專業(yè)人員隨時可以與您合作。 我們負(fù)責(zé)服務(wù)器管理， 自動化， 登臺服務(wù)器設(shè)置， 優(yōu)化， 可擴(kuò)展性 鏈?zhǔn)讲渴鸬鹊取?/p>

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