diff --git a/styles/colors.less b/styles/colors.less
index f67de9c..21fb98a 100644
--- a/styles/colors.less
+++ b/styles/colors.less
@@ -31,7 +31,7 @@
 @constant: @orange; // true of var x = true, {{}} of {{> hbs_include}}
 @variable: @green; // foo or function(foo), hbs_include of {{> hbs_include}}, http://dom.com/ of url(http://dom.com/)
 @support: @purple; // module of module.exports, color of color: rgb(0,0,0)
-@entity: @silver; // exports of module.exports, <div id= of <div id="#id">, . of .className
+@entity: @silver; // exports of module.exports, <div id= of <div id="#id">, . of .syntax--className
 @keyword: @gray; // = of var a = b, if of if a = b, px of font-size: 13px;
 @storage: darken(@gray, 10%); // var of var a = b;
 @meta: @code-font-color; // none of border: none;
diff --git a/styles/editor.less b/styles/editor.less
index 82b24ab..32964a0 100755
--- a/styles/editor.less
+++ b/styles/editor.less
@@ -1,13 +1,13 @@
 @import "colors.less";
 
 // EDITOR BACKGROUND & FONT COLORS
-.atom-text-editor, :host {
+.atom-text-editor,atom-text-editor {
   background-color: @code-background;
   color: @code-font-color;
 }
 
 // MAIN CODE EDITOR STYLES
-.atom-text-editor, :host {
+.atom-text-editor,atom-text-editor {
 
   background-color: @code-background;
   color: @code-font-color;
@@ -101,8 +101,6 @@
   // SELECTED LINE STYLE
   .line.cursor-line {
     background: @selected-line !important;
-    padding-left: 10px;
-    margin-left: -10px;
   }
 
 
diff --git a/styles/languages/html.less b/styles/languages/html.less
index 232fc27..43f554c 100644
--- a/styles/languages/html.less
+++ b/styles/languages/html.less
@@ -1,34 +1,34 @@
 @import "colors";
 
-.html {
+.syntax--html {
 
-  .meta.tag.any {
+  .syntax--meta.syntax--tag.syntax--any {
     color: @gray;
   }
 
-  .entity.name.tag {
-    &.block, &.inline, &.name {
+  .syntax--entity.syntax--name.syntax--tag {
+    &.syntax--block, &.syntax--inline, &.syntax--name {
       color: @tag;
     }
   }
 
-  .entity.other.attribute-name.id.html {
+  .syntax--entity.syntax--other.syntax--attribute-name.syntax--id.syntax--html {
     color: @id;
   }
 
-  .punctuation.separator.key-value {
+  .syntax--punctuation.syntax--separator.syntax--key-value {
     color: @gray;
   }
 
-  .string.quoted.double {
+  .syntax--string.syntax--quoted.syntax--double {
     color: lighten(@gray, 10%);
 
-    .punctuation.definition.string {
-      &.begin, &.end {
+    .syntax--punctuation.syntax--definition.syntax--string {
+      &.syntax--begin, &.syntax--end {
         color: @gray;
       }
 
-      .separator.key-value.html {
+      .syntax--separator.syntax--key-value.syntax--html {
         color: @gray;
       }
 
diff --git a/styles/languages/jade.less b/styles/languages/jade.less
index e1c6120..57e749f 100644
--- a/styles/languages/jade.less
+++ b/styles/languages/jade.less
@@ -1,65 +1,65 @@
 @import "colors";
 
 
-.jade {
+.syntax--jade {
 
   color: @code-font-color;
 
-  .comment.jade {
+ .syntax--comment.syntax--jade {
     color: @comment;
   }
 
-  .storage.type.function.jade {
+  .syntax--storage.syntax--type.syntax--function.syntax--jade {
     color: @keyword;
   }
 
-  .meta.control.flow.jade {
+  .syntax--meta.syntax--control.syntax--flow.syntax--jade {
     color: @red;
   }
 
-  .source.script {
-    .meta.brace.round.js, .meta.brace.curly.js {
+  .syntax--source.syntax--script {
+    .syntax--meta.syntax--brace.syntax--round.syntax--js, .syntax--meta.syntax--brace.syntax--curly.syntax--js {
       color: @brackets;
     }
   }
 
-  .entity {
+  .syntax--entity {
 
-    &.name.tag.jade {
+    &.syntax--name.syntax--tag.syntax--jade {
       color: @tag;
     }
 
   }
 
-  .storage.type.import.include.jade {
+  .syntax--storage.syntax--type.syntax--import.syntax--include.syntax--jade {
     color: lighten(@green, 20%);
   }
 
-  .variable.control.import.include.jade {
+  .syntax--variable.syntax--control.syntax--import.syntax--include.syntax--jade {
     color: @green;
   }
 
-  .constant {
+  .syntax--constant {
 
-    &.id {
+    &.syntax--id {
       color: @yellow;
     }
 
-    &.language.js {
+    &.syntax--language.syntax--js {
       color: @purple;
     }
 
   }
 
-  .text.jade {
+  .syntax--text.syntax--jade {
     color: @code-font-color;
   }
 
-  .punctuation.separator.key-value.jade {
+  .syntax--punctuation.syntax--separator.syntax--key-value.syntax--jade {
     color: @tag;
   }
 
-  .string.quoted.jade {
+  .syntax--string.syntax--quoted.syntax--jade {
     color: @code-font-color;
   }
 
diff --git a/styles/languages/json.less b/styles/languages/json.less
index 0e5cb4a..ccfcd21 100644
--- a/styles/languages/json.less
+++ b/styles/languages/json.less
@@ -1,46 +1,46 @@
 @import "colors";
 
 
-.source.json {
+.syntax--source.syntax--json {
 
-  .constant.language {
+  .syntax--constant.syntax--language {
     color: @constant;
   }
 
-  .meta.structure.dictionary.json {
+  .syntax--meta.syntax--structure.syntax--dictionary.syntax--json {
 
-    .string.quoted.json {
+    .syntax--string.syntax--quoted.syntax--json {
       color: @tag;
     }
 
-    .meta.structure.dictionary.value.json {
+    .syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json {
       // background-color: pink;
-      .string.quoted.json {
+      .syntax--string.syntax--quoted.syntax--json {
         color: @code-font-color;
 
-        .punctuation.definition.string {
+        .syntax--punctuation.syntax--definition.syntax--string {
           color: @code-font-color;
         }
       }
 
-      .meta.structure.dictionary.json {
+      .syntax--meta.syntax--structure.syntax--dictionary.syntax--json {
         // background-color: yellow;
 
-        .string.quoted.json {
+        .syntax--string.syntax--quoted.syntax--json {
           color: @tag;
 
-          .punctuation.definition.string {
+          .syntax--punctuation.syntax--definition.syntax--string {
             color: @tag;
           }
         }
 
-        .meta.structure.dictionary.value.json {
+        .syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json {
             // background-color: orange;
 
-            .string.quoted.json {
+            .syntax--string.syntax--quoted.syntax--json {
               color: @code-font-color;
 
-              .punctuation.definition.string {
+              .syntax--punctuation.syntax--definition.syntax--string {
                 color: @code-font-color;
               }
             }
diff --git a/styles/languages/markdown.less b/styles/languages/markdown.less
index 82ae0f7..1c642ca 100644
--- a/styles/languages/markdown.less
+++ b/styles/languages/markdown.less
@@ -1,21 +1,21 @@
 @import "colors";
 
-.gfm {
-  .comment {
+.syntax--gfm {
+  .syntax--comment {
     color: @gray;
   }
-  .support.quote {
+  .syntax--support.syntax--quote {
     color: darken(@gray, 30%);
   }
-  .heading,
-  .bold {
+  .syntax--heading,
+  .syntax--bold {
     color: @green!important;
   }
-  .link,
-  .entity {
+  .syntax--link,
+  .syntax--entity {
     color: @blue;
   }
-  .source {
+  .syntax--source {
     color: lighten(@purple, 20%);
   }
 }
diff --git a/styles/languages/mustache.less b/styles/languages/mustache.less
index 4c288cc..bdb9201 100644
--- a/styles/languages/mustache.less
+++ b/styles/languages/mustache.less
@@ -1,11 +1,11 @@
 @import "colors";
 
-.mustache {
+.syntax--mustache {
 
-  .meta.tag.template {
+  .syntax--meta.syntax--tag.syntax--template {
     color: @green;
 
-    .entity.name.tag {
+    .syntax--entity.syntax--name.syntax--tag {
       color: lighten(@green, 20%);
     }
 
diff --git a/styles/languages/styles.less b/styles/languages/styles.less
index 34e27aa..67b87db 100644
--- a/styles/languages/styles.less
+++ b/styles/languages/styles.less
@@ -1,24 +1,24 @@
 @import "colors";
 
-.css {
-  .entity.name.tag {
+.syntax--css {
+  .syntax--entity.syntax--name.syntax--tag {
     color: @keyword;
   }
-  .support.type.property-name {
+  .syntax--support.syntax--type.syntax--property-name {
     color: @entity;
   }
-  .punctuation.definition,
-  .punctuation.separator.operator,
-  .entity.other.attribute-name.pseudo-class {
+  .syntax--punctuation.syntax--definition,
+  .syntax--punctuation.syntax--separator.syntax--operator,
+  .syntax--entity.syntax--other.syntax--attribute-name.syntax--pseudo-class {
     color: lighten(@keyword, 20%);
   }
-  .meta.selector {
+  .syntax--meta.syntax--selector {
     color: lighten(@keyword, 30%);
   }
 }
 
-.less {
-  .punctuation.definition.comment {
+.syntax--less {
+  .syntax--punctuation.syntax--definition.syntax--comment {
     color: @comment;
   }
 }
diff --git a/styles/languages/yaml.less b/styles/languages/yaml.less
index 9307d02..0736ecc 100644
--- a/styles/languages/yaml.less
+++ b/styles/languages/yaml.less
@@ -1,16 +1,16 @@
 @import "colors";
 
-.yaml {
-  .entity.name.tag {
+.syntax--yaml {
+  .syntax--entity.syntax--name.syntax--tag {
     color: @silver;
   }
-  .string {
+  .syntax--string {
     color: @gray;
   }
-  .punctuation.definition.entry {
+  .syntax--punctuation.syntax--definition.syntax--entry {
     color: @green;
   }
-  .numeric {
+  .syntax--numeric {
     color: @green;
   }
 }
diff --git a/styles/syntax-variables.less b/styles/syntax-variables.less
index 25c3c55..eb9cc9a 100755
--- a/styles/syntax-variables.less
+++ b/styles/syntax-variables.less
@@ -1,7 +1,7 @@
 @import "colors";
 
 // This defines all syntax variables that syntax themes must implement when they
-// include a syntax-variables.less file.
+// include a syntax-variables.syntax--less file.
 
 // General colors
 @syntax-text-color: @code-font-color;
diff --git a/styles/syntax.less b/styles/syntax.less
index f7946e9..14e1eca 100755
--- a/styles/syntax.less
+++ b/styles/syntax.less
@@ -1,105 +1,105 @@
 @import "colors.less";
 
 // COMENTS, DUHR
-.comment {
+.syntax--comment {
   color: @comment;
   background: @comment-bg;
 }
 
 
-.keyword {
+.syntax--keyword {
 
   // @ of @font-face & @media
   color: @keyword;
 
   // try, catch, if, else, return (js)
-  &.control {
+  &.syntax--control {
     color: @keyword;
   }
 
   // =, +, -, ?, :, !=. &&, in (js)
-  &.operator {
+  &.syntax--operator {
     color: @keyword;
   }
 
   // can't tell what this does :/
-  &.other.special-method {
+  &.syntax--other.syntax--special-method {
     color: @keyword;
   }
 
   // can't tell what this does :/
-  &.other.unit {
+  &.syntax--other.syntax--unit {
     color: @keyword;
   }
 }
 
 
 // STORAGE |
-.storage {
+.syntax--storage {
   color: @storage;
 
   // var of var a = b;
-  &.modifier {
+  &.syntax--modifier {
     color: @storage;
   }
 
 }
 
 
-.constant {
+.syntax--constant {
 
   // true, false, null, undefined
   color: @constant;
 
   // \ of ("what\'s")
-  &.character.escape {
+  &.syntax--character.syntax--escape {
     color: @constant;
   }
 
   // all the numbers!
-  &.numeric {
+  &.syntax--numeric {
     color: @numeric;
   }
 
   // can't tell what this does :/
-  &.other.color {
+  &.syntax--other.syntax--color {
     color: @constant;
   }
 
   // can't tell what this does :/
-  &.other.symbol {
+  &.syntax--other.syntax--symbol {
     color: @constant;
   }
 }
 
 
 
-.variable {
+.syntax--variable {
 
   // this (js), @varable_name (sass), http://web.com of url(http://web.com), variable of {{variable}} (handlebars)
   color: @variable;
 
   // can't tell what this does
-  &.interpolation {
+  &.syntax--interpolation {
     color: @variable;
   }
 
   // foo & bar of function name(foo, bar)
-  &.parameter.function {
+  &.syntax--parameter.syntax--function {
     color: @function-param;
   }
 }
 
 
 // INVALID TEXT
-.invalid.illegal, .invalid.deprecated {
+.syntax--invalid.syntax--illegal, .syntax--invalid.syntax--deprecated {
   background: none;
   color: @error;
 }
 
-.string {
+.syntax--string {
 
-  .json {
+  .syntax--json {
 
   }
 
@@ -107,109 +107,109 @@
   color: @string;
 
   // REGEX - [\da-z] of /-([\da-z])/gi (js)
-  .constant {
+  .syntax--constant {
     color: @regex;
   }
 
-  &.regexp {
+  &.syntax--regexp {
 
     // ?:input, select, textarea, button of  /^(?:input|select|textarea|button)$/i,
     color: @regex;
 
-    .constant.character.escape,
-    .source.ruby.embedded,
-    .string.regexp.arbitrary-repitition {
+    .syntax--constant.syntax--character.syntax--escape,
+    .syntax--source.syntax--ruby.syntax--embedded,
+    .syntax--string.syntax--regexp.syntax--arbitrary-repitition {
       color: @regex;
     }
 
-    &.group {
+    &.syntax--group {
       color: @regex;
     }
 
-    &.character-class {
+    &.syntax--character-class {
       color: @regex;
     }
 
-    .source.ruby.embedded {
+    .syntax--source.syntax--ruby.syntax--embedded {
       color: @regex;
     }
 
   }
 
   // site.dir in {{site.dir}}
-  .variable {
+  .syntax--variable {
     color: @variable;
   }
 
   // can't tell what this does :/
-  &.other.link {
+  &.syntax--other.syntax--link {
     color: @string;
   }
 }
 
 // String interpolation in Ruby, CoffeeScript, and others
-.source .string {
-  .source,
-  .meta.embedded.line {
+.syntax--source .syntax--string {
+  .syntax--source,
+  .syntax--meta.syntax--embedded.line {
     color: @string;
   }
 
-  .punctuation.section.embedded {
+  .syntax--punctuation.syntax--section.syntax--embedded {
     color: @string;
 
-    .source {
+    .syntax--source {
       color: @string;  // Required for the end of embedded strings in Ruby # 716
     }
   }
 }
 
 // MISC PUNCTUATION
-.punctuation {
+.syntax--punctuation {
 
-  &.terminator {
+  &.syntax--terminator {
     color: @punctuation;
   }
 
-  &.separator {
+  &.syntax--separator {
     color: @punctuation;
   }
 
-  &.definition {
+  &.syntax--definition {
 
     color: @punctuation;
 
-    &.comment {
+    &.syntax--comment {
       color: @comment-punc;
     }
 
     // QUOTES
-    &.string,
-    &.variable,
-    &.array {
+    &.syntax--string,
+    &.syntax--variable,
+    &.syntax--array {
       color: @string;
     }
 
-    &.parameters {
+    &.syntax--parameters {
       color: @code-font-color;
     }
 
-    &.heading,
-    &.identity {
+    &.syntax--heading,
+    &.syntax--identity {
       color: @code-font-color;
     }
 
-    &.bold {
+    &.syntax--bold {
       color: @code-font-color;
       font-weight: bold;
     }
 
-    &.italic {
+    &.syntax--italic {
       color: @code-font-color;
       font-style: italic;
     }
   }
 
-  &.section.embedded {
+  &.syntax--section.syntax--embedded {
     color: @code-font-color;
   }
 
@@ -217,87 +217,87 @@
 
 
 
-.support {
+.syntax--support {
 
   // background of background: none,
   color: @support;
 
   // SUPPORT | module of module.exports
-  &.class {
+  &.syntax--class {
     color: @support;
   }
 
-  &.function  {
+  &.syntax--function  {
     color: @support; // .log of console.log, url of url(http://web.com)
 
     // can't tell what this does :/
-    &.any-method {
+    &.syntax--any-method {
       color: @support;
     }
   }
 
   // {{}} of {{ variable }}
-  &.constant {
+  &.syntax--constant {
     color: @constant;  // none of text-decoration: none;
   }
 
-  &.type.property-name.css {
+  &.syntax--type.syntax--property-name.syntax--css {
     color: @support;
   }
 }
 
-// .class names in css & scss
-.source .entity.name.tag, .source .entity.other.attribute-name, .meta.tag.inline, .meta.tag.inline .entity {
+// .syntax--class names in css & scss
+.syntax--source .syntax--entity.syntax--name.syntax--tag, .syntax--source .syntax--entity.syntax--other.syntax--attribute-name, .syntax--meta.syntax--tag.syntax--inline, .syntax--meta.syntax--tag.syntax--inline .syntax--entity {
   color: @class;
 }
 
-  &.tag,
-  &.tag .entity {
+  &.syntax--tag,
+  &.syntax--tag .syntax--entity {
     color: @tag-entity;
   }
 
 
-.html {
+.syntax--html {
 
-  .string {
+  .syntax--string {
     color: @code-font-color;
   }
 
 
   // inline elements - <span>
-  .meta {
+  .syntax--meta {
 
 
   }
 
-  .punctuation.definition.tag {
+  .syntax--punctuation.syntax--definition.syntax--tag {
     color: @tag;
   }
 
-  .entity {
+  .syntax--entity {
 
-    &.name.tag {
+    &.syntax--name.syntax--tag {
       text-decoration: done;
 
       // structural elements - <html>
-      &.structure {
+      &.syntax--structure {
         color: @tag;
       }
 
       // block level elements - <div>, <h1>
-      &.block {
+      &.syntax--block {
         color: @tag;
       }
 
       // inline elements - <span>
-      &.script {
+      &.syntax--script {
         // color: @tag;
       }
 
     }
 
-    &.other {
-      &.attribute-name {
+    &.syntax--other {
+      &.syntax--attribute-name {
         color: @element-attr;
       }
     }
@@ -306,144 +306,144 @@
 
 }
 
-// ENTITY | exports of module.exports, <div id= of <div id="#id">, . of .className
-.entity {
+// ENTITY | exports of module.exports, <div id= of <div id="#id">, . of .syntax--className
+.syntax--entity {
 
   color: @entity;
 
   // console of console.log (js)
-  &.name.type {
+  &.syntax--name.syntax--type {
     color: @entity;
     text-decoration: none;
   }
 
-  &.other.inherited-class {
+  &.syntax--other.syntax--inherited-class {
     color: @entity;
   }
 
   // init in init: function(){} (js)
-  &.name.function {
+  &.syntax--name.syntax--function {
     color: @entity;
   }
 
-  &.name.class, &.name.type.class {
+  &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class {
     color: @entity;
   }
 
-  &.name.section {
+  &.syntax--name.syntax--section {
     color: @entity;
   }
 
   // div of <div> (html), body of body{} (css)
-  &.name.tag {
+  &.syntax--name.syntax--tag {
     color: @tag;
     text-decoration: done;
   }
 
 
   // CSS CLASSES
-  &.other.attribute-name {
+  &.syntax--other.syntax--attribute-name {
     color: @element-attr;
 
     // CSS ID's
-    &.id {
+    &.syntax--id {
       color: @id;
     }
   }
 }
 
-.meta {
+.syntax--meta {
 
-  &.link {
+  &.syntax--link {
     color: @meta;
   }
 
-  &.require {
+  &.syntax--require {
     color: @meta;
   }
 
 
-  &.brace {
+  &.syntax--brace {
 
     // curly braces - {}
-    &.curly {
+    &.syntax--curly {
       color: @brackets;
     }
 
     // parenthesis - ()
-    &.round {
+    &.syntax--round {
       color: @code-font-color;
     }
   }
 
-  &.comma {
+  &.syntax--comma {
     color: @punctuation;
   }
 
-  // .css files | commas, ([controls]) of audio:not([controls])
-  &.selector {
+  // .syntax--css files | commas, ([controls]) of audio:not([controls])
+  &.syntax--selector {
     color: @punctuation;
   }
 
-  &.separator {
+  &.syntax--separator {
     background-color: @punctuation;
     color: @punctuation;
   }
 }
 
-.none {
+.syntax--none {
   color: @code-font-color;
 }
 
-.markup {
-  &.bold {
+.syntax--markup {
+  &.syntax--bold {
     color: @markup;
     font-weight: bold;
   }
 
-  &.changed {
+  &.syntax--changed {
     color: @markup;
   }
 
-  &.deleted {
+  &.syntax--deleted {
     color: @markup;
   }
 
-  &.italic {
+  &.syntax--italic {
     color: @markup;
     font-style: italic;
   }
 
-  &.heading .punctuation.definition.heading {
+  &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading {
     color: @markup;
   }
 
-  &.inserted {
+  &.syntax--inserted {
     color: @markup;
   }
 
-  &.list {
+  &.syntax--list {
     color: @markup;
   }
 
-  &.quote {
+  &.syntax--quote {
     color: @markup;
   }
 
-  &.raw.inline {
+  &.syntax--raw.syntax--inline {
     color: @markup;
   }
 }
 
-.source.gfm .markup {
+.syntax--source.syntax--gfm .syntax--markup {
   -webkit-font-smoothing: auto;
-  &.heading {
+  &.syntax--heading {
     color: @code-font-color;
   }
 }
 
 
-atom-text-editor[mini], :host(.mini) {
+atom-text-editor[mini],atom-text-editor {
  .scroll-view {
     padding-left: 1px;
   }