北京web*端css书写的先后顺序，2021 年*端学习路线总结

现在web前端也是一个非常热门的行业，想要学习web前端开发的同学请看这里北京web前端css书写的先后顺序 ，通过对2021 年前端学习路线总结，CSS书写规范、顺序和命名规则?? 的了解，希望以上信息可以帮助到您

1.2021 年前端学习路线总结

这是在 GitHub 看到一个很不错的前端学习路线图（roadmap），从前端基础到前端工程化，再到跨端，都有知识点的覆盖，非常推荐阅读。图下面是我翻译的一个文字版，可以先看图再看文字。✅ 表示个人推荐学习✳️ 表示可选择学习❇️ 表示不需要严格按照路线的先后顺序，可在任何时间补充这一块的知识❎ 表示个人不再推荐计算机网络掌握计算机网络的基础是一名前端工程师的基本素养，建议先学习以下的知识：✅ Internet 如何工作✅ HTTP 协议✅ 浏览器工作机制✅ DNS 及其运行机制✅ 了解域名、网站托管HTML✅ 学习 HTML 基础，标签、元素、表单验证等等✳️ 语义化标签✳️ 了解 Web 无障碍（）✳️ 学习 SEO 优化CSS✅ 学习 CSS 基础✅ 制作布局：浮动、定位、显示、盒模型、网格布局、弹性布局✅ 响应式设计和媒体查询（@media）✅ 结合 HTML 制作一个简单的网页作为最佳实践✅ 学习语法和基本结构✅ 学习操作 DOM✅ 学习 Fetch API / Ajax（XHR）✅ ES6+ 和模块化 ✅ 了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念版本控制✅ Git 的基本操作✅ 创建账号并且学习使用 GitHub✳️ 创建账号并且学习使用 GitLabWeb 安全知识❇️ HTTPS❇️ 内容安全策略（CSP）❇️ 跨域资源共享❇️ OWASP 安全风险上面的内容是前端最基础的部分，建议多花时间，掌握好每一个知识点。从这开始，将进入前端工程化的部分，你可能会接触到很多种不同的框架，并学习使用多种的工具为自己的开发提效。包管理工具npm 和 yarn 都很好，选择一个学习即可，他们两是相似的✅ npm✳️ yarnCSS 构架通过使用现代的 CSS 框架和 CSS-in-JS 的书写方式，不用再担心 CSS 的构架问题，但熟悉 BEM 规范是一个不错的选择。❇️ BEM，一种书写规范❎ OOCSS❎ SMACSSCSS 预处理器以下三个可选择一个进行学习。❇️ SCSS❇️ PostCSS❇️ Less构建工具任务执行器✅ npm scripts❎ Gulp 代码检查和格式化工具❇️ Prettier 代码格式化❇️ ESLint 代码检查❎ 模块打包 ✅ Webpack✳️ Rollup前端框架前端框架推荐先学习 React，能理解函数式编程和组件化。Vue 的特点是上手快，中文文档齐全，可以选择性的学习。✅ React.js ✅ Redux✳️ MobX✳️ Vue.js VueX✳️ Angular RxJSNgRx现代 CSS✅ Styled Component✅ CSS Module✳️ Styled JSX✳️ Emotion❎ Radium❎ 组件❇️ HTML 模版❇️ 自定义元素❇️ Shadow DOMCSS 框架CSS 框架有两种，一种是基于 框架开发的应用程序。推荐的框架有：✅ ✳️ Material UI✅TailWind CSS（这里和图片不一致，我认为 tailwind 更值得学习）✳️ Chakra UI另外一只是纯 CSS 框架，默认和不和 组件一起使用。✅ BootStrap✳️ CSS✳️ Bulma测试在这里你需要学习使用下面的框架进行单元、集成和功能测试。✅ Jest✅ react-testing-library✅ Cypress✅ Enzyme类型检查器✅✳️ ❎ Flow上面是前端工程化的学习内容，接下来的内容涉及到性能、服务端渲染以及跨端，这一部分前端也叫被称作「大前端」。PWA❇️ 学习 PWA 中使用到的 Web API： Workers 定位通知设备方向支付、证书等等❇️ 计算、测量以及提高性能： PRPL 模式 RAIL 模式性能指标学习使用 学习使用 DevTools服务端渲染✅ Next.js （React.js）✳️ Nuxt.js （Vue.js）✳️ Universal（Angular）❇️ GraphQL✅ Apollo✳️ Relay Modern❇️ 静态网站生成✅ Next.js✅ GatsbyJS✳️ Nuxt.js✳️ Vuepress✳️ JekyII✳️ Hugo❇️ 移动端应用开发✅ ❇️ Flutter❇️ 桌面应用开发✅ Electron✳️ Carlo✳️ Proton Native❇️ 总结完毕，不由得感叹前端生态真是丰富多彩，要学的东西很多，自己不懂的也很多，有些知识点也是浅尝辄止。虽然有这么多的方向，但还是需要找到一个点能够深挖。如果你是前端的初学者，也不要被这些框架给吓到，学好基础然后加以实践更为重要。上面推荐的 Roadmap GitHub 仓库里也有后端以及 DevOps 的学习路线，可以自行浏览，如果有时间我也会整理出一版文字版以供大家参阅。Keep Learning，持续精进。

2.CSS书写规范、顺序和命名规则

这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。一、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书写规范 1.使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。2.去掉小数点前的“0”3.简写命名很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！4.16进制颜色代码缩写有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。5连字符CSS选择器命名规范1）.长名称或词组可以使用中横线来为选择器命名。2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分变量命名（JS变量命名是用“_”）6.不要随意使用idid在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。7.为选择器添加状态前缀有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。三、CSS命名规范（规则）常用的CSS命名规则头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接： 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签：tags 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guide 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner注释的写法:/* Header */ 内容区 /* End Header */id的命名:1)页面结构容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center(2)导航导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航： 右导航： 菜单：menu 子菜单：submenu 标题: title 摘要: summary(3)功能标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：register 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标籤页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright四、注意事项::1.一律小写; 2.尽量用英文; 3.不加中槓和下划线; 4.尽量不缩写，除非一看就明白的单词。五、CSS样式表文件命名主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css

看了以上有关2021 年前端学习路线总结，CSS书写规范、顺序和命名规则??的讲解，如果还有什么疑问可以直接来电咨询