2019年前端最佳实践？

Question

我发现网上很多前端方面的教程和文章（例如w3cschool，菜鸟教程，慕课网等）都仅仅是对基础知识做讲解，具体到实践环节上还有很多细节没有交代清楚，题主本人还是大学生未参加过工作，不清楚实际开发中的最佳实践有哪些，下面整理了一些常见问题，欢迎大家帮忙补充并且提供解答，感谢！！！

• 如果是纯电脑端web页面，整个web页面的container宽度该如何选择？需要考虑用户浏览器在不同宽度下的表现吗？（换句说法，在电脑端也有可能出现用户拉伸浏览器，或者使用操作系统提供的缩放机制，导致显示器物理宽度像素值和实际情况不一样，是否要考虑这种情况下的响应式布局问题？）
• 字体大小是使用px还是em和rem？我还看到有些人不仅仅是字体使用em单位，甚至连width和height等也使用em单位，这样有什么优点和缺点吗？最佳实践应该是如何选择单位呢？如果使用rem和em的话，父元素的font-size又应该根据什么来选择？
• web语义化有必要做吗？nav，section，header，footer这些标签实际有人用吗？（我特意观察了BAT三家的网站首页，均没有使用，都是清一色div，可能是照顾到浏览器兼容性问题？）如果我的html并不需要让用户阅读，那用了web语义化有什么实际意义吗？对SEO或者无障碍阅读设备有好处吗？
• 如果不考虑旧浏览器兼容性问题，页面布局使用flex是当前2019年最好的选择吗？
• 我的页面并无过多交互，并不打算设计成完全前后端分离，但是有大量公共组件可能要跨页面使用，这种需求场景有什么框架可以简化前端开发工作吗？（我了解了一下，react对于轻量级组件封装有很好的支持性，我这种场景可以使用吗？或者还有什么比react更加适合我这种情况的框架？）
• 我只在SPA上用过webpack。我现在并不是做SPA，但是也有可能需要使用到打包和构建，是否意味着我针对每个页面每个html都要写一个webpack配置？或者还有其他更好的构建方式吗？

Answer 1

1. 这个问题要根据不同场景下不同需求来灵活应变。比较常见的做法，是定义一个中间宽度，通常这个宽度是1200PX左右，然后居中显示两边留白就行了，一般现在绝大对说的电脑设备都会比这个宽度大的，然后中间宽度就直接按照设计稿的尺寸写死就行了，当然，设计稿也需要是这种中间宽度的才行。如果不是中间宽度的设计稿，那就需要具体情况具体应对的。
2. 字体的话，也要看是移动端还是PC端，PC端通常是PX直接定好，极少会用em或rem来定义。em和rem使用比较多的场景是在移动端，因为移动端不仅仅是手机端，还有可能是iPad端等，用rem等相对宽度，可以灵活的根据根字体的font-size来显示，而根字体的font-size又可以利用媒体查询来动态的根据设备屏幕宽度来设置，以达到响应式的目的。
3. web语义化是一把双刃剑，用得好了，可以更好的方便搜索引擎收录、视障用户的使用等等，用不好的话，会增加开发人员维护代码的成本。所以如果你对语义化的理解不是那么好，不建议在开发中使用语义化标签。再一个，你也提到了让用户阅读的场景，的确，这种场景非常需要语义化方便浏览器生成阅读列表和目录结构等等。总结来说，就是合适的场景用语义化，其他的就直接清一色div完事儿。至于SEO优化，也不仅仅只有语义化这一个途径，非常多。
4. 布局，我并不提倡一个布局走天下这种思想，flex也不是万能的，也会有很多的局限性，我比较推崇的思想就是，合适的场景用合适的布局。此外，grid也是个很不错的布局方式，可以多了解一下。
5. 你这个业务场景介绍的太模糊了……首先你的背景是不完全的前后端分离，但是又要复用大量公共组件，那你不妨试试next，react的SSR框架，用的就是react的语法。
6. 首先，webpack要解决的问题是多资源打包构建的问题，并不是单单解决SPA单页面应用的问题。你会问出这个问题，证明你对webpack的配置一点都不了解，建议你多分析一下著名脚手架生成出来的webpack配置，如create-react-app、vue-cli等等，看看他们是怎么配置webpack的，都用了哪些有用的、实用的插件。多页面webpack就意味着多入口，其中核心插件html-webpack-plugin了解一下。我的一些拙见，看的顺眼，别忘了给个赞哦。vue-cli新建的项目webpack设置涉及的大部分插件整理

---

说实话，你提的这些问题，每一个都够写一篇文章来详细讨论了，因为你提的比较集中，我也就草草答了几句，如有觉得不妥之处，欢迎直接评论或者私信我一起探讨。