This ticket will serve as a discussion/placeholder to determine if Classy should be used as a base theme or not.

I've not as of yet done an extensive investigation of this, BUT with Classy enabled as Omega's base theme, there are SO many css files being added from both Classy and Stable

@import url("http://d8rc4.localhost/core/assets/vendor/normalize-css/normalize.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/ajax-progress.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/align.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/autocomplete-loading.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/fieldgroup.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/container-inline.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/clearfix.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/details.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/hidden.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/item-list.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/js.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/nowrap.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/position-container.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/progress.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/reset-appearance.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/resize.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/sticky-header.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/tabledrag.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/tablesort.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/system/components/tree-child.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/contextual/contextual.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/assets/vendor/jquery.ui/themes/base/core.css?ny17wz");
@import url("http://d8rc4.localhost/core/assets/vendor/jquery.ui/themes/base/button.css?ny17wz");
@import url("http://d8rc4.localhost/core/assets/vendor/jquery.ui/themes/base/resizable.css?ny17wz");
@import url("http://d8rc4.localhost/core/assets/vendor/jquery.ui/themes/base/dialog.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/quickedit/quickedit.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/views/views.module.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/toolbar/toolbar.module.css?ny17wz");

@import url("http://d8rc4.localhost/core/themes/stable/css/tour/tour.module.css?ny17wz");

@import url("http://d8rc4.localhost/core/themes/stable/css/contextual/contextual.toolbar.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/toolbar/toolbar.menu.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/contextual/contextual.theme.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/contextual/contextual.icons.theme.css?ny17wz");
@import url("http://d8rc4.localhost/core/assets/vendor/jquery.ui/themes/base/theme.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/seven/css/components/quickedit.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/quickedit/quickedit.theme.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/quickedit/quickedit.icons.theme.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/toolbar/toolbar.theme.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/toolbar/toolbar.icons.theme.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/user/user.icons.admin.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/shortcut/shortcut.theme.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/stable/css/shortcut/shortcut.icons.theme.css?ny17wz");

@import url("http://d8rc4.localhost/themes/omega/starterkits/omega_simple_starterkit/style/css/layout/primary-layout.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/dialog.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/action-links.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/breadcrumb.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/button.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/collapse-processed.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/container-inline.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/details.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/exposed-filters.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/field.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/form.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/icons.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/inline-form.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/item-list.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/link.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/links.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/menu.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/more-link.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/pager.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/tabledrag.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/tableselect.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/tablesort.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/tabs.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/textarea.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/ui-dialog.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/node.css?ny17wz");
@import url("http://d8rc4.localhost/core/themes/classy/css/components/messages.css?ny17wz");
@import url("http://d8rc4.localhost/themes/omega/starterkits/omega_simple_starterkit/style/css/omega_simple_starterkit.css?ny17wz");
@import url("http://d8rc4.localhost/themes/omega/omega/style/css/base.css?ny17wz");
@import url("http://d8rc4.localhost/themes/omega/omega/style/css/html-elements.css?ny17wz");
@import url("http://d8rc4.localhost/themes/omega/omega/style/css/site-branding.css?ny17wz");

@import url("http://d8rc4.localhost/themes/omega/omega/style/css/breadcrumbs.css?ny17wz");
@import url("http://d8rc4.localhost/themes/omega/omega/style/css/main-menus.css?ny17wz");
@import url("http://d8rc4.localhost/themes/omega/omega/style/css/messages.css?ny17wz");
@import url("http://d8rc4.localhost/themes/omega/omega/style/css/pagers.css?ny17wz");
@import url("http://d8rc4.localhost/themes/omega/omega/style/css/tabs.css?ny17wz");

Seems a little bananas to me to have THIS much CSS importing going on.

Comments

himerus created an issue.

amit.rawat777’s picture

amit.rawat777 commented

This definitely looks excessive. With Classy used as the base theme, we’re inheriting both Classy and Stable CSS libraries, which leads to a huge number of component-level CSS files being imported. Most of these aren’t needed for the front-end and end up adding unnecessary weight and complexity to the theme.

When Classy is set as the base theme for Omega, we automatically inherit all of Classy’s component styles, in addition to the full set of Stable theme CSS files. Because Classy itself depends on Stable, both sets get included by default.

This results in dozens of CSS files being imported on every page, many of which provide very granular component styles (e.g., tabledrag, autocomplete, pager, contextual links, jQuery UI elements, etc.). In many cases, these styles may not even be required for the front-end theme, or they may be completely overridden by Omega’s own CSS.

The main issues this creates are:

1. Unnecessary CSS bloat
The page ends up loading a very large number of small CSS files, which increases the total CSS footprint and can negatively impact performance.

2. Style duplication and conflicts
Because both Stable and Classy provide component-level styles, we risk duplicated rules or conflicting styling that we then need to override again in Omega.

3. Harder theme maintenance
With so many inherited files, it becomes more difficult to track where certain styles are coming from and to manage overrides consistently.

4. Unclear benefit vs. cost
Classy’s purpose is to provide cleaner markup and reusable component styles, but if Omega is already defining its own styling, the value of loading all of Classy’s CSS becomes questionable.

Right now, the amount of CSS being imported does appear excessive, and we should reassess whether using Classy as the base theme is the right choice.