CSS代码应添加在HTML文件中还是外部JavaScript文件顶部？

这段CSS代码绝对不要放在外部JavaScript文件顶部，两种正确放置位置按优先级排序如下：

• 优先放到你当前正在使用的外部CSS文件中：直接把两段类样式规则追加到这个外部CSS文件的任意位置即可，不需要修改你现有JS逻辑。你写的classList.toggle/classList.remove方法本质是给元素增删class类名，只要对应类名的样式规则在页面加载时被浏览器解析，效果就能正常生效，这也是最符合结构、样式、逻辑分离规范的做法。
• 如果暂时不方便修改外部CSS文件，可以写入HTML文件：必须放在HTML的<head>标签内，用<style>标签包裹，不要直接零散插在页面正文里，参考写法：

<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <!-- 其他外部资源引用 -->
  <style>
    .mystyle {
      background-color: green;
      color: white;
    }
    .mystyle1 {
      background-color: red;
      color: white;
    }
  </style>
</head>

注意：不要把纯CSS代码直接写在JS文件里，浏览器解析JS文件时只会把内容当成JS逻辑执行，不会识别成CSS样式规则，写了也完全不生效，除非额外写JS动态创建<style>标签注入样式，属于多余操作完全没必要。

另外你贴出的Script.js代码里，myFunction函数末尾缺少闭合的大括号}，记得补上否则运行会报语法错误。

内容的提问来源于stack exchange，提问作者IU Kottahchchi