強調 HTML/CSS/JS 基礎的前端教程是否存在誤區？

01-04

目前前端行業，大部分頁面都是用React、Vue、Angular來寫的，很少有html+css+js這樣一行行來寫的，因為前者效率比後者高太多。
但是我看知乎上大部分教程，還是讓新手先看html，css，再看《JS編程藝術》，《JS高級程序設計》來深入，最後再來研究框架。
我個人覺得html css只需要大概知道是什麼東西就好，js也沒有必要多深入，了解基本語法和數據結構即可，工作重心還是應該放在研究各種常用框架上，雖然js是一切的基礎，但這些框架才是第一生產力。
我也不知道我上述觀點對不對，希望有工作經驗和在職的朋友來聊聊，說說自己看法。

謝邀。

知友們的回答已經很棒了。我只再強調一個方面。

為什麼有相當一部分同學會覺得學框架好，喜歡學框架？

因為人的虛榮心在作怪，尤其是新手迫切需要成就感。

框架很強大，只需要一兩行代碼，數據綁定一類的特性就可以讓你實現一個能夠實時更新的界面；組件化可以讓你像搭積木一樣拼出一個像模像樣的完整頁面。

如果是只用原生的JS/HTML/CSS，一個新手得學多久才能實現使用框架獲得的效果？

可是話又說回來，你會用框架就是會JS了嗎？會搭積木就是會編程了嗎？反思一下，只會用框架相當於什麼都不會，只是滿足了學習編程的虛榮心和成就感而已。

框架刷新太快 -&> 每個框架都不成熟 -&> 不成熟的框架有bug -&> 最後出了事你還是要靠你深厚的html5/css/typescript功力來搞定

你也是現在覺得react / vue / angular好用。5年前世界是什麼樣子呢？3年前呢？3年後呢？5年後呢？

謝邀~

上中學的時候在家門口的體院館學過一年的乒乓球，剛剛開始去的幾堂課就是每天對著牆揮拍子，然後教練喂球給你，你站在一個位置不動一直正手位回球。

旁邊練球的基本都是和乒乓球台差不多高的小朋友，只有我一個中學上還是初學，所以我其實覺得挺丟人的。而且我覺得我都這麼大了，沒必要和小朋友們學一樣的東西，我可以直接學點高級的技術，弧圈球呀，或者正手外旋發球什麼的。

但是教練就一直是讓我打正手位的回球，然後是交叉步正手打兩點，再往後開始練習左推右攻。那時候我的狀態就是，練習的這些技術也不知道怎麼用，下課後和其他人打球就用自己琢磨的路子，覺得比這些呆板的基本功厲害，比如發球假動作什麼的，教練看到就會說我瞎胡鬧，倒也沒怎麼管。

但是基礎打得多了，也挺不耐煩的，教練看我不愛打基礎了，就說跟我正經打一盤。

老頭左手夾著煙，右手拿著拍，打了我11比0，所有球都是推檔過來的。

大爺說，只要你不丟球，就不會輸。

我就很不服氣，我說，那我不能不進攻啊。

教練說，你正手推檔多使點勁，不就是進攻了，然後啪的一個弧圈就拉到了我的臉上。

我說那這個我可不會防，拍子一碰球就飛了。

大爺一副看傻X的眼神看著我說，那你不會把拍子角度朝下一點，速度快一點推過來，借力打力。

反正當時我也是被打的卧槽了... 被人打的不行，還偏偏都是自己學過的技術。

後來大爺說了句讓我印象很深的話：打乒乓球無非是站在對的位置做出對的揮拍動作。

說回編程。

編程無非是把變數通過分支和循環進行正確的操作，你發現變數用的太多怎麼辦？可以用數組。控制代碼有大段的重複，那可以提取出來變成函數。

我帶學生的一個作業，封裝了一個對象，每個方法都返回了this，使得這個對象可以做鏈式調用。學生寫完之後特別驚訝的和我說，老師，這不就是jquery的鏈式語法么。

還有做播放器的時候，為了讓進度條，唱片旋轉和歌詞進度都是同步變化的，我讓他們把幾個變數都設置成隨著音樂進度而調用一次render函數重新計算。學生寫著寫著就跟我說，怎麼感覺這麼像vue的套路。

