[CSS Feature Request] Add 'as' rule to copy styles from targeted element. #my-form as #some-form

Hello CSS Working Group,

I am a web developer with a keen interest in CSS. I would like to propose a new feature for the CSS specification.

**Feature Description:**I propose adding a new rule called "as", which can tell one element to ignore its styles and copy styles from another element.Example command where .my-form-field would copy all styles from .some-other-form-field element: .my-form-field as .some-other-form-field;    1. All .my-form-field styles are ignored    2. .my-form-field is basically styled as a clone of .some-other-form-fieldThis would allow developers to quickly style a specific element (any element) without the need to dig through the styles of the targeted element (any element).
**Rationale:**
It's basically inheritance but a "clean" one, a "specified" one. It would effectively turn OFF styling of one element and treat it as the targeted one. I have lost months on this exact problem on many projects in the past 15+ years.

**Use Cases:**1. Immensely speeding-up the styling of improperly styled elements.
2. Quickly adapting style of 3rd party code's elements within complex frameworks, where stylesheets are deeply nested and a major pain to work with.3. Speeding up the workflow in time critical projects.4. Removing the uncertainty factor from clashing styles.
**Expanding options**Having a "full style copy" would be tremendous but a choice of properties to copy would be even more powerful, in this case we could 1. Copy all styles (default) or 2. Specify what to copy, with the following syntax:.my-form as .some-form {    all; /* default behavior, copies all styles. same as .my-form as .some-form; - without the curly braces */}.my-form as .some-form {    padding, border-color, font-family;}
**Syntax option 2**
The feature could also be written as a declarations, for example:.my-form {    as: .some-form;}In this case, to be able to specify which properties to copy, we'd need a total of three properties within the "as" functionality, one for shorthand and additional two for longhand, like so:/* shorthand of copying specific properties */.my-form {    as: .some-form, padding border-color font-family; /* meaning: copy the styles from .some-form and after the comma we list the properties to copy */}/* longhand of copying specific properties */.my-form {    as-target: .some-form; /* as-targets lets us target an element by selector */    as-properties: padding border-color font-family; /* as-properties lets us list the properties from which to copy styles */}
Thank you for considering this feature request. I look forward to your feedback and discussion.

Best regards,
D

Received on Tuesday, 6 August 2024 05:16:13 UTC