diff --git a/.github/workflows/lint-css.yml b/.github/workflows/lint-css.yml
new file mode 100644
index 000000000..d3bac1e27
--- /dev/null
+++ b/.github/workflows/lint-css.yml
@@ -0,0 +1,36 @@
+name: CSS Linting
+on:
+  push:
+    paths:
+      - "package*.json"
+      - ".stylelint*"
+      - "**/*.css"
+      - ".github/workflows/lint-css.yml"
+      - "!common/**"
+
+  pull_request:
+    paths:
+      - "package*.json"
+      - ".stylelint*"
+      - "**/*.css"
+      - ".github/workflows/lint-css.yml"
+      - "!common/**"
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+
+      - uses: xt0rted/stylelint-problem-matcher@v1
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Stylelint
+        run: npm run lint:css
diff --git a/.stylelintrc b/.stylelintrc
index 1796dab3a..c0864c943 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,6 +1,14 @@
 {
+  "extends": "stylelint-config-standard",
   "rules": {
-    "media-feature-name-no-unknown": [true,
-    "ignoreMediaFeatureNames": ["forced-colors"] ]
+    "media-feature-name-no-unknown": [
+      true,
+      {
+        "ignoreMediaFeatureNames": [
+          "forced-colors"
+        ]
+      }
+    ],
+    "no-descending-specificity": null
   }
 }
diff --git a/.stylelintrc.js b/.stylelintrc.js
deleted file mode 100644
index e92d12fe4..000000000
--- a/.stylelintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['stylelint-config-standard']
-};
diff --git a/.travis.yml b/.travis.yml
index cacaf643c..10488f331 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -16,9 +16,6 @@ jobs:
     - env: ALLOW_FAILURE=true
 
   include:
-    - stage: Lint
-      name: CSS Linting
-      script: npm run lint:css
     - stage: Lint
       name: JS Linting
       script: npm run lint:es
diff --git a/examples/carousel/css/carousel-prev-next.css b/examples/carousel/css/carousel-prev-next.css
index d85789b04..72bce6b06 100644
--- a/examples/carousel/css/carousel-prev-next.css
+++ b/examples/carousel/css/carousel-prev-next.css
@@ -21,7 +21,7 @@ img.reload {
   padding: 5px;
 }
 