所以所謂的框架都是隨著需求而進化出的解決問題的套路，而套路的本質還是最基礎的那些東西。從基礎學起的時候會有很流暢的感覺，當你開始在工程方面遇到困難的時候，就會發現原來DOM操作/數據綁定/AJAX模擬/之類的問題已經有人解決了。

你知道它們從何而來，是為了解決什麼問題，而你也有能力解決自這個框架（所能解決問題複雜度）向下的所有問題。

所以和乒乓球一樣，其實你本來要做的事情就是管好變數，但是隨著需求越來越複雜，你開始把基礎組合成套路，把低級套路組合成高級套路，就像反手位右側下旋發球接正手位進攻一樣，聽起來酷炫的事情其實也就是幾個簡單動作的組合，目的也就是站在對的位置做出對的揮拍動作。對於編程來說，再複雜的框架最終目的就是控制好變數的變換，因為計算機的本質就是個狀態機。

從基礎學起直到框架，是最優的捷徑，而如果從框架學起，仍然要陸陸續續的補齊基礎，最終會發現，你莫名其妙的還是把高程上的內容都看了一遍。

只有大部分的重交互的應用型頁面，或者單頁應用才是用你說的那些框架開發的，輕交互的展示型的頁面用那些框架是欠扁。就算是使用那些框架， html 和 css 基礎也是非常重要的。

先 html 和 css ，然後 js ，然後 dom 和 bom 最後再框架，大部分前端工程師的學習路線卻是如此。框架不斷在變，而基礎牢靠之後掌握一個框架並不需要花太多時間。

只會用框架可能一輩子也只能套框架寫寫業務了，大部分程序員都是有發明輪子的夢想的。

所以我覺得前端開發不但基礎要牢靠，還應該繼續學習各種各樣非前端的編程技術，體驗各種技術的利弊，才能成為集大成者。

個人感受是現在確實有很多小孩子用 react 啥的用的很溜，但是一旦在項目里遇到一些問題，發現他們很難直接想到底層的原因，或者說，很難有一種 debug 的直覺。

這不是技術細節的問題，我覺得 javascript 和 html,css 還沒有到技術細節的地步吧，這真的是安身立命之本啊。你要是去研究個 webkit 內核我覺得是可能不必要，但是連基本的 js 怎麼跑，html 怎麼定義，css 怎麼用都不懂的話，用框架掉坑裡很容易爬不出來的。

謝邀，好幾個月沒在知乎回答問題了，不知道怎麼邀請到我的。

先幫題主做一點微小的貢獻，把錯別字改了改，從這錯別字某種程度應該也能看到題主的態度。

下面我來針對題主的問題一點點的來做解釋：

目前前端行業，大部分頁面都是用React、Vue、Angular來寫的，很少有html+css+js這樣一行行來寫的，因為前者效率比後者高太多。

嚴格說應該是WebApp基本都是三大框架佔據了（除去遺留項目不說），用三個基礎語言做WebApp的真是少之又少，但是做宣傳頁面（純靜態展示頁面）基本沒有上框架的，上框架的及基本不是腦抽了就是腦殘。

你要明白的是框架到底解決了什麼問題，為什麼WebApp需要用框架？因為數據綁定，組件化，事件系統，關注度分離等等自己能擼出來的至少算得上是中級前端了，然而擼出來也不代表能用，框架很好的抽象出了這些繁瑣的部分，讓開發者不用去關注這些抽象的部分，專註於具象的業務邏輯，所以才能提高效率。

這句話除了前提有點問題外沒啥錯。

但是我看知乎上大部分教程，還是讓新手先看html，css，再看《JS編程藝術》，《JS高級程序設計》來深入，最後再來研究框架。

沒問題啊，連基礎都沒有怎麼去研究框架，連JS的基礎都搞不懂你能去搞懂框架的瀏覽器事件模型的處理，Pub/Sub事件系統，設計模式？

我個人覺得html css只需要大概知道是什麼東西就好，js也沒有必要多深入，了解基本語法和數據結構即可，工作重心還是應該放在研究各種常用框架上，雖然js是一切的基礎，但這些框架才是第一生產力。

呵呵，用了框架就不用去寫HTML和CSS了嗎？連HTML/CSS都使不利索框架的模板/JSX能寫好？

