想在代碼方面變得更好嗎？教某人CSS。

最近，一位朋友向我尋求編程指導。她是一位絕對的初學者，對編程一無所知。我決定從我自己的起點開始：HTML和CSS。我們使用CodePen，開始復制並修改現有的代碼片段。很快，一條學習路徑便清晰地展現在我們面前。

這篇文章的目的並非向已掌握CSS基礎知識的讀者教授CSS基礎，而是重點介紹那些激發初學者學習熱情的內容，並希望能激勵你在有機會時將知識傳授給他人。幫助他人讓我感到很欣慰，而反過來，我也學到了一些寶貴的經驗，這些經驗改變了我思考代碼的方式。雙贏！

以下是教授他人CSS後我獲得的五個經驗教訓：

教訓1：不要從零開始

12年前，當我開始學習網頁編程時，我從佈局開始——使用浮動、邊距、填充和位置聲明進行定位。如今這可能看起來有些過時，但這就是我當時和我這位新的編程夥伴一起開始的地方。

結果並不理想。

正如你可能猜到的那樣，從“這是如何在屏幕中央定位一個空盒子”開始是一個錯誤。多麼枯燥乏味！儘管我對自己的能力印象深刻，能夠演示Flexbox如何將元素定位在屏幕中央（稍後詳細介紹），但我立即面臨許多與位置無關的其他問題。

“那麼如何更改顏色？”

“懸停時它可以改變形狀嗎？”

“網頁上可以使用哪些字體？”

我以為我們還需要幾週時間才能學習到這些。

因此，我教授12列網格的計劃被擱置了，我們調出了Chris的命名顏色表以及幾個複制的代碼片段，並開始嘗試。首先，我們更改了Cassidy Williams Netflix/Netlify標誌的顏色。哇！瞬間吸引了她的注意力。

<code><a href="https://www.php.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank"> 
</a></code>
<div></div>
<div></div>
<div></div>

<div>Prettier</div>

