diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 06be044a..1aa26384 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -22,20 +22,20 @@ function yomichan() {
 }
 
 function optionsToForm(opts) {
-    $('#activateOnStartup').prop('checked', opts.activateOnStartup);
-    $('#enableAnkiConnect').prop('checked', opts.enableAnkiConnect);
-    $('#loadEnamDict').prop('checked', opts.loadEnamDict);
-    $('#scanLength').val(opts.scanLength);
-    $('#selectMatchedText').prop('checked', opts.selectMatchedText);
+    $('#activate-on-startup').prop('checked', opts.activateOnStartup);
+    $('#enable-anki-connect').prop('checked', opts.enableAnkiConnect);
+    $('#load-enamdict').prop('checked', opts.loadEnamDict);
+    $('#scan-length').val(opts.scanLength);
+    $('#select-matched-text').prop('checked', opts.selectMatchedText);
 }
 
 function formToOptions() {
     return sanitizeOptions({
-        activateOnStartup: $('#activateOnStartup').prop('checked'),
-        enableAnkiConnect: $('#enableAnkiConnect').prop('checked'),
-        loadEnamDict:      $('#loadEnamDict').prop('checked'),
-        scanLength:        $('#scanLength').val(),
-        selectMatchedText: $('#selectMatchedText').prop('checked')
+        activateOnStartup: $('#activate-on-startup').prop('checked'),
+        enableAnkiConnect: $('#enable-anki-connect').prop('checked'),
+        loadEnamDict:      $('#load-enamdict').prop('checked'),
+        scanLength:        $('#scan-length').val(),
+        selectMatchedText: $('#select-matched-text').prop('checked')
     });
 }
 
