現(xiàn)在web前端也是一個(gè)非常熱門的行業(yè)，想要學(xué)習(xí)web前端開發(fā)的同學(xué)請看這里北京web前端css書寫的先后順序 ，通過對2021 年前端學(xué)習(xí)路線總結(jié)，CSS書寫規(guī)范、順序和命名規(guī)則?? 的了解，希望以上信息可以幫助到您

1.2021 年前端學(xué)習(xí)路線總結(jié)

這是在 GitHub 看到一個(gè)很不錯(cuò)的前端學(xué)習(xí)路線圖（roadmap），從前端基礎(chǔ)到前端工程化，再到跨端，都有知識點(diǎn)的覆蓋，非常推薦閱讀。圖下面是我翻譯的一個(gè)文字版，可以先看圖再看文字。? 表示個(gè)人推薦學(xué)習(xí)?? 表示可選擇學(xué)習(xí)?? 表示不需要嚴(yán)格按照路線的先后順序，可在任何時(shí)間補(bǔ)充這一塊的知識? 表示個(gè)人不再推薦計(jì)算機(jī)網(wǎng)絡(luò)掌握計(jì)算機(jī)網(wǎng)絡(luò)的基礎(chǔ)是一名前端工程師的基本素養(yǎng)，建議先學(xué)習(xí)以下的知識：? Internet 如何工作? HTTP 協(xié)議? 瀏覽器工作機(jī)制? DNS 及其運(yùn)行機(jī)制? 了解域名、網(wǎng)站托管HTML? 學(xué)習(xí) HTML 基礎(chǔ)，標(biāo)簽、元素、表單驗(yàn)證等等?? 語義化標(biāo)簽?? 了解 Web 無障礙（）?? 學(xué)習(xí) SEO 優(yōu)化CSS? 學(xué)習(xí) CSS 基礎(chǔ)? 制作布局：浮動、定位、顯示、盒模型、網(wǎng)格布局、彈性布局? 響應(yīng)式設(shè)計(jì)和媒體查詢（@media）? 結(jié)合 HTML 制作一個(gè)簡單的網(wǎng)頁作為最佳實(shí)踐? 學(xué)習(xí)語法和基本結(jié)構(gòu)? 學(xué)習(xí)操作 DOM? 學(xué)習(xí) Fetch API / Ajax（XHR）? ES6+ 和模塊化 ? 了解變量提升、事件冒泡機(jī)制、作用域、原型、Shadow DOM、嚴(yán)格模式等概念版本控制? Git 的基本操作? 創(chuàng)建賬號并且學(xué)習(xí)使用 GitHub?? 創(chuàng)建賬號并且學(xué)習(xí)使用 GitLabWeb 安全知識?? HTTPS?? 內(nèi)容安全策略（CSP）?? 跨域資源共享?? OWASP 安全風(fēng)險(xiǎn)上面的內(nèi)容是前端最基礎(chǔ)的部分，建議多花時(shí)間，掌握好每一個(gè)知識點(diǎn)。從這開始，將進(jìn)入前端工程化的部分，你可能會接觸到很多種不同的框架，并學(xué)習(xí)使用多種的工具為自己的開發(fā)提效。包管理工具npm 和 yarn 都很好，選擇一個(gè)學(xué)習(xí)即可，他們兩是相似的? npm?? yarnCSS 構(gòu)架通過使用現(xiàn)代的 CSS 框架和 CSS-in-JS 的書寫方式，不用再擔(dān)心 CSS 的構(gòu)架問題，但熟悉 BEM 規(guī)范是一個(gè)不錯(cuò)的選擇。?? BEM，一種書寫規(guī)范? OOCSS? SMACSSCSS 預(yù)處理器以下三個(gè)可選擇一個(gè)進(jìn)行學(xué)習(xí)。?? SCSS?? PostCSS?? Less構(gòu)建工具任務(wù)執(zhí)行器? npm scripts? Gulp 代碼檢查和格式化工具?? Prettier 代碼格式化?? ESLint 代碼檢查? 模塊打包 ? Webpack?? Rollup前端框架前端框架推薦先學(xué)習(xí) React，能理解函數(shù)式編程和組件化。Vue 的特點(diǎn)是上手快，中文文檔齊全，可以選擇性的學(xué)習(xí)。? React.js ? Redux?? MobX?? Vue.js VueX?? Angular RxJSNgRx現(xiàn)代 CSS? Styled Component? CSS Module?? Styled JSX?? Emotion? Radium? 組件?? HTML 模版?? 自定義元素?? Shadow DOMCSS 框架CSS 框架有兩種，一種是基于 框架開發(fā)的應(yīng)用程序。推薦的框架有：? ?? Material UI?TailWind CSS（這里和圖片不一致，我認(rèn)為 tailwind 更值得學(xué)習(xí)）?? Chakra UI另外一只是純 CSS 框架，默認(rèn)和不和 組件一起使用。? BootStrap?? CSS?? Bulma測試在這里你需要學(xué)習(xí)使用下面的框架進(jìn)行單元、集成和功能測試。? Jest? react-testing-library? Cypress? Enzyme類型檢查器??? ? Flow上面是前端工程化的學(xué)習(xí)內(nèi)容，接下來的內(nèi)容涉及到性能、服務(wù)端渲染以及跨端，這一部分前端也叫被稱作「大前端」。PWA?? 學(xué)習(xí) PWA 中使用到的 Web API： Workers 定位通知設(shè)備方向支付、證書等等?? 計(jì)算、測量以及提高性能： PRPL 模式 RAIL 模式性能指標(biāo)學(xué)習(xí)使用 學(xué)習(xí)使用 DevTools服務(wù)端渲染? Next.js （React.js）?? Nuxt.js （Vue.js）?? Universal（Angular）?? GraphQL? Apollo?? Relay Modern?? 靜態(tài)網(wǎng)站生成? Next.js? GatsbyJS?? Nuxt.js?? Vuepress?? JekyII?? Hugo?? 移動端應(yīng)用開發(fā)? ?? Flutter?? 桌面應(yīng)用開發(fā)? Electron?? Carlo?? Proton Native?? 總結(jié)完畢，不由得感嘆前端生態(tài)真是豐富多彩，要學(xué)的東西很多，自己不懂的也很多，有些知識點(diǎn)也是淺嘗輒止。雖然有這么多的方向，但還是需要找到一個(gè)點(diǎn)能夠深挖。如果你是前端的初學(xué)者，也不要被這些框架給嚇到，學(xué)好基礎(chǔ)然后加以實(shí)踐更為重要。上面推薦的 Roadmap GitHub 倉庫里也有后端以及 DevOps 的學(xué)習(xí)路線，可以自行瀏覽，如果有時(shí)間我也會整理出一版文字版以供大家參閱。Keep Learning，持續(xù)精進(jìn)。

