It is important to understand, that your skins are a reusable set of styles and should be applied to components whenever possible. This not only keeps maintenance easy, but also keeps your layout simple and clear. Nevertheless, there can be different reasons why you would want to write custom styles in addition to existing skins:

CoreMedia recommends placing your files in the same module in which the component is located. To do this, create a sencha/sass/ folder in the module's src/main/ folder, like shown in Figure 7.1, “Plugin structure”. As long as the folder structure in the your directories for MXML/ActionScript files and SCSS files match, the Sencha Microloader will find the SCSS files corresponding to the MXML components.

Note

You can write styles in any SCSS file that will be found by the Sencha Microloader. However, it is possible that styles and variables can be overridden in other SCSS files, due to the order these files get loaded. As a rule of thumb you can assume, that all SCSS files in var folders will be loaded prior files in src folders. Take a look at the Sencha Documentation to learn more about Organization of Generated Styles.

Own custom styles should be an exception and only be used if writing a new skin is not an option. While skin mixins provide a robust way to apply styles you can never be sure if your own CSS selectors will work after updating the framework or changing the layout of the parent container. You should especially avoid applying styles to the following CSS classes:

The recommended way to apply styles to custom components and keep your CSS robust is to add own classes by using the cls configuration or the BEM Plugin (see Section 7.12.5, “Usage of BEM and Spacing Plugins”).

CoreMedia Studio defines own styles for custom components. If not needed, you can always disable these styles by setting the corresponding include variable to false.

Note

Please note that SCSS files for custom components will be included after SCSS files in themes. This makes it impossible to override a custom component variable in the blueprint-studio-theme. If you want to disable custom style rules, you will have to override the variable after the custom styles get included.