代碼挑戰＃2：4 CSSBATTATTER.DEV中更高分數的技巧

CSSBattle.dev：提升CSS技能的絕佳挑戰

核心要點

• CSSBattle.dev 的挑戰是提升CSS 技能的絕佳途徑；優先使用免費的“內置元素”，記住空輸出面板並非真正為空，它包含兩個不可見的元素——HTML 和BODY 元素。
• 為了在 CSSBattle 中節省字符，請仔細選擇度量單位，充分利用 CSS 的“繼承”和“特異性”，記住現代瀏覽器會對簡短且略有不規範的代碼表示友好。
• 參加 CSSBattle.dev 的目的並非鼓勵不良的編碼習慣，而是測試、實驗並最終比編寫正常的、健壯的生產代碼更深入地理解 CSS。

一周多前，您可能已經看到我們推出了第二個代碼挑戰——與我們在 CSSBattle.dev 的朋友合作。 CSS 戰鬥是一個相對較新的概念——該網站於 4 月推出——其工作原理並不總是顯而易見的。

CSSbattle中的默認輸出和編輯器面板。

簡單來說：

• 您的目標是僅使用 HTML 和 CSS 創建“目標”圖像的副本。
• 您不能使用外部圖像。
• 您不能使用 SVG（即使是內聯 SVG）或特殊字符。
• 所有解決方案都會根據準確性和效率（字符數）自動評分。
• 以最高分重現目標圖像的玩家獲勝。

我必須承認，當我第一次看到這個想法時，我有點難以置信。究竟誰能用少於“推文長度”的 HTML 和 CSS 創建那些設計？這肯定不可能吧？

所以我嘗試了一下，大部分都失敗了——但我也有所收穫，並逐漸開始理解一些需要的技巧。如果您好奇，我想我會介紹 4 個技巧來幫助您獲得更高的分數。

讓我明確一點：當我撰寫這篇文章時，我的排名在這個戰鬥回合中排名第 24 位。我已經完成了迄今為止的所有目標，並且總體排名第 26 位，因此肯定至少有二三十名玩家的解決方案比我好得多。但是，我很樂意分享我的知識——並接受任何有更好想法的人的建議。

技巧 #1：空輸出面板永遠不是真正的空

第一次加載任何目標時，您會看到類似上圖的內容。您的編輯器始終預先填充了示例 HTML 和 CSS，提供了一個基本的起始位置。但是，即使您刪除編輯器中的每個字符，您的輸出面板在技術上也不會為空。

為什麼？如果您檢查輸出面板的源代碼（提示：現在先關閉“滑動和比較”功能），您會發現一個包含兩個不可見元素的

如下面的圖像所示，您可以看到它們存在於一行 CSS 中。當然，您可以隨意設置這兩個 HTML 元素的樣式，而無需花費任何字符來創建它們。

總是有一個HTML和一個BODY元素可以設置樣式。

這並不意味著您永遠不會添加自己的 HTML 元素——

、、等——但始終嘗試優先使用免費的“內置元素”。

技巧 #2：仔細選擇度量單位

CSSBattle 目標始終為 400px 寬，300px 高，因此您可以正確地將中心點描述為 left:200px（10 個字符）和 top:150px（9 個字符）。但是，您可以同樣輕鬆地將該確切位置描述為 left:50%（8 個字符）和 top:50%（7 個字符）。這是一個方便的 4 個字符的節省。

但是，百分比並不總是勝出。位置 top:100px（9 個字符）轉換為 top:33.33%（10 個字符）——倒退一步。找到最佳匹配需要大量的反複試驗。潛在有用的測量單位包括：

• 像素：px
• 百分比：%
• Rems：rem
• Ems：em
• 英寸：in
• 毫米：mm
• 磅：pc
• 點：pt
• 視口高度單位：vh
• 視口寬度單位：vw
• 四分之一毫米：q

最後一個單位類型——“q”——是一個相對鮮為人知的單位。但因為它是一個字符——我發現它在 CSS 戰鬥中非常有用。我發現 50px 轉換為 53 q。

另請注意，如果您沒有顯式聲明單位類型，則某些 CSS 屬性會假定您指的是像素。換句話說，width:80 與 width:80px 相同。高度和邊距也是如此。另一方面，如果您不聲明度量單位，則 box-shadow 會完全失敗。

技巧 #3：CSS 是級聯的——充分利用它

CSS 非常擅長“繼承”和“特異性”。繼承允許子元素從其父元素獲取其樣式。 “特異性”意味著廣泛的規則會被更仔細或最近聲明的規則覆蓋。

在 CSS 中，最廣泛的規則是 * 通配符，這意味著“應用於所有元素”。因此，以下規則將 #222 背景應用於所有內容。如果我們不添加任何額外的 HTML，這就是 和

。