然後對CSS進行了一些簡單的調整：

 <code>body { background: #F9F2DB; color: #092935; font-size: 50px; } a { color: #092935; } .logo .uno, .dos, .tres { background: #C61561; } .logo .dos { box-shadow: 0 0 20px #F9F2DB; } .logo::before { background: #F9F2DB; } .name { letter-spacing: 8px; }</code>

幾分鐘之內，我的朋友就被迷住了！沒有枯燥的定位需要擔心，只是一些簡單的代碼行就能將熟悉的事物變成完全不同的東西。

然後她意識到可以更改任何東西的顏色！我們在瀏覽器中加載了一些知名網站，並使用DevTools更改了一些文本和背景的顏色，所有這些都在幾分鐘內完成。任務完成！我的朋友被迷住了。

經驗教訓：不要擔心嘗試從零開始構建。嘗試使用現有的資源！

教訓2：註釋

這並非我計劃課程中的一部分，但關於為什麼某些CSS部分以/開頭並以/結尾的問題出現了，所以我們討論了這個問題。

這讓我開始思考自己的工作。我真的沒有寫足夠的代碼註釋。觀察一位新的程序員註釋所有內容（我的意思是所有內容）讓我意識到註釋有多麼有用，不僅對你自己有用，對更廣泛的團隊，甚至未來的你也很有用。 （Sarah Drasner對此主題有一個精彩的演講）。

事情是這樣的：在此之前，我認為自己已經相當勤奮地編寫註釋了。然而，觀察別人這樣做讓我意識到，我多少次查看一段代碼（特別是JavaScript），並希望我在那裡加一兩行來提醒自己當時在做什麼。一個十秒鐘的任務可能會為我節省五分鐘（甚至更多）的時間。這累積起來，現在是我正在努力改進的地方。

經驗教訓：多寫註釋。

教訓3：定位

我們從一些基本的HTML開始，老實說，我看到我朋友的眼睛幾乎立刻就失去了光彩。 （不像編輯預先編寫的CSS那樣）當你無法立即看到它起作用時，它看起來太枯燥了。然而，我們堅持了下來，並取得了成果。

相信我，不要從使用1像素邊框圍繞空

元素進行定位開始。你會很快失去聽眾的注意力。放一張狗的照片——或者尤達寶寶或披薩——只要不是空元素就行。然後我們轉向Flexbox。一開始，我們發現CSS Grid有點太多了。我們簡要地查看了CSS Grid，但是當閱讀大量關於它的文章時，很明顯，許多人假設讀者已經熟悉CSS，特別是Flexbox。我的朋友決定從Flexbox開始。

我承認：我已經習慣了使用UI框架（尤其是Bootstrap），以至於我很少自己編寫CSS來進行定位。我知道它是如何工作的以及（大部分）聲明，但我仍然很少自己寫出來，即使在相對容易的情況下也是如此。教學讓我思考自己對UI框架的依賴性。是的，它們無疑很棒，為我們的項目節省了大量時間，但我記得在最近的一個項目中使用了Bootstrap，該項目基本上只有兩頁，可能根本不需要它！

經驗教訓：如果項目很小，需要定位的元素數量最少，那麼考慮放棄框架並從頭開始編寫代碼！最終結果將更輕量級、更快，並且更令人滿意！

教訓4：排版

我喜歡排版。在過去的幾年裡，我很幸運能與優秀的設計師合作，這真的幫助我掌握了排版的細微之處。令人驚奇的是，對行高和字間距等內容的更改如何能將設計從普通提升到卓越。這是我想讓我渴望學習的新生掌握的東西。好吧，我不需要費心了，因為最初唯一感興趣的是更改字體，然後，對我來說至關重要的是，我們可以使用的字體的數量之多。選擇幾乎是無限的，提供網絡字體的服務和鑄造廠在過去幾年中激增到任何事情都有可能實現的地步，速度很快，對加載時間的影響很小。

但關於設計師（以及像我這樣的前端開發人員）的事情是這樣的：我們在字體選擇方面可能有點狹隘。設計傾向於堅持使用相同服務的相同字體（Roboto和Open Sans嗎？），因為我們知道它們易於實現並且有效。與一位新手探索字體迫使我超越舊的標準並嘗試一些新事物。我現在正在尋找新的組合，並調整它們在屏幕上的工作方式以及對設計整體外觀和感覺的影響。簡而言之，教別人關於排版的事情已經改善了我自己的排版歷程，這可能卡在了2017年左右。

經驗教訓：跟上排版的最新動態。

教訓5：:hover讓一切變得有趣

到目前為止，一切進展順利，但正如你可能想像的那樣，事情仍然相當靜態。在沒有真正計劃的情況下，我們偶然添加了元素的懸停效果，這立刻吸引了她的注意力，就像第一次更改顏色一樣！

懸停添加交互並易於留下深刻印象，這使得它們非常適合初學者嘗試。縮放對象，將方框從方形更改為圓形，隱藏內容——所有這些都可以輕鬆完成，因此懸停是新程序員獲得即時結果的理想方式。事情是這樣的：“像這樣'玩耍'”會打開其他大門。 “如果我只是這樣做呢？”這是我們許多人在日常工作中很少問自己的問題。有了明確的設計，很少有機會玩耍，同樣很少有機會進行實驗。

所以，這是最後的教訓：騰出時間玩耍。僅僅是被問到，“你如何讓這個東西那樣做？”就迫使我學習新事物，了解CSS的新內容，並了解我可以在日常工作中帶回什麼。實驗（或者更好的是，玩耍）使我成為一名更好的設計師，我將做更多的事情。

經驗教訓：騰出時間玩耍。

結論

如果我教新手CSS的時間教會了我任何東西，那就是我很少再從頭開始編寫代碼了。代碼片段和自動完成為我節省了數小時的時間，但正是這些便利讓我忘記了一些非常基本的東西。我應該知道的東西。通過教別人，即使只是偶爾花15分鐘的時間，我的編碼總體上也得到了改進，我的視野也對以前可能沒有考慮過的新想法和技術敞開了。

至於我的朋友？好吧，在我們在一起的短時間內，她對CSS如此著迷，以至於她現在正在參加一個包括HTML的在線課程，現在她知道HTML能夠做什麼之後，它似乎並不那麼枯燥了！

以上是想在代碼方面變得更好嗎？教某人CSS。的詳細內容。更多資訊請關注PHP中文網其他相關文章！