diff --git a/packages/core/src/abstract/Module.ts b/packages/core/src/abstract/Module.ts
index 8889ea4331..e82533449c 100644
--- a/packages/core/src/abstract/Module.ts
+++ b/packages/core/src/abstract/Module.ts
@@ -130,6 +130,7 @@ export abstract class ItemManagerModule<
   all: TCollection;
   view?: View;
   events!: Record<string, string>;
+  protected _itemCache = new Map<string, any>();
 
   constructor(
     em: EditorModel,
@@ -207,6 +208,64 @@ export abstract class ItemManagerModule<
     }, {} as any);
   }
 
+  protected _makeCacheKey(selectors: any, state?: string, width?: string) {
+    const sels = Array.isArray(selectors)
+      ? selectors.map((s) => (typeof s === 'string' ? s : s.toString())).join(',')
+      : typeof selectors === 'string'
+        ? selectors
+        : selectors?.toString() || '';
+    return `${sels}|${state || ''}|${width || ''}`;
+  }
+
+  protected _cacheItem(item: Model) {
+    const key = this._makeCacheKey(item);
+    this._itemCache.set(key, item);
+  }
+
+  protected _uncacheItem(item: Model) {
+    const key = this._makeCacheKey(item);
+    this._itemCache.delete(key);
+  }
+
+  protected _clearItemCache() {
+    this._itemCache.clear();
+  }
+
+  protected _onItemAdd(item: Model) {
+    this._cacheItem(item);
+  }
+
+  protected _onItemRemove(item: Model) {
+    this._uncacheItem(item);
+  }
+
+  protected _onItemsReset(collection: Collection) {
+    this._clearItemCache();
+    collection.each((item: Model) => this._cacheItem(item));
+  }
+
+  protected _onItemKeyChange(item: Model) {
+    let oldKey: string | undefined;
+    for (const [key, cachedItem] of (this._itemCache as any).entries()) {
+      if (cachedItem === item) {
+        oldKey = key;
+        break;
+      }
+    }
+
+    if (oldKey) {
+      this._itemCache.delete(oldKey);
+    }
+
+    this._cacheItem(item);
+  }
+
+  protected _setupListeners() {
+    this.em.listenTo(this.all, 'add', this._onItemAdd.bind(this));
+    this.em.listenTo(this.all, 'remove', this._onItemRemove.bind(this));
+    this.em.listenTo(this.all, 'reset', this._onItemsReset.bind(this));
+  }
+
   __initListen(opts: any = {}) {
     const { all, em, events } = this;
     all &&
diff --git a/packages/core/src/css_composer/index.ts b/packages/core/src/css_composer/index.ts
index 32b1581793..4063c6aa92 100644
--- a/packages/core/src/css_composer/index.ts
+++ b/packages/core/src/css_composer/index.ts
@@ -87,7 +87,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
   Selectors = Selectors;
 
   storageKey = 'styles';
-
+  private _ruleCache = new Map<string, CssRule>();
   /**
    * Initializes module. Automatically called with a new instance of the editor
    * @param {Object} config Configurations
@@ -104,6 +104,12 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     config.rules = this.em.config.style || config.rules || '';
 
     this.rules = new CssRules([], config);
+    this._setupListeners();
+  }
+
+  protected override _setupListeners() {
+    super._setupListeners();
+    this.em.listenTo(this.rules, 'change:selectors change:state change:mediaText', this._onItemKeyChange.bind(this));
   }
 
   /**
@@ -112,6 +118,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    */
   onLoad() {
     this.rules.add(this.config.rules, { silent: true });
+    this._onItemsReset(this.rules as any);
   }
 
   /**
@@ -157,27 +164,27 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     const s = state || '';
     const w = width || '';
     const opt = { ...opts } as CssRuleProperties;
-    let rule = this.get(selectors, s, w, opt);
+    const key = this._makeCacheKey(selectors, s, w);
 
-    // do not create rules that were found before
-    // unless this is a single at-rule, for which multiple declarations
-    // make sense (e.g. multiple `@font-type`s)
-    if (rule && rule.config && !rule.config.singleAtRule) {
-      return rule;
-    } else {
-      opt.state = s;
-      opt.mediaText = w;
-      opt.selectors = [];
-      // #4727: Prevent updating atRuleType if already defined
-      if (w && !opt.atRuleType) {
-        opt.atRuleType = 'media';
-      }
-      rule = new CssRule(opt, this.config);
-      // @ts-ignore
-      rule.get('selectors').add(selectors, addOpts);
-      this.rules.add(rule, addOpts);
-      return rule;
+    const cached = this._ruleCache.get(key);
+    if (cached && cached.config && !cached.config.singleAtRule) {
+      return cached;
     }
+
+    let rule = this.get(selectors, s, w, opt);
+    if (rule && rule.config && !rule.config.singleAtRule) return rule;
+
+    opt.state = s;
+    opt.mediaText = w;
+    opt.selectors = [];
+    if (w && !opt.atRuleType) opt.atRuleType = 'media';
+
+    rule = new CssRule(opt, this.config);
+    // @ts-ignore
+    rule.get('selectors').add(selectors, addOpts);
+    this.rules.add(rule, addOpts);
+
+    return rule;
   }
 
   /**
@@ -205,6 +212,10 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     width?: string,
     ruleProps?: Omit<CssRuleProperties, 'selectors'>,
   ): CssRule | undefined {
+    const key = this._makeCacheKey(selectors, state, width);
+    const cached = this._ruleCache.get(key);
+    if (cached) return cached;
+
     let slc = selectors;
     if (isString(selectors)) {
       const sm = this.em.Selectors;
@@ -212,7 +223,10 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
       const node = this.em.Parser.parserCss.checkNode({ selectors: singleSel } as any)[0];
       slc = sm.get(node.selectors as string[]);
     }
-    return this.rules.find((rule) => rule.compare(slc, state, width, ruleProps)) || null;
+
+    const rule = this.rules.find((r) => r.compare(slc, state, width, ruleProps)) || null;
+    if (rule) this._cacheItem(rule);
+    return rule;
   }
 
   getAll() {
@@ -485,8 +499,9 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    */
   remove(rule: string | CssRule, opts?: any) {
     const toRemove = isString(rule) ? this.getRules(rule) : rule;
-    const result = this.getAll().remove(toRemove, opts);
-    return isArray(result) ? result : [result];
+    const arr = Array.isArray(toRemove) ? toRemove : [toRemove];
+    const result = this.getAll().remove(arr, opts);
+    return Array.isArray(result) ? result : [result];
   }
 
   /**
@@ -494,6 +509,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * @return {this}
    */
   clear(opts = {}) {
+    this._clearItemCache();
     this.getAll().reset([], opts);
     return this;
   }
diff --git a/packages/core/src/css_composer/model/CssRule.ts b/packages/core/src/css_composer/model/CssRule.ts
index b8fc422669..c4cd166ca4 100644
--- a/packages/core/src/css_composer/model/CssRule.ts
+++ b/packages/core/src/css_composer/model/CssRule.ts
@@ -175,9 +175,12 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
    * cssRule.getAtRule(); // "@media (min-width: 500px)"
    */
   getAtRule() {
-    const type = this.get('atRuleType');
-    const condition = this.get('mediaText');
-    // Avoid breaks with the last condition
+    return CssRule.getAtRuleFromProps(this.attributes);
+  }
+
+  static getAtRuleFromProps(cssRuleProps: Partial<CssRuleProperties>) {
+    const type = cssRuleProps.atRuleType;
+    const condition = cssRuleProps.mediaText;
     const typeStr = type ? `@${type}` : condition ? '@media' : '';
 
     return typeStr + (condition && typeStr ? ` ${condition}` : '');
diff --git a/packages/core/src/selector_manager/index.ts b/packages/core/src/selector_manager/index.ts
index 129cdfec81..d6c01cc440 100644
--- a/packages/core/src/selector_manager/index.ts
+++ b/packages/core/src/selector_manager/index.ts
@@ -128,7 +128,6 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
   storageKey = '';
   __update: Debounced;
   __ctn?: HTMLElement;
-
   /**
    * Get configuration object
    * @name getConfig
@@ -143,7 +142,6 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
     const ppfx = config.pStylePrefix;
     if (ppfx) config.stylePrefix = ppfx + config.stylePrefix;
 
-    // Global selectors container
     this.all = new Selectors(config.selectors);
     this.selected = new Selectors([], { em, config });
     this.states = new Collection<State>(
@@ -152,16 +150,34 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
     );
     this.model = new Model({ cFirst: config.componentFirst, _undo: true });
     this.__update = debounce(() => this.__trgCustom(), 0);
+
+    this._setupListeners();
+    this._onItemsReset(this.all);
     this.__initListen({
       collections: [this.states, this.selected],
       propagate: [{ entity: this.states, event: this.events.state }],
     });
-    em.on('change:state', (m, value) => em.trigger(evState, value));
-    this.model.on('change:cFirst', (m, value) => em.trigger('selector:type', value));
+
+    const { em: editor } = this;
+    editor.on('change:state', (m, value) => editor.trigger(evState, value));
+    this.model.on('change:cFirst', (m, value) => editor.trigger('selector:type', value));
     const eventCmpUpdateCls = `${ComponentsEvents.update}:classes`;
-    em.on(`component:toggled ${eventCmpUpdateCls}`, this.__updateSelectedByComponents);
+    editor.on(`component:toggled ${eventCmpUpdateCls}`, this.__updateSelectedByComponents);
     const listenTo = `component:toggled ${eventCmpUpdateCls} change:device styleManager:update selector:state selector:type style:target`;
-    this.model.listenTo(em, listenTo, () => this.__update());
+    this.model.listenTo(editor, listenTo, () => this.__update());
+  }
+
+  protected override _setupListeners() {
+    super._setupListeners();
+    this.em.listenTo(this.all, 'change:name change:type', this._onItemKeyChange.bind(this));
+  }
+
+  protected override _makeCacheKey(selector: Selector): string {
+    return this.getCacheKey(selector.get('name')!, selector.get('type')!);
+  }
+
+  private getCacheKey(name: string, type: number) {
+    return `${type}__${name}`;
   }
 
   __trgCustom(opts?: any) {
@@ -233,6 +249,7 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
     const cname = props.name;
     const config = this.getConfig();
     const { all, em } = this;
+
     const selector = cname ? (this.get(cname, props.type) as Selector) : all.where(props)[0];
 
     if (!selector) {
@@ -251,7 +268,14 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
       name = name.substr(1);
     }
 
-    return this.all.where({ name, type })[0];
+    const key = this.getCacheKey(name, type);
+    if (this._itemCache.has(key)) {
+      return this._itemCache.get(key);
+    }
+
+    const selector = this.all.where({ name, type })[0];
+    if (selector) this._itemCache.set(key, selector);
+    return selector;
   }
 
   /**
@@ -550,6 +574,7 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
     this.__destroy();
     selectorTags?.remove();
     this.selectorTags = undefined;
+    this._clearItemCache();
   }
 
   /**