事實上CSS的坑很深，即使不去考慮兼容性問題也不容易，我剛入前端的時候切的頁面也算不少了，但我還是覺得自己CSS很差，所以在知乎也沒答過CSS的問題。少年啊，看你這提問的姿勢真心建議你先去切個幾十張頁面，搞懂布局，盒模型等等這些基礎吧，這不只是前端獨有的，WPF、Android等GUI開發寫布局的時候都有類似的東西。很多想進入計算機行業的人會選擇前端，很少聽說要去學MFC、WPF的，還不是因為前端的HTML/CSS看上去似乎很容易上手？又有幾個人是真的做過其他非前端向的GUI開發再去選擇前端的？

再說說JS，JS是一個很雜的語言，最初設計的時候也有很多設計錯誤，現在ECMA的新規範也是在到處填坑和避坑。JS的弱類型+動態類型特性，各種坑爹的隱式轉換，變數提升，作用域，還有據說是設計的時候圖方便選擇的原型繼承而不是類繼承搞出來的原型鏈，非同步Event Loop，this context等等，沒有編程基礎的強上JS隨便拿一個出來就夠喝一壺了。現在ES的發展趨勢也是加了很多東西，比如ES2015的generator、class、arrow function，ES2017的async/await，都是從其他語言借鑒過來的還不錯的東西。想真正提高生產力，不只是要深入JS，還要去深入其他的語言比如Python、Java、Ruby，感受下正常的面向對象是什麼樣的；同時JS還有很多函數式的特性譬如閉包，函數是第一公民等等，學點Haskell也能更好的幫助理解JS的函數式特性；JS也提供了足夠的元編程特性，可以去學習下Ruby，幫助理解。

最後再說說框架，一個連HTML/CSS/JS基礎都不想打好的前端，我不信他能去花時間理解React背後的無副作用、組件狀態機理論，還有一些周邊比如immutable不可變數據、Flux/Redux等等帶來的好處，我也不信他能理解為什麼Angular2把非同步的處理從1的Promise換成了RxJS。另外你沒提到YUI、Backbone等等，我猜你剛入前端應該不久，建議你去好好研究下前端App Framework的發展史吧。

少年啊，從你問題的描述看，你現在正處於一個很浮躁的階段，而且我猜你除了前端沒有接觸過其他方向的開發。給你點不成熟的小建議，多寫寫代碼，我當初剛學前端的時候也浮躁過，浪費了很多時間，只有多踩坑、擴大知識面你才能去理解JS的一些特性。另外一個建議是現在的前端其實門檻已經很高了，想做好就不能把自己限定在前端這樣一個小範圍內，前端落後其他GUI平台的開發太多了，這幾年隨著瀏覽器的發展、JS語言的發展以及JS引擎的發展，前端（包括Node.js）正在接受來自其他各個領域的成熟思想和工具，當你把視角打開後你會發現前端里的xx不就是xx的xx嗎？

最後總結下就是，知乎上說的這些學習方法並沒有本質的問題。

世界變化好快，我記得以前人們說的是 html/css/js 不是真正的編程，學編程要面向系統，不要在瀏覽器里打轉。

現在，連 html/css/js 都有人覺得麻煩了……

我就不明白了，無數前人都強調了無數次的東西怎麼到了前端這就要專門提個問題來討論呢

原理性的東西要懂，最好精通，還要能把上下游串起來。但在語法、api、規範之類的東西上別浪費時間，那些隨手就能查到，工作中現學就行了。

是的，基礎應該是計算機基礎而不是三板斧

所以這就是為啥互聯網充斥著質量低劣的網站，操作蹩腳，難用的網站。

容易被掛馬，被注入的網站；

報錯信息茫茫多一屏幕；

點個按鈕被水淹沒，不知所措的網站的

主要原因吧

基礎很重要，比如說前端被題主寫成前段

基礎還是很重要的，前端框架有很多，更新也很快，掌握好了基礎，可以更好地理解框架，學習框架，使用框架，還能根據自己的需要進行修改。如果沒有好的基礎，一旦出現問題，都不知道去哪裡找問題，也不知道如何解決，學好了基礎再去學習框架更簡單，也能提高自己的開發效率以及調試效率等。

你知道碼畜這個詞怎麼來的么。。。。

只學react vue angular 那是技校教的，深入研究html/css/js，網頁原理，計算機理論，等等，這才是本科研究生。

1. 萬變不離其宗，框架再厲害也都是基於JS，框架日新月異，但根本是JS。會JS你可以短時間內angular，react 以及接下來會出來的其他什麼框架，但是只會angular，你則很難很快學會其他框架。