-.carousel .carousel-items.focus  {
+.carousel .carousel-items.focus {
   padding: 2px;
   border: solid 3px #005a9c;
 }
@@ -48,10 +48,6 @@ img.reload {
 
 .carousel .carousel-item .carousel-caption a {
   cursor: pointer;
-}
-
-
-.carousel .carousel-item .carousel-caption a {
   text-decoration: underline;
   color: #fff;
   font-weight: 600;
@@ -62,7 +58,6 @@ img.reload {
   display: inline-block;
   margin: 0;
   padding: 6px;
-  display: inline-block;
   background-color: rgba(0, 0, 0, 0.65);
   border-radius: 5px;
   border: 0 solid transparent;
@@ -78,6 +73,8 @@ img.reload {
   border: 2px solid #fff;
   background-color: rgba(0, 0, 0, 1);
   outline: none;
+  border-width: 2px solid #fff;
+  color: #fff;
 }
 
 .carousel .carousel-item .carousel-caption p {
@@ -112,6 +109,12 @@ img.reload {
 .carousel .controls button {
   position: absolute;
   z-index: 10;
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  outline: none;
 }
 
 .carousel .controls button.previous {
@@ -122,20 +125,8 @@ img.reload {
   right: 18px;
 }
 
-
 /* SVG Controls */
 
-
-.carousel .controls button {
-  flex: 0 0 auto;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  outline: none;
-  z-index: 10;
-}
-
 .carousel .controls svg .background {
   stroke: black;
   fill: black;
@@ -171,7 +162,6 @@ img.reload {
   stroke: white;
 }
 
-
 .carousel .controls svg polygon {
   fill: white;
   stroke: white;
@@ -204,7 +194,6 @@ img.reload {
   height: 36px;
 }
 
-
 .carousel.carousel-moreaccessible .controls button.previous {
   right: 60px;
 }
@@ -214,8 +203,8 @@ img.reload {
 }
 
 .carousel-moreaccessible .carousel-items,
-.carousel-moreaccessible .carousel-items.focus  {
-  padding: 0px;
+.carousel-moreaccessible .carousel-items.focus {
+  padding: 0;
   border: none;
 }
 
@@ -258,15 +247,6 @@ img.reload {
   border-radius: 5px;
 }
 
-.carousel .carousel-item .carousel-caption a:focus {
-  padding: 4px;
-  border-width: 2px solid #fff;
-  background-color: rgba(0, 0, 0, 1);
-  color: #fff;
-  outline: none;
-}
-
-
 .carousel-moreaccessible .carousel-item .carousel-caption span.contrast,
 .carousel-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
   background-color: transparent;
@@ -303,4 +283,3 @@ img.reload {
   left: 0;
   padding: 0.25em 0.25em 0;
 }
-
diff --git a/examples/carousel/css/carousel-tablist.css b/examples/carousel/css/carousel-tablist.css
index 064dde0d4..bc139c338 100644
--- a/examples/carousel/css/carousel-tablist.css
+++ b/examples/carousel/css/carousel-tablist.css
@@ -21,7 +21,7 @@ img.reload {
   padding: 5px;
 }
 
-.carousel-tablist .carousel-items.focus  {
+.carousel-tablist .carousel-items.focus {
   padding: 2px;
   border: solid 3px #005a9c;
 }
@@ -73,6 +73,8 @@ img.reload {
   border: 2px solid #eee;
   background-color: rgba(0, 0, 0, 1);
   outline: none;
+  border-width: 2px solid #fff;
+  color: #fff;
 }
 
 .carousel-tablist .carousel-item .carousel-caption p {
@@ -226,7 +228,7 @@ img.reload {
 .carousel-tablist [role="tab"]:focus circle.border {
   display: block;
   fill: #005a9c;
-  stroke: #ffffff;
+  stroke: #fff;
 }
 
 .carousel-tablist [role="tablist"].focus circle.tab-background {
@@ -261,10 +263,9 @@ img.reload {
   border-radius: 5px;
 }
 
-
 .carousel-tablist-moreaccessible .carousel-items,
-.carousel-tablist-moreaccessible .carousel-items.focus  {
-  padding: 0px;
+.carousel-tablist-moreaccessible .carousel-items.focus {
+  padding: 0;
   border: none;
 }
 
@@ -307,15 +308,6 @@ img.reload {
   border-radius: 5px;
 }
 
-.carousel-tablist .carousel-item .carousel-caption a:focus {
-  padding: 4px;
-  border-width: 2px solid #fff;
-  background-color: rgba(0, 0, 0, 1);
-  color: #fff;
-  outline: none;
-}
-
-
 .carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast,
 .carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
   background-color: transparent;
diff --git a/examples/combobox/css/combobox-datepicker.css b/examples/combobox/css/combobox-datepicker.css
index 589768178..5370b4edf 100644
--- a/examples/combobox/css/combobox-datepicker.css
+++ b/examples/combobox/css/combobox-datepicker.css
@@ -5,17 +5,14 @@
 
 .combobox-datepicker .group {
   display: inline-flex;
+  position: relative;
+  width: 12.125rem;
 }
 
 .combobox-datepicker label {
   display: block;
 }
 
-.combobox-datepicker .group {
-  position: relative;
-  width: 12.125rem;
-}
-
 .combobox-datepicker .group input,
 .combobox-datepicker .group button {
   background-color: white;
@@ -62,7 +59,7 @@
 
 .combobox-datepicker .group.focus input,
 .combobox-datepicker .group.focus button {
-  background-color: #DEF;
+  background-color: #def;
 }
 
 .combobox-datepicker .group polygon {
@@ -123,6 +120,9 @@
 
 .combobox-datepicker .dates {
   width: 320px;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 1em;
 }
 
 .combobox-datepicker .prev-year,
@@ -183,7 +183,6 @@
   border: 1px solid black;
 }
 
-
 .combobox-datepicker .fa-calendar-alt {
   color: hsl(216, 89%, 51%);
 }
@@ -194,12 +193,6 @@
   text-align: center;
 }
 
-.combobox-datepicker .dates {
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 1em;
-}
-
 .combobox-datepicker .dates th,
 .combobox-datepicker .dates td {
   text-align: center;
@@ -220,7 +213,6 @@
   background: #eee;
 }
 
-
 .combobox-datepicker .dates td[aria-selected] {
   padding: 1px;
   border: 2px dotted black;
diff --git a/examples/combobox/css/select-only.css b/examples/combobox/css/select-only.css
index 6eeaf22e7..cfb8fc0e6 100644
--- a/examples/combobox/css/select-only.css
+++ b/examples/combobox/css/select-only.css
@@ -60,7 +60,7 @@
   border-radius: 0 0 4px 4px;
   display: none;
   max-height: 300px;
-  overflow-y:scroll;
+  overflow-y: scroll;
   left: 0;
   position: absolute;
   top: 100%;
@@ -100,4 +100,4 @@
   top: 50%;
   transform: translate(0, -50%) rotate(45deg);
   width: 8px;
-}
\ No newline at end of file
+}
diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index 89b43d761..180e85971 100644
--- a/examples/dialog-modal/css/datepicker-dialog.css
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -33,7 +33,7 @@
   top: 0.25em;
   margin: 0;
   padding: 4px;
-  border: 0px solid #005a9c;
+  border: 0 solid #005a9c;
   background-color: white;
   border-radius: 5px;
 }
@@ -45,18 +45,18 @@
 }
 
 .datepicker .fa-calendar-alt {
-    color: hsl(216, 89%, 51%);
+  color: hsl(216, 89%, 51%);
 }
 
 .datepicker button.icon:focus {
   outline: none;
   padding: 2px;
   border-width: 2px;
-  background-color: #DEF;
+  background-color: #def;
 }
 
 .datepicker input:focus {
-  background-color: #DEF;
+  background-color: #def;
   outline: 2px solid #005a9c;
   outline-offset: 1px;
 }
@@ -223,7 +223,6 @@
   border: 1px solid rgb(100, 100, 100);
 }
 
-
 .datepicker-dialog table.dates td[aria-selected] {
   padding: 1px;
   border: 2px dotted rgb(100, 100, 100);
@@ -239,7 +238,6 @@
   color: white;
 }
 
-
 .datepicker-dialog .dialog-message {
   padding-top: 0.25em;
   padding-left: 1em;
diff --git a/examples/menubar/css/menubar-editor.css b/examples/menubar/css/menubar-editor.css
index 01f257cbe..edcaa3cca 100644
--- a/examples/menubar/css/menubar-editor.css
+++ b/examples/menubar/css/menubar-editor.css
@@ -54,7 +54,7 @@
 
 .menubar-editor [role="menubar"] > li > [role="menuitem"][aria-expanded="true"]::after {
   content: url('../images/up-arrow-focus.svg');
-  }
+}
 
 .menubar-editor [role="menubar"] [role="menu"] {
   display: none;
@@ -81,7 +81,7 @@
 .menubar-editor [role="menubar"] [role="separator"] {
   padding: 6px;
   background-color: #eee;
-  border: 0px solid #eee;
+  border: 0 solid #eee;
   color: black;
 }
 
@@ -124,10 +124,8 @@
   padding-right: 3px;
 }
 
-
 /* focus and hover styling */
 
-
 .menubar-editor [role="menubar"] [role="menuitem"]:focus,
 .menubar-editor [role="menubar"] [role="menuitemcheckbox"]:focus,
 .menubar-editor [role="menubar"] [role="menuitemradio"]:focus {
@@ -148,7 +146,6 @@
   padding-right: 3px;
 }
 
-
 .menubar-editor [role="menubar"] [role="menuitem"]:hover {
   padding: 4px;
   border: 2px solid #034575;
diff --git a/examples/menubar/css/menubar-navigation.css b/examples/menubar/css/menubar-navigation.css
index 90b8f004b..54361e90c 100644
--- a/examples/menubar/css/menubar-navigation.css
+++ b/examples/menubar/css/menubar-navigation.css
@@ -22,7 +22,7 @@
   position: relative;
 }
 
-.menubar-navigation > li  li  {
+.menubar-navigation > li li {
   display: block;
 }
 
@@ -37,7 +37,7 @@
 .menubar-navigation [role="separator"] {
   padding: 6px;
   background-color: #eee;
-  border: 0px solid #eee;
+  border: 0 solid #eee;
   color: black;
   border-radius: 5px;
 }
@@ -74,6 +74,10 @@
   position: absolute;
   margin: 0;
   padding: 0;
+  padding: 7px 4px;
+  border: 2px solid #034575;
+  border-radius: 5px;
+  background-color: #eee;
 }
 
 .menubar-navigation [role="group"] {
@@ -81,10 +85,6 @@
   padding: 0;
 }
 
-.menubar-navigation [role="menu"]  {
-  display: none;
-}
-
 .menubar-navigation [role="separator"] {
   padding-top: 3px;
   background-image: url('../images/separator.svg');
@@ -99,13 +99,6 @@
   border: #034575 solid 2px;
 }
 
-.menubar-navigation [role="menu"] {
-  padding: 7px 4px;
-  border: 2px solid #034575;
-  border-radius: 5px;
-  background-color: #eee;
-}
-
 .menubar-navigation [role="menuitem"][aria-expanded="true"],
 .menubar-navigation [role="menuitem"]:focus,
 .menubar-navigation [role="menuitem"]:hover {
diff --git a/examples/radio/css/radio.css b/examples/radio/css/radio.css
index 962758e13..605427304 100644
--- a/examples/radio/css/radio.css
+++ b/examples/radio/css/radio.css
@@ -12,7 +12,7 @@
   padding: 4px;
   padding-left: 30px;
   padding-right: 8px;
-  border: 0px solid transparent;
+  border: 0 solid transparent;
   border-radius: 5px;
   display: inline-block;
   position: relative;