2.CSS書寫規(guī)范、順序和命名規(guī)則

這些是參考了國外一些文章以及我的個(gè)人經(jīng)驗(yàn)總結(jié)出來，我想對寫CSS的前端用戶來說是值得學(xué)習(xí)的。一、CSS書寫順序1.位置屬性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(, border等)5.其他(animation, 等)二、CSS書寫規(guī)范 1.使用CSS縮寫屬性 CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。2.去掉小數(shù)點(diǎn)前的“0”3.簡寫命名很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！4.16進(jìn)制顏色代碼縮寫有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗(yàn)為主。5連字符CSS選擇器命名規(guī)范1）.長名稱或詞組可以使用中橫線來為選擇器命名。2）.不建議使用“_”下劃線來命名CSS選擇器，為什么呢？輸入的時(shí)候少按一個(gè)shift鍵； 瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的） 能良好區(qū)分變量命名（JS變量命名是用“_”）6.不要隨意使用idid在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。7.為選擇器添加狀態(tài)前綴有時(shí)候可以給選擇器添加一個(gè)表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。三、CSS命名規(guī)范（規(guī)則）常用的CSS命名規(guī)則頭：header 內(nèi)容：content/container 尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center 登錄條：loginbar 標(biāo)志：logo 廣告：banner 頁面主體：main 熱點(diǎn)：hot 新聞：news 下載：download 子導(dǎo)航：subnav 菜單：menu 子菜單：submenu 搜索：search 友情鏈接： 頁腳：footer 版權(quán)：copyright 滾動：scroll 內(nèi)容：content 標(biāo)簽：tags 文章列表：list 提示信息：msg 小技巧：tips 欄目標(biāo)題：title 加入：joinus 指南：guide 服務(wù)：service 注冊：regsiter 狀態(tài)：status 投票：vote 合作伙伴：partner注釋的寫法:/* Header */ 內(nèi)容區(qū) /* End Header */id的命名:1)頁面結(jié)構(gòu)容器: container 頁頭：header 內(nèi)容：content/container 頁面主體：main 頁尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center(2)導(dǎo)航導(dǎo)航：nav 主導(dǎo)航：mainnav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航： 右導(dǎo)航： 菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary(3)功能標(biāo)志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊：register 搜索：search 功能區(qū)：shop 標(biāo)題：title 加入：joinus 狀態(tài)：status 按鈕：btn 滾動：scroll 標(biāo)籤頁：tab 文章列表：list 提示信息：msg 當(dāng)前的: current 小技巧：tips 圖標(biāo): icon 注釋：note 指南：guild 服務(wù)：service 熱點(diǎn)：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權(quán)：copyright四、注意事項(xiàng)::1.一律小寫; 2.盡量用英文; 3.不加中槓和下劃線; 4.盡量不縮寫，除非一看就明白的單詞。五、CSS樣式表文件命名主要的 master.css 模塊 module.css 基本共用 base.css 布局、版面 layout.css 主題 themes.css 專欄 columns.css 文字 font.css 表單 forms.css 補(bǔ)丁 mend.css 打印 print.css

看了以上有關(guān)2021 年前端學(xué)習(xí)路線總結(jié)，CSS書寫規(guī)范、順序和命名規(guī)則??的講解，如果還有什么疑問可以直接來電咨詢