Sketch Export CSS workflow

Question

I'm looking to enhance my workflow for design websites with Sketch. I know Sketch has a built in ability to export CSS but it only exports the actual CSS atttubutes .

Is there a way to export the CSS namespaces to the name of the element it forms part of.

So if i design a button and call the group ".call-to-action-button" then the CSS would export like so.

.call-to-action-button{ background-color: green; }

This approach would then rely on me diligently naming each part of the design to conform to my export approach. Am I thinking about this the wrong way? Is there a better Sketch to CSS workflow I should be selling out.

Answer 1

I believe it is not possible to make Sketch apply group names to CSS classes, because groups usually contain both image, text and surrounding divs and not a set of elements needed for developer.

However, the best way to get CSS out of .sketch file and share it with developers is (in my opinion) InVision's Inspector, which is available if you have Craft plugin. After you sync your .sketch file to the Invision, developers (you can share your design with developers for free) can download assets (if you set images to be exportable in Sketch), check elements vs grid (if you use grid in Sketch), check dimensions and paddings between elements and more