foolip · September 20, 2023 09:52
diff --git a/2023_css_pain_points_freeform.txt b/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 단위를 써도 되나, 스크롤 너비를 제외한 문서의 너비인 %를 사용하고 싶음.