<code>*{background:#222}</code>

如果我們隨後添加一個更具體的規則來僅定位

，我們只需設置 的樣式，而無需直接命名它——節省了 3 個字符。

<code>*{background:#222}
body{background:#F2994A}</code>

讓我們更進一步。

在 CSS 中，“>”運算符表示“僅當 X 是 Y 的父級時”（即 x>y{}）。因此，如果我們編寫：

<code>*{background:#222}</code>

……我們說的是“僅將此規則應用於任何位於任何其他元素內的元素”——換句話說，任何子元素。由於 元素永遠不是子元素，只有

獲取第二個規則。我們又節省了一個字符。

<code>*{background:#222}
body{background:#F2994A}</code>

技巧 #4：瀏覽器很強大。讓它們工作

一旦您獲得了所有唾手可得的成果，就到了唯一切實可行的削減字符的方法是刪除在技術上是必需的但對最終渲染絕對不重要的代碼。您可能會說，現代瀏覽器會對簡短且略有不規範的代碼表示友好。這包括但不限於：

• 刪除結束
• 刪除結束 HTML 標記（即

）

刪除樣式塊的最終結束 }

刪除大多數空格和回車符。這裡反複試驗是您的朋友。

當然，在生產 CSS 中採用這種極端的優化是沒有意義的。您會為了微不足道的節省而損害代碼的可靠性。但是 CSSBattles 會教您更多關於瀏覽器如何思考以及它們喜歡和不喜歡什麼的知識。

那麼，CSSBattle 是否鼓勵不良的編碼習慣？

我聽到一些人提到這是一個潛在的缺點。事實上，CSS 元老 Eric Meyer 最近在 CSSBattle.dev Spectrum 反饋中提出了這個問題：

對利用解析器瑕疵（特別是關於分隔空格）以獲得較低分數的依賴是故意的，還是一種副作用？ –Eric Meyer

我認為不是。對我來說，這是一種測試、實驗並最終比編寫正常的、健壯的生產代碼更深入地理解 CSS 的方法。

您可以將它與日本俳句詩歌進行很好的比較。俳句是一種建立在嚴格限制之上的格式——3 行和 17 個音節的任意限制。

即使是世界上最偉大的俳句大師也不指望每天都用精心構建的俳句來說話或寫作。但是，這並不意味著當我們閱讀（或寫作）俳句時，我們不能從詞語選擇、節奏、平衡和美感中吸取重要的教訓。

編寫好的“CSS Battles 代碼”與編寫好的“生產代碼”並不相同——但它將教會您在其他地方學不到的課程。

關於 CSSBattle Dev 的常見問題解答 (FAQ)

什麼是 CSSBattle Dev，它是如何工作的？

CSSBattle Dev 是一個在線平台，開發人員可以在其中相互競爭進行 CSS 編碼挑戰。該平台提供一個目標圖像，您的任務是使用 HTML 和 CSS 複製它。您的輸出越接近目標圖像，您的分數就越高。該平台使用獨特的評分系統，該系統考慮了輸出的準確性和代碼的長度。代碼越短越準確，分數越高。

如何提高我在 CSSBattle Dev 中的分數？

提高您在 CSSBattle Dev 中的分數需要結合準確性和簡潔性。您的輸出需要盡可能接近目標圖像，並且您的代碼需要盡可能短。您可以通過掌握 CSS 屬性和值、了解不同的 CSS 屬性如何相互交互以及學習如何編寫簡潔高效的代碼來實現這一點。

掌握 CSSBattle Dev 的一些技巧是什麼？

掌握 CSSBattle Dev 需要實踐和對 CSS 的深入了解。以下是一些技巧：

1. 了解盒子模型：CSS 盒子模型是佈局設計的基石。了解填充、邊框和邊距的工作原理至關重要。
2. 掌握定位：了解不同的定位值（靜態、相對、絕對、固定）如何影響元素的位置可以幫助您準確地放置元素。
3. 學習使用簡寫屬性：簡寫屬性允許您在一行中指定多個屬性，從而幫助您編寫更短、更簡潔的代碼。

我如何學習更多關於 CSS 屬性和值的知識？

網上有很多資源可以學習 CSS 屬性和值。 MDN Web Docs、CSS-Tricks 和 W3Schools 等網站提供關於 CSS 的全面指南和教程。此外，在 CSSBattle Dev 等平台上練習可以幫助您了解不同的屬性和值如何在實際場景中工作。

如果我是 CSS 新手，我可以參加 CSSBattle Dev 嗎？

當然！ CSSBattle Dev 是初學者學習和練習 CSS 的絕佳平台。挑戰的難度從簡單到困難不等，因此您可以從簡單的挑戰開始，隨著技能的提高逐漸轉向更複雜的挑戰。

CSSBattle Dev 的評分系統是如何工作的？

CSSBattle Dev 的評分系統基於兩個因素：準確性和代碼長度。該平台將您的輸出與目標圖像進行比較，並根據它們匹配的程度計算分數。它還考慮了代碼的長度——代碼越短，分數越高。

我可以在 CSSBattle Dev 中查看其他參與者的解決方案嗎？

是的，提交自己的解決方案後，您可以查看其他參與者的解決方案。這是一種學習解決相同挑戰的不同方法的好方法，可以幫助您提高自己的編碼技能。

在 CSSBattle Dev 中應避免的一些常見錯誤是什麼？

在 CSSBattle Dev 中應避免的一些常見錯誤包括：不完全理解 CSS 盒子模型、不使用簡寫屬性以及不優化代碼以使其簡潔。徹底測試您的代碼以確保它能夠準確地複制目標圖像也很重要。

我可以使用 CSSBattle Dev 來準備求職面試嗎？

是的，CSSBattle Dev 是準備求職面試的有用工具。它可以幫助您提高解決問題的能力、學習編寫高效的代碼以及更深入地了解 CSS。但是，請記住，求職面試還可能涵蓋 Web 開發的其他方面，因此它不應成為您唯一的準備工具。

我如何在通過 CSSBattle Dev 學習 CSS 的過程中保持動力？

通過 CSSBattle Dev 學習 CSS 可能具有挑戰性，但也可能非常有趣。該平台的競爭性方面可以激勵您提高技能。您還可以設定個人目標，例如達到一定的分數或完成一定數量的挑戰，以保持動力。記住，掌握 CSS（或任何技能）的關鍵是堅持練習和耐心。

以上是代碼挑戰＃2：4 CSSBATTATTER.DEV中更高分數的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！