But with just one minute of refactoring effort, you can produce this neat piece of HTML:

Since UIPad uses the layer names from the design to name the CSS classes, all I needed to do was to name them well. And Sketch’s keyboard shortcuts make this easy. This is how I renamed all those layers in one go:

The shortcut key to start renaming layers is CMD+R. Then you can use TAB and SHIFT+TAB to move between layers. If a group is collapsed, you can press ESC, then hit ENTER to expand it, and start renaming again with CMD+R.

We call this process of cleaning up a Sketch file refactoring, a term widely used in programming. It means this: improving the structure of the code without changing how it actually works. Which is exactly what we’re doing with our Sketch design as well.

That was not all. If you’re a front-end developer, you might appreciate if the code was organized into reusable components, like this: