学校web development 的project，teacher要求我们用html,css,javascript做一个杂志的网站，我基本上已经完成了网站的设计和代码，但是这个是用网站设计软件自动生成的，我用我自己的一点点知识修改了一点点；teacher需要我们给大部分的代码添加注释，html,css,javascript 都要加注释，所以其他程序员能够看得懂。代码有几万行，而且很多都是计算机自动生成，有没有自动生成注释的软件；而且我对CSS和javascript不是很懂，希望能够改一下CSS和javascript的Class,有没有什么好的方法和方便的工具,
我主要是使用bracket和它的拓展，其他json什么我都不是很懂，希望专家多多帮助
比如说我的问题就是给这个section的class能让人看的懂，还有添加注释，让他更加简洁，有没有什么好的工具和方法
<section class="u-clearfix u-grey-10 u-valign-top-lg u-valign-top-xl u-valign-top-xs u-section-3" id="sec-443a">
<div class="u-expanded-width u-palette-2-dark-3 u-shape u-shape-rectangle u-shape-1">div>
<div class="u-palette-3-base u-radius-50 u-shape u-shape-round u-shape-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">div>
<img src="images/Young-Muscular-Man-Doing-Lunges-In-Dark-Gym.jpg" alt="" class="u-image u-image-round u-radius-50 u-image-1" data-image-width="1109" data-image-height="614" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="0">
<div class="u-list u-list-1">
<div class="u-repeater u-repeater-1">
<div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-1" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-direction="" data-animation-delay="500">
<div class="u-container-layout u-similar-container u-container-layout-1"><span class="u-file-icon u-icon u-text-palette-3-base u-icon-1" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"><img src="images/7998511-4.png" alt="">span>
<p class="u-text u-text-1">BillSports makes you practice workout <span class="u-text-palette-2-base" style="font-weight: 700;">persistentlyspan>
p>
div>
div>
<div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-direction="" data-animation-delay="500">
<div class="u-container-layout u-similar-container u-container-layout-2"><span class="u-file-icon u-icon u-text-palette-3-base u-icon-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"><img src="images/1442912-5-26.png" alt="">span>
<p class="u-text u-text-2">BillSports makes you practice workout <span style="font-weight: 700;" class="u-text-palette-2-base">amusinglyspan>
p>
div>
div>
<div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-3" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-direction="" data-animation-delay="500">
<div class="u-container-layout u-similar-container u-container-layout-3"><span class="u-file-icon u-icon u-text-palette-3-base u-icon-3" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"><img src="images/1442912-5-26.png" alt="">span>
<p class="u-text u-text-3">BillSports makes you practice workout <span class="u-text-palette-2-base" style="font-weight: 700;">breezilyspan>
p>
div>
div>
div>
div>
section>
能够运行出一个挺好的网站，网址是billsports.nicepage.io，需要VPN才能上去，如果可以的话去看一下
我用Bracket来解决这个问题，也用了许多bracket的拓展，但是效果不是很理想，希望专家能够提供一些方便的方法和工具（最好是bracket的），我现在只用了beautify来美化html,css和javascript的格式，希望专家能提供更方便的工具(比如自动注释，方便更改Class,加上javascript even listener的工具）
1，HTML, CSS, Javascript 注释 (最好有自动生成的工具）
2，HTML的class，CSS的class, 改到让人类能够看的懂，我现在不是很懂CSS, 有没有快速改CSS的工具
3，我的javascript也是在nicepage的网站上自动生成的，有没有快速写javascript eventlistener 的工具？我想理解这个网站的javascript,也想自己写一点简单的javascript event handler或者listener
4，所有工具最好都是bracket有关，其他的也可以，谢谢专家了
这种自动生成的css js 名称、方法啥的都具有软件特色，一般不建议说对他做什么修改啥的，因为太烦了，有这时间都写完自己的代码了，你自己写的 css 样式，你会把想赋予这个元素的样式都写进去，但是软件之类生成要考虑复用性，所以有些 类名 对应的样式 只写了一点点，这样复用率高， 比如 你代码里 u-text u-text-3 可能就是 写了一个字体 以及大小 或是颜色，不仅可以用在这个元素上 还阔以用在其他元素上。所以不太有什么好工具能够达到你的预期。
1.注释都是人为手动加上去的
2.class里面的都在css文件里面能够找到，class是类选择器，css就是修饰网页样式美化的东西
3.对于学过基础的人来说，这没什么的，想要修改什么，在网页右键审查元素，找到对应的css，然后修改样式
4.js使网页更加具有动态化，通常和css进行相关联。
5.总之，建议你学习基础，如果不懂基础，再简单的你可能也看不懂，但对有基础的人来说这没什么