Using LiveStyle

After installing browser and editor plugins, you are ready to start using LiveStyle.

All LiveStyle settings are controlled via Google Chrome extension:

image

The LiveStyle popup displays list of stylesheets, available on current web-page. Below each browser stylesheet is a drop-down list with all stylesheets, opened in editor. To start using LiveStyle, you simply enable it for current page and associate browser stylesheet with one of the editor stylesheet. After that, all updates from editor stylesheet will be pushed to designated browser stylesheet and vice versa.

Sometimes you may want to disable bi-directional stylesheet updates and keep, for example, editor-to-browser updates only so your DevTools experiments won’t break your source code. To do so, click on a blue button to cycle through update modes:

Tutorial: making first live updates

Let’s create our first live updates session to see how easy and fun LiveStyle to use!

  1. Download the example stylesheet and open it in Sublime Text.
  2. In Google Chrome, go to a demo page. Note that we are going to use a remote web-site you don’t have direct access to for live updates! We’ll talk about it a bit later.
  3. Click on LiveStyle icon in browser toolbar to open popup and enable LiveStyle for current page.
  4. The popup displays style.min.css as the only browser stylesheet. Below it there’s an editor stylesheets drop-down — a list of files currently opened in editor that LiveStyle can understand. Simply pick layout.css from a drop-down list. In most cases, LiveStyle will try to automatically associate browser and editor stylesheets using their file names. But since our stylesheets has different names—style.min.css and layout.css—we have to associate them manually.
  5. You are ready to go! In Sublime Text, change the color property to red in .sample-content__title {...} rule and you should see how page title turns red! Play around with .sample-content__title {...} and add, for example, background: yellow;.
  6. Now open DevTools and find and click on <h4 class="sample-content__title"> element. You should see that Styles contains your recent updates made in code editor: image
  7. In DevTools, set color of .sample-content__title header to blue—and the source code in Sublime Text updates accordingly. Go ahead, add padding: 10px; for .sample-content__title in DevTools.

You just saw how easy it is to start live CSS editing with LiveStyle, but you haven’t discovered the most powerful feature yet.

Source patching

Take a look at the source code of style.min.css. It’s... not exactly the same as layout.css: it’s minified and contains more CSS rules and properties.

In modern web-development, the stylesheet in browser is not the same as the source code developers write. They split large CSS codebase into modules, then concatenate them into a singe file, minify it, run additional post-processors (like Autoprefixer) and so on to deliver the best result to end-users. And LiveStyle aware of that.

Instead of replacing code (like other live edit tools do), LiveStyle uses source patching: it detects CSS properties you’ve changed, affected CSS rules and maps those changes to another source. You can think of it as React for CSS: instead of replacing view contents with plain innerHTML, it applies a series of advanced techniques to detect and update only changed parts and keep previous state as much as possible.

To better illustrate how it works, let’s get back to our example from tutorial above. In demo page, there are two CSS rules applied to page header: h4 and .sample-content__title. The h4 rule is present in style.min.css but absent in layout.css.

In DevTools, change font-family property of h4 {...} to arial and you should see that a new rule appeared in text editor:

h4 {
    font-family: arial;
}

Now add font-style: italic; property into h4 {...} rule in text editor and note that page header becomes italic but still draws bottom border, despite the fact that border-bottom property is absent text editor part. In other words, LiveStyle sends only updated properties and applies them on the other end. It doesn’t replace neither CSS rule nor stylesheet completely.

That’s why you have to associate browser and editor stylesheets in LiveStyle, which may look a bit unusually at first. You can, for example, associate a small CSS module you’re working on with concatenated and minified full stylesheet source of your web-page. Get instant live updates with focus on your current task instead of wasting your time waiting tens of seconds until full CSS source is recompiled and updated in browser, like with other live edit tools.

Things you should learn