foolip/2023_css_pain_points_freeform.txt

## 2023_css_pain_points_freeform.txt
100vh on mobile
:deep-hover so I can have multiple :hover like states on a whole stack of overlapping (non-ancestorial) elements at the same time. One at a time is a tight bottleneck. Also would like a css-only way to limit focused dropdown keyboard auto selection to a single character instead of the default key input timing-based behavior for instant selection change.
:nth-child() and similar functions' <An+B> syntax
<select> tag styling
A system for single file components in React like Vue has
Accessibility
Accessibility
Accessibility
Accessibility: ads extra data aria labels for video description so it's possible to add alternative text not only below the video
Animate from display none to block and backwards
Animation rendering is slow for more involved animations
Animations
Animations
Architecture and maintenance ❤️
Been mainly using Tailwind CSS lately, which removes many of the pain points mentioned above. One pain point with that is to get other developers use it consistently and not come up with workarounds when something can be easily done with Tailwind alone. And maybe the issue of using only specific values from the config for spacing, font sizes etc. and not a ton of custom values, but that also requires a good design system and collaboration with designers.
Better table and selectbox native elements
CSS
CSS  animations at SVG elements
CSS and web-components. Global styling should be accessible inside web-components
CSS has a confusing and all over the place api
CSS variable auto completion across modules/components/app
Can't have full-width <details> elements without messing up the marker position
Canvas for 2D games could be easier.
Centering a div
Clip-path styling such as shadow, border, Also class naming
Code Reuse / Composability ("calling" library "functions" (mixins?))
Common resources for learning CSS practices fixate on simple pages (e.g. landing pages, basic forms) and never get into complex pages as one might find in a CMS or content-heavy, interaction-heavy site.
Complexity — CSS is getting to big, too fast. What ever happened to the Extensible Web Manifesto?!
Container queries solves a lot, but as someone who works with CMS content, being able to adapt to content more easily is high up on the list of wants.
Contrast colors
Customising
Debugging tools
Default form/browser elements are ugly so the clients want to build their own all the time. I wish we could use the default ones more often, proper accessibility is complicated enough without us developers overwriting defaults.
Differences in Email Browser and still very low posibilites, very archaic part of this industry
Dire need of masonry layout, which is still not supported in every browser.
Drag and Drop styling of dragged object and drop zones
E-mails! Horrible!
Email client compatibility
Font loading
Font vertical centering by Cap height
Form Elements Styling, but using tailwindcss is easy
General re-usability of css which has caused all these libs and frameworks
I always use the same features of grid, and even if I have been using it for long time I still struggle with complex grid configurations.
I think is necessary increment the tables functionality
Image Scaling
Inconsistent historical naming conventions of properties/rules
Inline (style attribute) pseudo classes
Is a pain in the a#?... trying to build a responsive web page, and start to manage all the size posible instead of using variable like sm for mobile or md for tablets. It would be great if we have native media querys like boostrap
Isonla
Issues with -webkit-mask-image when used with transforms
It is difficult to compose components that use different css modules files. It is not possible to specify how you'd like nested styles to cascade for nested components.
It would be great if there was better support overall for complex native inputs that could be styled in detail.
It's a pain that creating a variable requires 2 characters '--' and when referring to it requires 6 'var(--' . It would be a lot simpler if creating and referring to a variable, could be done with just 1 character, for instance a dollar sign '$' .
It's very verbose and complicated
Javascript devs
Lack Doc. Lack of description of the layout rendering, not the individual properties.
Lack of advanced typography as in LaTeX
Lack of good tolling for CSS, compared to compile time checks as for typescript
Managing css files, and file organization is the biggest pain point for me.
Mobile Safari, No Infinite Scroll Snap
Native elements styling missing documentation
Parent styling. Adding styling to a parent based on hover on childeren.
Print Styling with paged media & generated content (page number in TOC)
Printing PDFs with Puppeteer
Professionally - Why do I have to ::ng-deep to be able to deal with an element I am pulling onto a page?
RTL styling when properties don’t have logical variants
Recognition within the industry that CSS Developers are important and essential
Screen reader events
Scrolling in inner elements
Spring/interruptible animations comparable to iOS/Android
State management
Stupid libraries like Tailwind reinventing the wheel
Styled components getting messed up with some setups.
Styling native HTML components like select and date picker
Styling shadow DOM from outside.
Styling tables
Suporte a estilização
Tabels (as tabel not layout)
Tailwind and other utility-first frameworks
Text and content overflow between block/flex/grid and inline-* variants
Text manipulation
The flex algorithm and how it works in e.g. Safari 14 makes it difficult to e.g. solve the oh so common problem of sticky footers using this solution: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ I have yet to make it work in Safari 14, making this a on-going long task, and fixing it in Safari 14 disrupts it suddenly in newest Chrome. It is difficutl how Safari or something requires an actual height/min-height to be set in the parent and/or flex children in order for the height calculations in the flex layout to propegate sufficently.
The pain in the ass that is Safari on iOS
The vast features recently spilled to the browsers. Who can keep up with that? Who needs that? Focus on important feature like A11y would be better...
Theming
There are too many features that we can't handle anymore.
Too many innovations, can't keep up!
Too many property and variations to keep in mind
Transitions are still kinda clunky
Unification of behavior between different browsers in terms of animation or transform properties
Unintuitive names in flexbox standard
Using CSS within JS modules without requiring setup on user end
Variable height tab-panels that don't jump to the top of the page when clicking on tabs.
Variables are currently still a massive headache. javascript style objects (palette.bg0) could really help
Z-index
all of the above
animation
animation
animation while rendering
animations and transitions
auto-generated class name i.e. card-fd8da8f89d;
bring back wbreak (preferred or suggested line break (hidden marker) for fluid text. Essentially a tag to break here when a line break is imminent. Balance does solve some awkward typography but gives you no control to change things that don't look better with the underlying "balance" algorithm.
compatibilidad de estilos para impresion de documentos
css itself is my pain point.  I long ago lost all interest in trying to figure it out.
datalist customization, every browser shows options in datalists very differently
flex and grid having properties with very similar names but not exactly, always have to try both justify-content and justify-items
general issues with making a page's subsection scrollable
hyphens : Hyphenation often dosen't work well for other languages than englisch
jss
not that i experience
position: sticky cannot be used when body has overflow-x hidden
pp
printing
refactoring
stacking context
stacking context
stacking contexts
white space options don' t work for all languages. Dutch for instance has very long words and should be broken up in specific places for it to have correct grammer. The current options don't provide that.
why doesn't this `overflow` work?
working with developers who can't be bothered to learn the basics or best practices
z-index and stacking context debugging. Popover positioning.
폰트 사이즈를 % 단위로 사용하지 못하는 점.. vw 단위를 써도 되나, 스크롤 너비를 제외한 문서의 너비인 %를 사용하고 싶음.
	100vh on mobile
	:deep-hover so I can have multiple :hover like states on a whole stack of overlapping (non-ancestorial) elements at the same time. One at a time is a tight bottleneck. Also would like a css-only way to limit focused dropdown keyboard auto selection to a single character instead of the default key input timing-based behavior for instant selection change.
	:nth-child() and similar functions' <An+B> syntax
	<select> tag styling
	A system for single file components in React like Vue has
	Accessibility
	Accessibility
	Accessibility
	Accessibility: ads extra data aria labels for video description so it's possible to add alternative text not only below the video
	Animate from display none to block and backwards
	Animation rendering is slow for more involved animations
	Animations
	Animations
	Architecture and maintenance ❤️
	Been mainly using Tailwind CSS lately, which removes many of the pain points mentioned above. One pain point with that is to get other developers use it consistently and not come up with workarounds when something can be easily done with Tailwind alone. And maybe the issue of using only specific values from the config for spacing, font sizes etc. and not a ton of custom values, but that also requires a good design system and collaboration with designers.
	Better table and selectbox native elements
	CSS
	CSS animations at SVG elements
	CSS and web-components. Global styling should be accessible inside web-components
	CSS has a confusing and all over the place api
	CSS variable auto completion across modules/components/app
	Can't have full-width <details> elements without messing up the marker position
	Canvas for 2D games could be easier.
	Centering a div
	Clip-path styling such as shadow, border, Also class naming
	Code Reuse / Composability ("calling" library "functions" (mixins?))
	Common resources for learning CSS practices fixate on simple pages (e.g. landing pages, basic forms) and never get into complex pages as one might find in a CMS or content-heavy, interaction-heavy site.
	Complexity — CSS is getting to big, too fast. What ever happened to the Extensible Web Manifesto?!
	Container queries solves a lot, but as someone who works with CMS content, being able to adapt to content more easily is high up on the list of wants.
	Contrast colors
	Customising
	Debugging tools
	Default form/browser elements are ugly so the clients want to build their own all the time. I wish we could use the default ones more often, proper accessibility is complicated enough without us developers overwriting defaults.
	Differences in Email Browser and still very low posibilites, very archaic part of this industry
	Dire need of masonry layout, which is still not supported in every browser.
	Drag and Drop styling of dragged object and drop zones
	E-mails! Horrible!
	Email client compatibility
	Font loading
	Font vertical centering by Cap height
	Form Elements Styling, but using tailwindcss is easy
	General re-usability of css which has caused all these libs and frameworks
	I always use the same features of grid, and even if I have been using it for long time I still struggle with complex grid configurations.
	I think is necessary increment the tables functionality
	Image Scaling
	Inconsistent historical naming conventions of properties/rules
	Inline (style attribute) pseudo classes
	Is a pain in the a#?... trying to build a responsive web page, and start to manage all the size posible instead of using variable like sm for mobile or md for tablets. It would be great if we have native media querys like boostrap
	Isonla
	Issues with -webkit-mask-image when used with transforms
	It is difficult to compose components that use different css modules files. It is not possible to specify how you'd like nested styles to cascade for nested components.
	It would be great if there was better support overall for complex native inputs that could be styled in detail.
	It's a pain that creating a variable requires 2 characters '--' and when referring to it requires 6 'var(--' . It would be a lot simpler if creating and referring to a variable, could be done with just 1 character, for instance a dollar sign '$' .
	It's very verbose and complicated
	Javascript devs
	Lack Doc. Lack of description of the layout rendering, not the individual properties.
	Lack of advanced typography as in LaTeX
	Lack of good tolling for CSS, compared to compile time checks as for typescript
	Managing css files, and file organization is the biggest pain point for me.
	Mobile Safari, No Infinite Scroll Snap
	Native elements styling missing documentation
	Parent styling. Adding styling to a parent based on hover on childeren.
	Print Styling with paged media & generated content (page number in TOC)
	Printing PDFs with Puppeteer
	Professionally - Why do I have to ::ng-deep to be able to deal with an element I am pulling onto a page?
	RTL styling when properties don’t have logical variants
	Recognition within the industry that CSS Developers are important and essential
	Screen reader events
	Scrolling in inner elements
	Spring/interruptible animations comparable to iOS/Android
	State management
	Stupid libraries like Tailwind reinventing the wheel
	Styled components getting messed up with some setups.
	Styling native HTML components like select and date picker
	Styling shadow DOM from outside.
	Styling tables
	Suporte a estilização
	Tabels (as tabel not layout)
	Tailwind and other utility-first frameworks
	Text and content overflow between block/flex/grid and inline-* variants
	Text manipulation
	The flex algorithm and how it works in e.g. Safari 14 makes it difficult to e.g. solve the oh so common problem of sticky footers using this solution: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ I have yet to make it work in Safari 14, making this a on-going long task, and fixing it in Safari 14 disrupts it suddenly in newest Chrome. It is difficutl how Safari or something requires an actual height/min-height to be set in the parent and/or flex children in order for the height calculations in the flex layout to propegate sufficently.
	The pain in the ass that is Safari on iOS
	The vast features recently spilled to the browsers. Who can keep up with that? Who needs that? Focus on important feature like A11y would be better...
	Theming
	There are too many features that we can't handle anymore.
	Too many innovations, can't keep up!
	Too many property and variations to keep in mind
	Transitions are still kinda clunky
	Unification of behavior between different browsers in terms of animation or transform properties
	Unintuitive names in flexbox standard
	Using CSS within JS modules without requiring setup on user end
	Variable height tab-panels that don't jump to the top of the page when clicking on tabs.
	Variables are currently still a massive headache. javascript style objects (palette.bg0) could really help
	Z-index
	all of the above
	animation
	animation
	animation while rendering
	animations and transitions
	auto-generated class name i.e. card-fd8da8f89d;
	bring back wbreak (preferred or suggested line break (hidden marker) for fluid text. Essentially a tag to break here when a line break is imminent. Balance does solve some awkward typography but gives you no control to change things that don't look better with the underlying "balance" algorithm.
	compatibilidad de estilos para impresion de documentos
	css itself is my pain point. I long ago lost all interest in trying to figure it out.
	datalist customization, every browser shows options in datalists very differently
	flex and grid having properties with very similar names but not exactly, always have to try both justify-content and justify-items
	general issues with making a page's subsection scrollable
	hyphens : Hyphenation often dosen't work well for other languages than englisch
	jss
	not that i experience
	position: sticky cannot be used when body has overflow-x hidden
	pp
	printing
	refactoring
	stacking context
	stacking context
	stacking contexts
	white space options don' t work for all languages. Dutch for instance has very long words and should be broken up in specific places for it to have correct grammer. The current options don't provide that.
	why doesn't this `overflow` work?
	working with developers who can't be bothered to learn the basics or best practices
	z-index and stacking context debugging. Popover positioning.
	폰트 사이즈를 % 단위로 사용하지 못하는 점.. vw 단위를 써도 되나, 스크롤 너비를 제외한 문서의 너비인 %를 사용하고 싶음.