[PLAN] Drupal CSS Modernization Initiative

Hello Sir, My name is Shivank Mishra currently Pursuing Computer Science Engineering (India). I would like to work in the Modification of Drupal Front-end page by using CSS, JavaScript, React and UI/UX to build a attractive and a reponsive website. I would like to have this opportunity to Contribute to this Organisation as its one of the growing Organization as Open Source. Sir I would love to make the Proposal Regarding it would you Please assign this task to me will try to work approx (4 to 6hr) to complete this task under great Mentorship.
Thank You

Should we have an issue to replace use of float with modern layout techniques?

Sound huge change and most of usage in LTR/RTL

$ git grep 'float: left'|wc -l
200
$ git grep 'float: right'|wc -l
182

Unfortunately browsers don't yet support float in logical properties (like float: inline-start)

Chromium issue is at https://bugs.chromium.org/p/chromium/issues/detail?id=850004

I just saw from 🐛 PostCSS Logical not transpiling flow relative properties (e.g. float: inline-start) which are not supported by Chrome and Safari Fixed that there's a new plugin that will be included in PostCSS ENV (which is what core uses). So we may be able to do this! See https://github.com/csstools/postcss-plugins/issues/632#issuecomment-1401...

Hello everyone
my name is mohammad khan pursuing computer science engineering, i am a frontend developer and have nice grip on languages like HTML,CSS,CSS(Bootstrap),Javascript and React , I would like to contribute this project through GSOC'23 it will be great experience to contribute to this community and work along with mentors
I am want guide from the mentor and requesting mentor to assign this project to me
thankyou

Hello everyone
I have created the first draft of proposal for this project it will great help if mentors will review my proposal and advice me to make it more better

https://drive.google.com/file/d/1r2BZNbQMndiNVeP88TtI1fzgcfRQmPT0/view?u...

Thank you

Fixed broken link

Firefox ESR supports CSS nesting as of 128 which was released in July: https://www.brycewray.com/posts/2024/07/firefox-esr-native-css-nesting/ so that should be fully unblocked now afaik. Next release it could go out in is 11.1 in December.

Also I don't know if/how much we rely on it, but SASS is changing how it handles declarations and nested rules https://sass-lang.com/documentation/breaking-changes/mixed-decls/

Should we open a spin-off issue to switch to native nesting everywhere? Seems like something that can be done in its own right separate from any other changes.

Might we consider also introducing the use of @layer to help tame some of ridiculous specificity that both Sass and native nesting cause?

Using @layer would change a lot of how things work, but probably something we need to adopt eventually.

Declaring CSS in a @layer makes it process before any unlayered CSS. Since Drupal libraries don't use @layer, any existing library could override your theme.

Maybe I don't have the right strategy in mind for using @layer. But it seems like having everything in one layer using SMACSS is incompatible with using @layer in a theme.

The cascade works differently with @layer. A generic selector in a higher priority layer will override a more specific selector in a lower layer. I can see putting base styles in a low layer, and utilities in a high one.

Maybe if core converts the SMACSS layers, and provides a way to customize the names and order, that would work.