最近，白龙接到一个用户需求，他希望把写好的前端页面接入drupal8/9。
简单的分析了一下静态页面，猜测，这个前端可能是个新手，没经验，开发不规范，值得吐槽的点实在太多。
一、样式随便写
看了这个哥们写的前端页面，也是无语了。CSS搞的到处都是，head区域、body内、元素中、外部文件，但凡能想到的地方，都要放点。
这样不规范的操作，直接导致的结果是接入drupal时，部分前端内容加载不出来。
正确的做法是，所有CSS代码都放到外部文件中，静态页中用link引入即可。尤其是，CSS代码不能放到head区域，因为twig模板中，是会删除body之外（包括body）的所有内容的，那么head区域的css就失效了。
二、JS任意放
再看看这个兄弟的JS，与CSS的玩法如出一辙，head区域、body内、元素中、外部文件等地方，到处躺着JS。
无奈！！结果可想而知，前端的部分动态内容加载不出来，成了必然。
正确的做法是，所有JS代码都放到外部文件中，静态页中用script引入即可。尤其是，JS代码不能放到head区域，因为twig模板中，是会删除body之外（包括body）的所有内容的，那么head区域的JS效果就失效了。
三、图片设置乱
图片用img标签去布局，无可厚非，但是你还要在img上加载个class就让人无语了。接入drupal时，会直接用变量替换掉整个img标签的，相应的class也就覆写了，然后前端又不正常了，接着你又得重新在drupal下调试CSS，增加了工作量，影响了效率，耽误了进度。
这是不了解drupal机制造成的结果，这是技能单一留下的隐患。
再者，明明一张很大的图片，用img标签来布局不是很完美吗？但是，这兄弟偏偏不，要用背景去搞这个大图片，且不说drupal能不能识别这个图片，单单正常加载这张图，服务器要消耗多少资源？花费多少时间？用户能等那么久吗？
此外，基于drupal的机制，图片的路径，在twig模板中要用{{base_path}}这样的变量来表示根目录，但是在drupal后台制作静态区块时，却要用绝对路径才能显示图片，稍不留意，忽略这个细节，图片就加载不出来。
所以呢，drupal下，写前端时，尽量减少大图片用背景来实现的概率，再加上其它代码的不规范开发，可能导致背景图片加载不出来，或者加载速度龟速。
四、功能没有模块化
这一步的不规范，对后期开发效果的提升是有致命影响的，明明一段代码迁移过去，另外一个地方的类似功能就能实现，你却搞一段代码，不同的类来控制。增加了加载时间，降低了工作效率，影响了用户体验……，无力吐槽！！！
五、代码冗余严重
这个地方涉及的内容太多，简单举个例子来说。譬如一个带日期的新闻列表，正常的做法ul/li/a标签就实现了吧：ul/li做列表，一个a标签放置标题，一个标签放置日期，是不是很给力？
这兄弟偏偏不，ul/li用上，然后a标签再包裹2个div（一个显示标题、一个显示日期），增加了元素，增加了CSS，这都是小事。
重点是，drupal下，是会自动加载a标签的，你2个div外面包裹的a标签可能是无效的，而且还会影响drupal自动加载CSS，进而导致前端页面不正常显示，必须重新手动覆写CSS才能解决。
因此，元素布局这块，尽量简单，没用的东西直接删除，才能迎合drupal的机制，提高开发效率。
六、body中增加了类
按照drupal的要求，body（包括body）之外的所有元素都要删除，因此，在body中增加的类，是会被覆写的。
正常的做法是，body元素中不要加class，也不要加id，更不要在静态页面添加style之类的样式。
七、框架尽量用bootstrap
这个客户用的layui框架，接入drupal时，出现了部分CSS、JS无法成功加载的异常，通过整理CSS/JS，也解决了这个问题，但是却耗费了大量的时间、精力。Drupal是自带bootstrap的，可以直接使用，提高开发效率。
总结下来，就是，css/js要统一放到外部文件，方便drupal通过库直接加载；图片用img布局，杜绝对元素添加background图片背景属性，尤其是大图片；功能模块化布局；冗余元素坚决删除；body不要添加；推荐使用系统自带的bootstrapUI框架。