最近，一位朋友向我尋求編程指導(dǎo)。她是一位絕對(duì)的初學(xué)者，對(duì)編程一無所知。我決定從我自己的起點(diǎn)開始：HTML和CSS。我們使用CodePen，開始復(fù)制并修改現(xiàn)有的代碼片段。很快，一條學(xué)習(xí)路徑便清晰地展現(xiàn)在我們面前。

這篇文章的目的并非向已掌握CSS基礎(chǔ)知識(shí)的讀者教授CSS基礎(chǔ)，而是重點(diǎn)介紹那些激發(fā)初學(xué)者學(xué)習(xí)熱情的內(nèi)容，并希望能激勵(lì)你在有機(jī)會(huì)時(shí)將知識(shí)傳授給他人。幫助他人讓我感到很欣慰，而反過來，我也學(xué)到了一些寶貴的經(jīng)驗(yàn)，這些經(jīng)驗(yàn)改變了我思考代碼的方式。雙贏！

以下是教授他人CSS后我獲得的五個(gè)經(jīng)驗(yàn)教訓(xùn)：

教訓(xùn)1：不要從零開始

12年前，當(dāng)我開始學(xué)習(xí)網(wǎng)頁(yè)編程時(shí)，我從布局開始——使用浮動(dòng)、邊距、填充和位置聲明進(jìn)行定位。如今這可能看起來有些過時(shí)，但這就是我當(dāng)時(shí)和我這位新的編程伙伴一起開始的地方。

結(jié)果并不理想。

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

“那么如何更改顏色？”

“懸停時(shí)它可以改變形狀嗎？”

“網(wǎng)頁(yè)上可以使用哪些字體？”

我以為我們還需要幾周時(shí)間才能學(xué)習(xí)到這些。

因此，我教授12列網(wǎng)格的計(jì)劃被擱置了，我們調(diào)出了Chris的命名顏色表以及幾個(gè)復(fù)制的代碼片段，并開始嘗試。首先，我們更改了Cassidy Williams Netflix/Netlify標(biāo)志的顏色。哇！瞬間吸引了她的注意力。

<code><a href="http://miracleart.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank">?
? <div>
? ? <div></div>
? ? <div></div>
? ? <div></div>
? </div>
? <div>Prettier</div>
</a></code>

然后對(duì)CSS進(jìn)行了一些簡(jiǎn)單的調(diào)整：

<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>

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

然后她意識(shí)到可以更改任何東西的顏色！我們?cè)跒g覽器中加載了一些知名網(wǎng)站，并使用DevTools更改了一些文本和背景的顏色，所有這些都在幾分鐘內(nèi)完成。任務(wù)完成！我的朋友被迷住了。

經(jīng)驗(yàn)教訓(xùn)：不要擔(dān)心嘗試從零開始構(gòu)建。嘗試使用現(xiàn)有的資源！

教訓(xùn)2：注釋

這并非我計(jì)劃課程中的一部分，但關(guān)于為什么某些CSS部分以/開頭并以/結(jié)尾的問題出現(xiàn)了，所以我們討論了這個(gè)問題。

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

事情是這樣的：在此之前，我認(rèn)為自己已經(jīng)相當(dāng)勤奮地編寫注釋了。然而，觀察別人這樣做讓我意識(shí)到，我多少次查看一段代碼（特別是JavaScript），并希望我在那里加一兩行來提醒自己當(dāng)時(shí)在做什么。一個(gè)十秒鐘的任務(wù)可能會(huì)為我節(jié)省五分鐘（甚至更多）的時(shí)間。這累積起來，現(xiàn)在是我正在努力改進(jìn)的地方。

經(jīng)驗(yàn)教訓(xùn)：多寫注釋。

教訓(xùn)3：定位

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

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

以上是想在代碼方面變得更好嗎？教某人CSS。的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！