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

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

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

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

為什么酷？

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

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

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

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

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

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

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

為什么酷？

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

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

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

有這么多善良 您可以輕松超過(guò)500kb。 使用可變字體， 您只需要一種字體，就會(huì)收到所有其他變體。 一個(gè)請(qǐng)求。

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

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

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

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

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

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

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

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

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

尾風(fēng)主頁(yè)

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

缺點(diǎn)之一是您需要學(xué)習(xí)另一個(gè)框架。 這不只是CSS， 您必須記住屬性，因?yàn)槟承┰乜赡芸雌饋?lái)像這樣：

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

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

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

CSS Shadow Parts作為另一個(gè)即將推出的功能

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

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

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

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

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

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

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

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