Make CSS less opinionated & more accessible
While a lot of progress has been made when issue NEXT-28267 was resolved, the Shopware CSS is still full of hardcoded and borderline obsolete code, which makes creating custom themes difficult and results in a bloated codebase.
As an example, this code block can be found in _filter-panel.scss:
.icon.icon-filter-panel-item-toggle {
margin-left: 8px;
> svg {
top: 4px;
}
}
In the same file, a height and padding is hardcoded in pixels for the filter panel:
.offcanvas-filter {
.filter-panel {
height: calc(100% - 80px);
overflow-y: auto;
width: 100%;
padding: 0 25px 25px;
}
}
This creates incredibly specific selectors with hardcoded pixel values (which isn't good practice to begin with), that requires an even higher specificity to be overriden.
It is not only problematic for developers creating custom themes that need those values overriden, but also for the users. It can make the website inaccessible for users using assistive technology (or even just differently sized devices) due to the overwhelming use of pixels instead of relative units (like rem/em). Additionally, the use of physical instead of logical properties (e.g. margin-top vs margin-block-start) can make the website unusable for users using a different writing mode than LTR.
While I do realise that modifying the entire CSS codebase to accomodate those changes is quite a challenge, I believe in the long run it is critical to address this issue for the benefit of both developers and users.
Zuza Gronska
shared this idea
Not enough interest
We’re closing this idea because it has not received significant interest or activity over the past 12 months. This helps us keep the idea portal focused on the topics that are most relevant to our community.
Thank you for taking the time to submit and support it. We’ll continue to monitor customer needs and may reconsider the topic if interest grows in the future.