Best practice of Omega Kickstart sub theming

Posted by catchlight on August 24, 2013 at 4:28am

I'm using Omega on a Drupal Commerce website. I'm not using the Commerce Kickstart Install profile, but I am using a custom sub theme of the Omega Kickstart theme (which is a sub theme of Omega)

In other words...

Omega 7.x-3.1 -> Omega Kickstart 7.x-3.4 -> myCustomTheme

What's the best practice for overriding CSS in myCustomTheme?

Here's some background if necessary...

If I look at the page source, stylesheets seem to be coming from the following places:

sites/all/themes/myCustomTheme/css/
sites/all/themes/omega/alpha/css/
sites/all/themes/omega_kickstart/css/

SOURCE

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)">@import url("/sites/all/themes/omega_kickstart/css/omega-kickstart-alpha-default.css?ms0lya");
@import url("sites/all/themes/myCustomTheme/css/myCustomTheme-alpha-default.css?ms0lya");
@import url("sites/all/themes/omega/alpha/css/grid/alpha_default/fluid/alpha-default-fluid-24.css?ms0lya");
@import url("sites/all/themes/omega_kickstart/css/omega-kickstart-alpha-default.css?ms0lya");
@import url("sites/all/themes/omega_kickstart/css/omega-kickstart-alpha-default-narrow.css?ms0lya");
@import url("sites/all/themes/myCustomTheme/css/myCustomTheme-alpha-default.css?ms0lya");
@import url("sites/all/themes/myCustomTheme/css/myCustomTheme-alpha-default-narrow.css?ms0lya");
@import url("sites/all/themes/omega/alpha/css/grid/alpha_default/narrow/alpha-default-narrow-24.css?ms0lya");</style>
<!--<![endif]-->

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)">@import url("/sites/all/themes/omega_kickstart/css/omega-kickstart-alpha-default.css?ms0lya");
@import url("/sites/all/themes/omega_kickstart/css/omega-kickstart-alpha-default-normal.css?ms0lya");
@import url("/sites/all/themes/myCustomTheme/css/myCustomTheme-alpha-default.css?ms0lya");
@import url("/sites/all/themes/myCustomTheme/css/myCustomTheme-alpha-default-normal.css?ms0lya");
@import url("/sites/all/themes/omea/alpha/css/grid/alpha_default/normal/alpha-default-normal-24.css?ms0lya");</style>
<!--<![endif]-->

MyCustomTheme's .info file has the following

css[global.css][name] = 'global styles'
css[global.css][description] = 'This file holds all the globally active custom CSS of your theme.'
css[global.css][options][weight] = '10'
css[myCustomTheme.css][name] = 'custom global styles'
css[myCustomTheme.css][description] = 'This file holds all the globally active custom CSS of your theme.'
css[myCustomTheme.css][options][weight] = '11'

Currently I have these files in myCustomTheme css folder

myCustomTheme-alpha-default.css
myCustomTheme-alpha-default-narrow.css
global.css
myCustomTheme.css

So what CSS files should I be editing in myCustom Theme? Shouldn't the Global file be coming from Omega Kickstart and not myCustomTheme? Confused :/