厚積薄發，冰山一角，不想去積攢八分之七的水下部分，只想著擁有浮在水面的八分之一，是不可能站得住腳的。

2. 關於html，css，我有切身體會。剛接觸html和CSS的時候覺得標籤以及CSS的屬性都很直觀和簡單，沒有任何邏輯可言，甚至覺得html css不能稱為一門語言，因此學起來也是不屑一顧。然而真正在布局的時候，會遇到這樣那樣的問題，由於沒有系統學過，出現意想不到的效果時，就會不停地嘗試，而這樣花費的時間往往是不可預測的。

開發不只是寫代碼，是要寫正確的代碼，Debug的時間也應該被算進去，有紮實的基礎能避免很多沒必要的錯誤，節省很多時間。

你對「效率」的理解太狹隘了。

效率分為

1. 上手效率

2. 開發效率

3. debug 效率

4. 運行效率

5. 等

你說的 react、vue、angular 只在「開發效率」上有提升，在其他幾個方面都是降低效率的。

只有在規模特別大的項目，這些框架才能追回這些降低的效率。

你下次用這些框架的時候遇到 bug 就掐表，看看你用多少時間解決 bug。

程序員一半的時間不都是在與 bug 作鬥爭嘛？

為什麼你會覺得用這些框架寫代碼很簡潔？

因為上手門檻高，那些新手沒機會來搗亂。一旦一個半吊子插手你的項目，我保證任何框架都救不了你。

回到樓主的問題：強調前端基礎的教程是否存在誤區？

我認為存在。

但跟你的觀點正好相反。

應該再基礎一點。

首先應該了解一點計算機的運行原理，非科班的同學我推薦《編碼》這本書（書中沒有代碼）。

還要了解一些內存和數據結構方面的知識，我推薦學習 C 語言。

還要了解命令行，我推薦裝個 Linux 作為日常工作使用。

還要了解一點計算機網路方面的知識，目前沒有找到比較通俗的科普書。

還要了解「軟體工程」方面的知識，我推薦《代碼大全》這本書。

最重要的是了解 HTTP。前端怎麼能不了解 HTTP！

最後才是最簡單的編程語言知識——HTML+CSS+JS

但是啊，你哪有這麼多時間。

科班生用一個大學的時間也就學這麼幾門課。

所以有些人就貪快，直接去學 React

呵呵，這是在騙自己。

根基不穩，走不遠噠。

只學框架不學基礎的後果是：

在用 angular/react 時還要到知乎問別人，回調、返回值、this 是怎麼一回事。

這相當於說，跑高速才是第一生產力，那駕駛基礎就不好好學了，直接上高速？無證上路是違法的，有法律收拾你，遺憾的是，無基礎搞框架，現實中卻缺少這樣的法律來約束。

前端小菜鳥強答一發

僅供參考

看完題主的描述，我個人直接表示反對

可以這樣類比，

一個小學生做奧數題，然而這個奧數題用初中知識輕而易舉就可以解決了。

初中知識就類似於框架

小學知識類似於基礎

雖然用初中知識就能解決這道題

問題是，你沒小學知識能學好初中知識？

同理，對於前端來說，他的核心就是html css js 你現在說的框架不就基於js嗎？那你基礎都沒學好，怎麼用框架，又或者說，你可能知道怎麼copy 過來，但是你不知道他為什麼這樣做可以。

如果編程是一種武功，那麼基礎就是內功。

關於前端框架，也確實更新得超級快，記得剛開始是jquery 我還在學js

後來換成了angular 我還在學js

再後來又變成了react 我還在學js

現在又變成vue 了，我還是在學js

這速度太快了，如果單單依賴框架，我只能說，好自為之。

我的觀點是你高程不看個三四遍吃透都是新手，現在前端有很多學了兩個框架皮毛不打好JavaScript基礎就以為自己屬於中高端水平了，其實大部分是民科水平，尤雨溪在qutro中建議學框架之前把JavaScript先吃透，學任何框架都是一星期的事。而且像Angluar2這種重量級框架建議在工作中學。可以嘗試嘗試輕量級的如vue。但是html, CSS,JavaScript基礎打好十分重要。最好一邊做基礎的東西，一邊把高程吃透，這才是相對科學的方法。其他跳過這個過程的，都是民科。民科找工作屬於概率和忽悠範疇。