WYSIWYG editors are the bane of my existence, yet they are a necessary evil if you have clients that want to edit their site content.
But somewhere between all the inline styles they create to editing source code, there simply had to be a solution that would let me open up my theme css to content creators.
After much searching and testing, I have found that unicorn.
CKEditor populates the style drop down menu with a js file, and it lets you override it. Problem is, as stated in the docs, it doesn't work. And there were a few various options posted in the CKEditor module issue queue.
First off, you create a new js file to name a function that will build the drop down select items and the parameters for each. Contrary to what has been suggested in various posts, I put this in my theme's js folder. That way it won't get overridden by a module or library update, and it just makes sense since it's tied to my theme. Only CKEditor will be looking for this file, so there's no need to call it in your template files nor add it to your .info file.
For example, I created a file named ckeditor_styles.js like so:
( function() {
CKEDITOR.stylesSet.add( 'my_styles', [ // this is the styles set name you will call later
{ name: 'Teal Heading 2', element: 'h2', attributes: { 'class': 'teal' } },
{ name: 'Teal Text', element: 'span', attributes: { 'class': 'teal' } },
{ name: 'Unbold Heading', element: 'span', attributes: { 'class': 'unbold' } }
]);
} )();
It's pretty straightforward. The name parameter is what you will actually select in the drop down. The element is where you specify where to inject the class. If it's a block-level element (h1, h2, div, p, etc.), the class will added. If it's a span, then the selected text will be wrapped in a classed span. As for attributes, that's where you specify you are calling a class, and also provide the name of the class you want to inject. The resulting drop down will be split into block styles and inline styles.
The second step is to let CKEditor know where to find this file, via the advanced options section in the configuration. Navigate to admin/config/content/ckeditor and edit the profile you wish to add this to, most likely Full HTML. Docs will say you only need to set config.stylesSet, but as gleaned from the issue queues (and tested personally), you need to also set config.stylesCombo_styleSet.
Expand the Advanced Options field set and add the following to the Custom JavaScript Configuration with your styles set name and the path to your js file:
config.stylesCombo_stylesSet = 'my_styles:/sites/all/themes/mytheme/js/ckeditor_styles.js';
config.stylesSet = 'my_styles:/sites/all/themes/mytheme/js/ckeditor_styles.js';
Clear your caches and you should now be able to pick styles from your drop downs that will add either standard elements or spans with the desired classes.
Sources:
http://docs.ckeditor.com/#!/guide/dev_howtos_styles
https://www.drupal.org/node/1287432