@@ -51,7 +51,7 @@ function updateAnkiFormVis(opts) {
 function populateAnkiDeckAndModel() {
     const yomi = yomichan();
 
-    const ankiDeck = $('.ankiDeck');
+    const ankiDeck = $('.anki-deck');
     ankiDeck.find('option').remove();
     yomi.api_getDeckNames({callback: (names) => {
         if (names !== null) {
@@ -59,12 +59,12 @@ function populateAnkiDeckAndModel() {
         }
     }});
 
-    const ankiModel = $('.ankiModel');
+    const ankiModel = $('.anki-model');
     ankiModel.find('option').remove();
     yomi.api_getModelNames({callback: (names) => {
         if (names !== null) {
             names.forEach((name) => ankiModel.append($('<option/>', {value: name, text: name})));
-            $('.ankiModel').trigger('change');
+            $('.anki-model').trigger('change');
         }
     }});
 
@@ -85,14 +85,14 @@ function onModelChanged() {
     }
 
     yomichan().api_getModelFieldNames({modelName, callback: (names) => {
-        const table = $(this).closest('.tab-pane').find('.ankiFields');
+        const table = $(this).closest('.tab-pane').find('.anki-fields');
         table.find('tbody').remove();
 
         const body = $('<tbody>');
         names.forEach((name) => {
             const row = $('<tr>');
             row.append($('<td>').text(name));
-            row.append($('<input>', {class: 'ankiFieldValue form-control'}).data('field', name));
+            row.append($('<input>', {class: 'anki-field-value form-control'}).data('field', name));
             body.append(row);
         });
 
@@ -105,7 +105,7 @@ $(document).ready(() => {
         optionsToForm(opts);
 
         $('input').on('input paste change', onOptionsChanged);
-        $('.ankiModel').change(onModelChanged);
+        $('.anki-model').change(onModelChanged);
 
         updateAnkiFormVis(opts);
     });
diff --git a/ext/bg/options.html b/ext/bg/options.html
index 6f4bd8a8..8aaacd04 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -29,14 +29,14 @@
 
                 <form class="form-horizontal">
                     <div class="form-group">
-                        <label for="scanLength" class="control-label col-sm-2">Scan length</label>
-                        <div class="col-sm-10"><input type="number" value="20" min="1" id="scanLength" class="form-control"></div>
+                        <label for="scan-length" class="control-label col-sm-2">Scan length</label>
+                        <div class="col-sm-10"><input type="number" value="20" min="1" id="scan-length" class="form-control"></div>
                     </div>
 
                     <div class="form-group">
                         <div class="col-sm-offset-2 col-sm-10">
                             <div class="checkbox">
-                                <label class="control-label"><input type="checkbox" id="activateOnStartup"> Activate on startup</label>
+                                <label class="control-label"><input type="checkbox" id="activate-on-startup"> Activate on startup</label>
                             </div>
                         </div>
                     </div>
@@ -44,7 +44,7 @@
                     <div class="form-group">
                         <div class="col-sm-offset-2 col-sm-10">
                             <div class="checkbox">
-                                <label class="control-label"><input type="checkbox" id="loadEnamdict"> Load <a href="http://www.edrdg.org/enamdict/enamdict_doc.html">ENAMDICT</a> (requires restart)</label>
+                                <label class="control-label"><input type="checkbox" id="load-enamdict"> Load <a href="http://www.edrdg.org/enamdict/enamdict_doc.html">ENAMDICT</a> (requires restart)</label>
                             </div>
                         </div>
                     </div>
@@ -52,7 +52,7 @@
                     <div class="form-group">
                         <div class="col-sm-offset-2 col-sm-10">
                             <div class="checkbox">
-                                <label class="control-label"><input type="checkbox" id="selectMatchedText" checked> Select matched text</label>
+                                <label class="control-label"><input type="checkbox" id="select-matched-text" checked> Select matched text</label>
                             </div>
                         </div>
                     </div>
@@ -60,7 +60,7 @@
                     <div class="form-group">
                         <div class="col-sm-offset-2 col-sm-10">
                             <div class="checkbox">
-                                <label class="control-label"><input type="checkbox" id="enableAnkiConnect"> Enable <a href="https://foosoft.net/projects/yomichan">AnkiConnect</a></label>
+                                <label class="control-label"><input type="checkbox" id="enable-anki-connect"> Enable <a href="https://foosoft.net/projects/yomichan">AnkiConnect</a></label>
                             </div>
                         </div>
                     </div>
@@ -80,20 +80,20 @@
                     <div class="tab-content">
                         <div id="vocab" class="tab-pane fade in active">
                             <div class="form-group">
-                                <label class="col-sm-2 control-label" for="ankiVocabDeck">Deck</label>
+                                <label class="col-sm-2 control-label" for="anki-vocab-deck">Deck</label>
                                 <div class="col-sm-10">
-                                    <select class="form-control ankiDeck" id="ankiVocabDeck"></select>
+                                    <select class="form-control anki-deck" id="anki-vocab-deck"></select>
                                 </div>
                             </div>
 
                             <div class="form-group">
-                                <label class="col-sm-2 control-label" for="ankiVocabModel">Model</label>
+                                <label class="col-sm-2 control-label" for="anki-vocab-model">Model</label>
                                 <div class="col-sm-10">
-                                    <select class="form-control ankiModel" id="ankiVocabModel"></select>
+                                    <select class="form-control anki-model" id="anki-vocab-model"></select>
                                 </div>
                             </div>
 
-                            <table class="table table-bordered ankiFields">
+                            <table class="table table-bordered anki-fields">
                                 <thead>
                                     <tr>
                                         <th>Field</th>
@@ -106,16 +106,16 @@
                         </div>
                         <div id="kanji" class="tab-pane fade">
                             <div class="form-group">
-                                <label class="col-sm-2 control-label" for="ankiKanjiDeck">Deck</label>
+                                <label class="col-sm-2 control-label" for="anki-kanji-deck">Deck</label>
                                 <div class="col-sm-10">
-                                    <select class="form-control ankiDeck" id="ankiKanjiDeck"></select>
+                                    <select class="form-control anki-deck" id="anki-kanji-deck"></select>
                                 </div>
                             </div>
 
                             <div class="form-group">
-                                <label class="col-sm-2 control-label" for="ankiKanjiModel">Model</label>
+                                <label class="col-sm-2 control-label" for="anki-kanji-model">Model</label>
                                 <div class="col-sm-10">
-                                    <select class="form-control ankiModel" id="ankiKanjiModel"></select>
+                                    <select class="form-control anki-model" id="anki-kanji-model"></select>
                                 </div>
                             </div>