15 ms·

Knowing CSS is mastery to front end development

215 points by tipiirai 2y ago

sublinear 2y ago
> To me, the main reason is different: You won’t be a master at frontend development if you don’t understand underlying mechanisms of a language. True for any paradigm, not just frontend.
- maigret 2y ago
  Of course but that’s a too general statement. What developers IMO fail to get is that CSS is so different because it’s a language to express design and they don’t understand the basics of design. Almost all programming languages are about logic and taught at all CS / programming schools. But design mostly isn’t and is much more complex than people think first (check for example grid theory).
  - mosselman 2y ago
    That is a great observation around logic vs design. Any resources you recommend for more design theory?
    - maigret 2y ago
      Definitely this one https://www.amazon.com/Grid-systems-graphic-design-communication/dp/3721201450 https://www.amazon.com/Grid-systems-graphic-design-communica... but also any other great book about design and architecture. Design have two aspects, the doing (drawing, documenting, adjusting) and the thinking (what’s the actual problem and the concept to solve it, which will give me a frame of choices). There is a lot of content on solving the right problem - check the resources from IDEO, or for a broader view Don Norman for example https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654 https://www.amazon.com/Design-Everyday-Things-Revised-Expand... Also don’t forget typography basics since most websites, apps and documents are mostly only text, there are lots of tutorials out there.
  - smahs 2y ago
    And geometry, which is high school level for the most part IMO but combined with cascading in the third (z) dimension. Introduce 'relative' with its own coordinate system and then do transforms in it (to be fair, its only complex in some cases like where the transformed parent is different from the relative parent). And then get into the time domain for transitions. Its math after all, but not the same that most programming courses teach.
- blitzar 2y ago
  > You won’t be a master if you don’t understand underlying mechanisms. Think I got that in a fortune cookie once.
iammrpayments 2y ago
I’m forking Shopify’s polaris-react library for my personal use and some of the components are clearly made to people who don’t know how to use CSS. For example, there’s a component called “InlineStack” which is just a javascript wrapper for a div with flex. This stuff drives me nuts.
- nfw2 2y ago
  The benefit of components like InlineStack is that the components then have names that semantically describe their purpose in the layout.
  - yolo3000 2y ago
    The fragmentation this creates is not worth it, we're building the tower of Babel of web technologies. If you look at 'modern' web applications every html component is rephrased into something like this 'inlinestack' crap.
    - yurishimo 2y ago
      The tower of Web Babel was built 5 years ago during peak React. It’s gotten better tbh as more competition has creeped into the web space due to React dropping the ball and resting on their laurels. While I understand the gut reaction to seeing something like InlineStack, it’s not any different than a utility class except the abstraction has been made on the component level instead of the CSS level within a bunch of different components. The other thing is that these types of components provide a layer for abstraction that extends beyond the web. If I’m writing a app that targets web and native mobile, I can let the compiler decide which version to place in the build to take advantage of native features of the platform. At a certain scale, programming becomes about maintaining consistency at said scale and less about the craftsmanship of an individual component. As a developer who also enjoys writing CSS and building layouts myself by hand, I understand your frustration but it’s misguided towards a group of developers who are trying to solve different problems. We don’t need to implement everything that FAANG comes up with in their “innovation labs” and I 100% believe that there is a place for handcrafted code in applications for decades to come. But let’s not lose site of the fact that table saws haven’t replaced hand saws. They serve different purposes for different audiences and that’s okay!
sunami-ai 2y ago
CSS: The AI's Achilles Heel
- smahs 2y ago
  On the contrary, I have found reasoning models (DS R1 mostly) to be very good at complex positioning and transition problems. They can't "visualize" anything, so can't design well unless you explain them well (which is the problem in design, most people have vague ideas but can't explain it well in CSS terms).
  - sunami-ai 2y ago
    if you can explain it wel in css you might as well write it yourself :)
- deleted 2y ago
  [deleted]
- postepowanieadm 2y ago
  If only the web took xhtml path.
  - Kwpolska 2y ago
    If only XHTML changed anything besides adding pointless backslashes to <img>...
  - efilife 2y ago
    what would it change?
- quectophoton 2y ago
  Infrastructure as well. I don't think anyone sane would let "prompt engineers" anywhere near their Terraform/OpenTofu/Pulumi/$OTHER code. Giving write access to people who depend on LLMs (as in "can do almost nothing without it") is a recipe for disaster. Even giving write access to a junior is less scary than that, in comparison.
ulrischa 2y ago
"Knowing" CSS in these days is nearly impossible. There are so many language features. Don't get me wrong: CSS today is cool and nearly anything is possible (can Doom run wirh CSS by the way?), but I work as frontend dev for years and I have not the feeling I really know CSS in depth
- becquerel 2y ago
  I think the doom() function is still getting rolled out across the major browsers. IIRC newer versions of Chrome have a working implementation.
- sublinear 2y ago
  These jokes, as lightheartded as they are, need to stop. Especially true on here.
- bryanrasmussen 2y ago
  how many features does CSS - the language - have now in comparison to JavaScript? How many features do the various APIs altogether have. How many features do the various object models have, CSSOM, SVG DOM, HTML DOM, Shadow DOM... What is your knowledge of all these features in comparison to CSS features? Jumping off of that and go look at any mature language and CS subject, there is probably too much for you "know" completely, but there is of course possibility to "know" a general argument for how to use it properly, once that is known individual things is just looking up syntax.
  - bryanrasmussen 2y ago
    ok evidently someone thought that all of these things are easier to know than CSS, which is just ludicrous, and gave me a downvote to let me know their disapproval of my opinion. Very Classy. But not CSS Classy.
    - JansjoFromIkea 2y ago
      I wouldn't get too hung up on downvoting online, ignoring deliberately malicious actors the range of reasons for downvoting can go from "this person posted a hate crime" to "other people already posted something close enough to this" or even "this person gave a perfectly valid answer but it does not feel like it's taking the discussion in the direction I feel it's meant to go"
phartenfeller 2y ago
For me TailwindCSS actually was helpful in learning CSS. You still apply the same core CSS fundamentals. If you created a complex layout in Tailwind, you can also do it in normal CSS. I look up the exact rules behind their classes frequently in their docs. If you just copy classes and don't care to understand them, it's a different story of course.
- robin_reala 2y ago
  You don’t apply the same core fundamentals because Tailwind works to specifically remove the core fundamental of CSS: the cascade.
  - kristiandupont 2y ago
    I guess, but that has certainly been a huge relief in my personal experience.
    - nfw2 2y ago
      yes, specificity wars make it really hard to reuse components across multiple product domains and teams within a large org. by css fundamentals, they just mean what the various style properties do.
  - paradox460 2y ago
    Also removes the sheet, fwiw
  - Sateeshm 2y ago
    How does tailwind remove cascading? It's just css classes.
arcosdev 2y ago
CSS is still a masochistic mess that should be replaced
- recursive 2y ago
  If we were to replace it, what improvements would the replacement have?
noelwelsh 2y ago
Between Tailwind and LLM generation I doubt I'll ever write more than a handful of CSS lines by hand in any future project I work on. CSS has, for me, become like the ASM output of the compilers I use. The result is good enough 99.999% of the time for me and I want to work at a higher level of abstraction.
- OsrsNeedsf2P 2y ago
  The downvoted comment is correct. The only CSS I've used in the last couple years has been to debug issues Claude couldn't resolve - and to delete excess styling that wasn't being applied anywhere. It has given me the flexibility, accuracy, scalability, and proved the test of time (going strong on 3 years)
- Boltgolt 2y ago
  Interesting, I can type CSS much much quicker than describing to an LLM what kind of layout I want and with what look
  - noelwelsh 2y ago
    I find LLMs are best for creating the template, or filling in gaps of my knowledge. Examples: 1. Using a prompt like "Using Tailwind, create a three column layout with main content in the center column and smaller side columns for ancillary information" will generate HTML + CSS faster than I can type. 2. I use the LLM to generate some CSS styling for setting a background blur, which was something I hadn't done before using Tailwind. It created code faster than I could find things in the documentation, though I had to go and patch it up later. In essence it pointed me in the right direction. If I'm looking at a preview and want to change the styling of a particular element it is usually faster to directly edit it myself than get an LLM to do that. Tailwind makes this faster as the CSS is right there on HTML; I don't have to switch between stylesheet and HTML.
    - skydhash 2y ago
      1. I’ve mostly gone to the grid section of the docs of whatever framework I’m using (bulma these days) and copy paste the example, then copy paste my own code when I have enough pages done. > Tailwind makes this faster as the CSS is right there on HTML; I don't have to switch between stylesheet and HTML. I mostly use the web inspector for live edits to get a feel then I copy over the final result to the sheet. For more complex components, I use Codepen.
ripped_britches 2y ago
This is why I fully moved to flutter. Everything, including styling, is just a widget. It’s surprisingly liberating to write boring C# looking code that accurately describes a UI component without inheritance, overrides, style compiling, etc
- b0m 2y ago
  Hi. C# dev here. Would you please elaborate a bit how do you use flutter and C#?
  - baueric 2y ago
    I think he means Dart code resembles C# pretty closely.
- amonith 2y ago
  Same, as C# dev I love Flutter. However I just know in my bones that Google will ditch it some day. It's been too many years without significant adoption and it will stop making sense in the corporate spreadsheet one day.
  - frou_dh 2y ago
    At least according to this post which was on HN recently, Flutter lacking significant adoption is a myth: https://shorebird.dev/blog/dart-macros/#:~:text=Flutter%20has%20been%20%E2%80%9Cdying%E2%80%9D%20or%20%E2%80%9Cabout%20to%20be%20canceled%20by%20Google%E2%80%9D%20since%20we%20started%20the%20project%2010%20years%20ago.%20So%20I%20guess%20if%20%E2%80%9Caccounting%20for%201/3rd%20of%20app%20submissions%20to%20AppStore%20or%20Play%E2%80%9D%20is%20what%20%E2%80%9Cdying%E2%80%9D%20looks%20like%2C%20I%E2%80%99m%20here%20for%20it. https://shorebird.dev/blog/dart-macros/#:~:text=Flutter%20ha...
- pjmlp 2y ago
  Basically why Flash ruled back in the day.
- notpushkin 2y ago
bpev 2y ago
Frankly, I feel like it goes even further than CSS. People don't really talk about HTML that much, probably just because it doesn't change as much as JS frameworks, etc. But that doesn't mean you should ignore it completely and just use a bunch of divs! When you start digging into all the different HTML elements and aria guidelines (for example, the differences between `<nav />` and `<menu role="menubar" />`), I think development starts to be a bit more clear, because you start to see how your tools are intended to be used. I think it also makes decisions around CSS styling more clear. And as a bonus, your code just starts becoming more accessible, which is nice. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
bryanhogan 2y ago
I disagree with many of the comments here. CSS is not too complicated. It's a good way to style HTML elements. There are some popular abstractions to writing CSS such as Tailwind. Although I do see it misguiding a lot of people. When you don't know CSS but want a webpage, use a template instead. If you want deep custom styling you will need to understand CSS. Tailwind is just a collection of predefined utility classes which you then over use, breaking a few clean code principles along the way, but you get a decent looking website without writing all the utility classes yourself, which can be helpful especially in larger team projects. There are improvements to this problem such as DaisyUI. But regardless, they do require some understanding of CSS. And if you do understand some CSS, getting to the next level and learning how to write scalable CSS is not much harder. The simple requirement of having global and scoped styling is a given in every modern framework. This is partly what led me to create a guide on writing modern scalable HTML and CSS: https://webdev.bryanhogan.com/ https://webdev.bryanhogan.com/ - Tailwind (wow, the website is laggy): https://tailwindcss.com/ https://tailwindcss.com/ - DaisyUI: https://daisyui.com/ https://daisyui.com/ - Some modern framework, e.g. Astro: https://astro.build/ https://astro.build/
- Zardoz84 2y ago
  Every time that I see someone talking about Tailwind like a panacea, I put weird faces. For looks a weird way to write a style attribute to a HTML tag. Something that MUST be avoided.
- tacker2000 2y ago
  Isnt daisyui exactly what we were doing before the tailwind stuff came about? Are we now full circle again and need an entire plugin to handle this?
  - wetpaws 2y ago
    [dead]
- exceptione 2y ago
  From daisyui.com: Tailwind CSS provides low-level utility classes, wich usually inlcude only one CSS rule. daisyUI classes are a combination of multiple CSS rule that are named semantically for each part of the UI. So, to put it simple, Tailwind re-implements css property-value pairs as classnames, whereas daisyui re-implements css classnames. It seems like the whole dance is to avoid class="btn" style="font-color: #3e3" So what is different from above is that a style override is now possible via class like class="btn font-color-3e3" (or whatever tailwind provides as builtin class). Are these layers of indirection worth it, and still needed with modern css? I remember we came to css frameworks and BEM because it was difficult to scope css.
sirolimus 2y ago
AI has maketh CSS obsolote
- kristiandupont 2y ago
  How so? That doesn't seem true to me at all.
  - sirolimus 2y ago
    I’m just being hyperbolic as a joke.
Gualdrapo 2y ago
I agree. But I feel like nowadays knowing CSS is not necessary to land a job in FED - while knowing frameworks as React/Next/Vue/whatever is.
- bryanhogan 2y ago
  The idea is that by knowing HTML and CSS you know how to use any framework. Since they are the base technologies that every front-end developer should know, a frameworks should build upon the principles of these. This doesn't hold true for React, since they just decided to do their own thing, but for frameworks such as Svelte this is a core principle they try to stick to.
  - sickblastoise 2y ago
    Svelte is the only framework I have come across that is actually tackling the problem of front end bloat and I love it
- nickpsecurity 2y ago
  HTML/CSS was on most job descriptions I saw. Entry level wanted those and Javascript at a minimum. Your odds are better if you know all three.
  - albedoa 2y ago
    > HTML/CSS was on most job descriptions I saw. Those are going to be on nearly every FE job description you see. I think OP's point is that they are not necessary to land a job despite their automatic inclusion in the job description. (Speaking anecdotally, the companies I have worked for either don't have any CSS masters to sufficiently test for mastery or don't include those experts in the interviewing process. Or, more commonly, we are so desperate for framework devs that any amount of CSS knowledge is considered good enough.)
- alt227 2y ago
  When I am hiring, I will always prioritise devs who have a strong knowledge of HTML/CSS/JS over any frameworks. If you know the language you can use any framework in that language with minimal effort, and the bonuses of being able to troubleshoot underlying issues is invaluable.
andrewstuart 2y ago
Master Css then get the AI to do it.
RealCodingOtaku 2y ago
The mastery to front end development is understanding the semantics of HTML. At every single company I worked for, I had to teach people to stop using div tag for everything. You can style things however you want, or even create components that the browser does not allow you to style (as long as you have fallbacks).
- jfengel 2y ago
  Does HTML even have semantics? You practically can use div for everything, and then use CSS to make it act like whatever component you wanted. You should let the defaults do their job, but they don't do very much. HTML's main semantic is to give things a hierarchical structure. Visually it's a free for all after that
  - theandrewbailey 2y ago
    Yes, html has lots of semantic elements. https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html https://developer.mozilla.org/en-US/docs/Glossary/Semantics#...
  - neontomo 2y ago
    > but they don't do very much no no no, different elements have different behaviours. for example, a button automatically has accessibility features like being able to tab to it and select with Enter key, which is essential for a screenreader. do that with a div and you end up building the functionality from scratch. if all you care about is the visuals, sure, there's little difference, but once you scratch the surface you will have a poor product by not using the correct elements (where there is a clear "correct" ofc, sometimes it's subjective).
    - agos 2y ago
      it's also essential for keyboard navigation. accessibility is not only for people who have some impairment!
    - sickblastoise 2y ago
brigandish 2y ago
The comments here remind of the "Git isn't hard to understand" humblebrags that we hear again and again on this forum, surrounded by a sea of honest and justified criticism. If lots of people complain about understanding your product - intelligent people - then your product is hard to understand. Why is the important question.
- skydhash 2y ago
  Usability is a thing and can be improved in some things, but sometimes it’s people that don’t want to read the manual and instead spend their day chasing after abstractions. Which they will abandon at the first edge case they cannot solve because of the lack of foundational understanding.
- omer_balyali 2y ago
  It doesn't mean that the product is broken. Sometimes intelligence is the worst enemy of self, as you think you can easily understand something or not even have to learn it correctly, as it looks very trivial. This is the case with most software developers that trying to fit mental models from other languages to CSS and then expecting it to behave in the same way. Mismatch of mental models are not uncommon, especially in "intelligent people" as they don't always assume that their understanding may be wrong. For me, biggest issue with CSS is how it's taught, how it's learned and mental models around the concepts. Most people have a different mental model of how the underlying system works, and this mismatch results in developer trying hard to bend CSS to his will. CSS may be good or bad, there can be a better alternative... but are there any practical change that may happen soon enough that we stop learning and understanding how CSS works? Even we have a new language, people will try to use it as they used CSS before, so those intelligent people may do the same mistakes again. We are stuck with CSS, whether we like it or not. I've been writing CSS since 2001 and it progressed immensely, still there are many things that's not possible to do easily with only CSS. But still it's the only thing we have for now and to make it better or to make a better alternative we have to understand how it works before just saying "i need a new tool", as the new tool may have the same issues as well.
karaterobot 2y ago
It's astonishing to me how many front end developers refuse to learn how to use vanilla CSS and Javascript, and the lengths they go to avoid touching them. I think of a lot of modern web tooling as a giant mech suit developers climb into to do battle with the underlying technologies of the web. There's so many layers of abstraction between you and the medium you work in, you can go your whole career without learning how to build a website yourself. The original justification was 'scaling' (a word that stands behind a lot of bad behavior, actually), because you cannot just write bare CSS for a large production website, obviously. But then it creeps down the ladder until pretty soon your hobby website is a 20 megabyte SPA with 500 NPM packages backing it.
- gjsman-1000 2y ago
  I think you miss the point. Having 25 developers trying to manage a CSS stylesheet together while naming classes does not scale. Having 25 developers not worry so much about stepping on other people’s toes with Tailwind scales better. Or in a nutshell: What is one of the hardest problems in CS? Naming things. What is Tailwind’s biggest feature? Build a frontend with minimal need to name things.
  - alt227 2y ago
    Why on earth would you ever have 25 front end developers editing the same classes in the same stylesheet?
    - gjsman-1000 2y ago
      12 year old project, 2 developers per year, turnover every year. That’s all it takes.
      - alt227 2y ago
        > Having 25 developers trying to manage a CSS stylesheet together Your comment suggests you mean 25 developers simultaneously 2 developers per year can easily maintain a coherent stylesheet.
brianbest101 2y ago
[dead]
alberth 2y ago
CSS for styling is straight forward (which makes sense since ‘CSS’ is cascading ‘styling’ sheets) CSS for layout takes sometime getting use too. For me, the benefit of any css framework is not in prepackaged styles - it’s in simplifying layout for desktop/tablet/phone.
efortis 2y ago
Why CSS Modules are so unpopular?
- recursive 2y ago
  It's not standard yet. Behavior is implementation-defined and under-specified. A lot of people have used a thing like this[1], but this[2] is on a standards track. In the documentation for the first one, it describes a default "file scope", but really no definition of what a file is. It seems to be referring to a source file pre-build/bundle, but it really just doesn't say. That would belong in the documentation for some framework, not web platform stuff anyway. The idea of locally scoped styles is reasonably popular. Like vue single-file-components, and n+1 different implementations of "CSS modules". What it really needs though, is standardization. Things like [2] and the upcoming @scope will provide this. [1]: https://github.com/css-modules/css-modules/blob/master/docs/get-started.md https://github.com/css-modules/css-modules/blob/master/docs/... [2]: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md https://github.com/WICG/webcomponents/blob/gh-pages/proposal...
  - Izkata 2y ago
    > In the documentation for the first one, it describes a default "file scope", but really no definition of what a file is. Probably because if you don't know what a file is, you have a lot more you need to learn first. It's a bare basic fundamental that goes way beyond CSS. But scope is true - CSS Modules like to pretend the CSS is specific to where it's used, and gloss over that some css attributes cascade to all children. @scope, and specifically the lower bound part of @scope, would fix this.
    - recursive 2y ago
      You missed my point about the files. Browsers generally don't see files in the way they're talking about. It's not a web standard. It's something for a particular bundle or build tool.
mrcwinn 2y ago
For better or worse, I’ve been using Tailwind since it was released. I’m not even sure I remember intermediate to complex CSS. Better places to spend time. I’m really grateful for what that team has done.
Waterluvian 2y ago
CSS is one of those things you can become very effective with, without knowing it all. I really don’t think you need to know it all. I also think it has a lot of tools you don’t always need. Don’t go crazy with selectors!
deleted 2y ago
[deleted]
spoonfeeder006 2y ago
> Custom icons for an input field? Welp, it’s not that easy for privacy reasons to add a pseudo-class here in certain cases. What exactly are those privacy reasons? And by custom icon for input field is meant replacing the cursor with e.g. an svg?
- AlienRobot 2y ago
  The only thing I can imagine is if they are third-party icons? I don't understand it either.
  - alex-e-leon 2y ago
    The issue is that css doesnt allow adding pseudo elements (:before/after) to input fields, making adding icons to an input a little trickier than with other elements.
fatih-erikli-cg 2y ago
[dead]
ninetyninenine 2y ago
Css is a garbage api. Styling things should not be this hard. We are stuck with it because of tech debt. That’s most of web technology today.
radicalriddler 2y ago
At this point, if you know how the box model works and the difference between margin and padding, you're ahead of 50% of "frontend developers".
moi2388 2y ago
CSS is not the performance bottleneck. CSS is also not difficult. Tailwind is absolute nonsense imo. Either write some good simple plain css, use a framework with scoped css which already completely eliminates the need for tailwind, or use JavaScript css properties (with a slight performance penalty). The performance issues are because of use of heavy frameworks, unoptimised images and 1000 ads and trackers which nobody asked for (except management of course).
rossant 2y ago
Wow, so much hate against CSS here. I like CSS. I first learnt CSS in 1999 or something. Granted, it has grown much more complex (and powerful) since then, it has a lot of quirks, but it's not that bad. Lately, I've built simple websites and small web apps in vanilla Javascript and CSS, without using any framework, and it's much more enjoyable than years ago.
- beryilma 2y ago
  > Lately, I've built simple websites and small web apps in vanilla Javascript and CSS Any public links?
  - rossant 2y ago
    See this for instance: https://atlas.internationalbrainlab.org/ https://atlas.internationalbrainlab.org/ All vanilla JS, HTML, CSS, SVG, except for the 3D widget which is based on Unity.
AMBETech 2y ago
[dead]
joeevans1000 2y ago
htmx
rekabis 2y ago
I agree wholeheartedly. And IMO, CSS isn’t even difficult, it just requires you to properly and effectively visualize the cascade to handle downstream effects. My problem is when people start using cognitive crutches such as LESS and SASS, which bloat the CSS immensely with insanely redundant styling. I once took a generated CSS file from a “professional” and cut it down from over 500kb to less than 180Kb with zero loss of functionality or presentation. One HTML widget had separate - and absolutely identical - CSS for each and every single one of the 25+ pages it was present on. That was 250+ lines of CSS, instantly evaporated by consolidating down to one common class and two special cases that had extra stuff. Which is insane.

215 points by tipiirai 2y ago

> To me, the main reason is different: You won’t be a master at frontend development if you don’t understand underlying mechanisms of a language. True for any paradigm, not just frontend.

maigret 2y ago
Of course but that’s a too general statement. What developers IMO fail to get is that CSS is so different because it’s a language to express design and they don’t understand the basics of design. Almost all programming languages are about logic and taught at all CS / programming schools. But design mostly isn’t and is much more complex than people think first (check for example grid theory).
- mosselman 2y ago
  That is a great observation around logic vs design. Any resources you recommend for more design theory?
  - maigret 2y ago
    Definitely this one https://www.amazon.com/Grid-systems-graphic-design-communication/dp/3721201450 https://www.amazon.com/Grid-systems-graphic-design-communica... but also any other great book about design and architecture. Design have two aspects, the doing (drawing, documenting, adjusting) and the thinking (what’s the actual problem and the concept to solve it, which will give me a frame of choices). There is a lot of content on solving the right problem - check the resources from IDEO, or for a broader view Don Norman for example https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654 https://www.amazon.com/Design-Everyday-Things-Revised-Expand... Also don’t forget typography basics since most websites, apps and documents are mostly only text, there are lots of tutorials out there.
- smahs 2y ago
  And geometry, which is high school level for the most part IMO but combined with cascading in the third (z) dimension. Introduce 'relative' with its own coordinate system and then do transforms in it (to be fair, its only complex in some cases like where the transformed parent is different from the relative parent). And then get into the time domain for transitions. Its math after all, but not the same that most programming courses teach.
blitzar 2y ago
> You won’t be a master if you don’t understand underlying mechanisms. Think I got that in a fortune cookie once.

iammrpayments 2y ago

I’m forking Shopify’s polaris-react library for my personal use and some of the components are clearly made to people who don’t know how to use CSS. For example, there’s a component called “InlineStack” which is just a javascript wrapper for a div with flex. This stuff drives me nuts.

nfw2 2y ago
The benefit of components like InlineStack is that the components then have names that semantically describe their purpose in the layout.
- yolo3000 2y ago
  The fragmentation this creates is not worth it, we're building the tower of Babel of web technologies. If you look at 'modern' web applications every html component is rephrased into something like this 'inlinestack' crap.
  - yurishimo 2y ago
    The tower of Web Babel was built 5 years ago during peak React. It’s gotten better tbh as more competition has creeped into the web space due to React dropping the ball and resting on their laurels. While I understand the gut reaction to seeing something like InlineStack, it’s not any different than a utility class except the abstraction has been made on the component level instead of the CSS level within a bunch of different components. The other thing is that these types of components provide a layer for abstraction that extends beyond the web. If I’m writing a app that targets web and native mobile, I can let the compiler decide which version to place in the build to take advantage of native features of the platform. At a certain scale, programming becomes about maintaining consistency at said scale and less about the craftsmanship of an individual component. As a developer who also enjoys writing CSS and building layouts myself by hand, I understand your frustration but it’s misguided towards a group of developers who are trying to solve different problems. We don’t need to implement everything that FAANG comes up with in their “innovation labs” and I 100% believe that there is a place for handcrafted code in applications for decades to come. But let’s not lose site of the fact that table saws haven’t replaced hand saws. They serve different purposes for different audiences and that’s okay!

sunami-ai 2y ago

CSS: The AI's Achilles Heel

smahs 2y ago
On the contrary, I have found reasoning models (DS R1 mostly) to be very good at complex positioning and transition problems. They can't "visualize" anything, so can't design well unless you explain them well (which is the problem in design, most people have vague ideas but can't explain it well in CSS terms).
- sunami-ai 2y ago
  if you can explain it wel in css you might as well write it yourself :)
deleted 2y ago
[deleted]
postepowanieadm 2y ago
If only the web took xhtml path.
- Kwpolska 2y ago
  If only XHTML changed anything besides adding pointless backslashes to <img>...
- efilife 2y ago
  what would it change?
quectophoton 2y ago
Infrastructure as well. I don't think anyone sane would let "prompt engineers" anywhere near their Terraform/OpenTofu/Pulumi/$OTHER code. Giving write access to people who depend on LLMs (as in "can do almost nothing without it") is a recipe for disaster. Even giving write access to a junior is less scary than that, in comparison.

ulrischa 2y ago

"Knowing" CSS in these days is nearly impossible. There are so many language features. Don't get me wrong: CSS today is cool and nearly anything is possible (can Doom run wirh CSS by the way?), but I work as frontend dev for years and I have not the feeling I really know CSS in depth

becquerel 2y ago
I think the doom() function is still getting rolled out across the major browsers. IIRC newer versions of Chrome have a working implementation.
sublinear 2y ago
These jokes, as lightheartded as they are, need to stop. Especially true on here.
bryanrasmussen 2y ago
how many features does CSS - the language - have now in comparison to JavaScript? How many features do the various APIs altogether have. How many features do the various object models have, CSSOM, SVG DOM, HTML DOM, Shadow DOM... What is your knowledge of all these features in comparison to CSS features? Jumping off of that and go look at any mature language and CS subject, there is probably too much for you "know" completely, but there is of course possibility to "know" a general argument for how to use it properly, once that is known individual things is just looking up syntax.
- bryanrasmussen 2y ago
  ok evidently someone thought that all of these things are easier to know than CSS, which is just ludicrous, and gave me a downvote to let me know their disapproval of my opinion. Very Classy. But not CSS Classy.
  - JansjoFromIkea 2y ago
    I wouldn't get too hung up on downvoting online, ignoring deliberately malicious actors the range of reasons for downvoting can go from "this person posted a hate crime" to "other people already posted something close enough to this" or even "this person gave a perfectly valid answer but it does not feel like it's taking the discussion in the direction I feel it's meant to go"

phartenfeller 2y ago

For me TailwindCSS actually was helpful in learning CSS. You still apply the same core CSS fundamentals. If you created a complex layout in Tailwind, you can also do it in normal CSS. I look up the exact rules behind their classes frequently in their docs. If you just copy classes and don't care to understand them, it's a different story of course.

robin_reala 2y ago
You don’t apply the same core fundamentals because Tailwind works to specifically remove the core fundamental of CSS: the cascade.
- kristiandupont 2y ago
  I guess, but that has certainly been a huge relief in my personal experience.
  - nfw2 2y ago
    yes, specificity wars make it really hard to reuse components across multiple product domains and teams within a large org. by css fundamentals, they just mean what the various style properties do.
- paradox460 2y ago
  Also removes the sheet, fwiw
- Sateeshm 2y ago
  How does tailwind remove cascading? It's just css classes.

arcosdev 2y ago

CSS is still a masochistic mess that should be replaced

recursive 2y ago
If we were to replace it, what improvements would the replacement have?

noelwelsh 2y ago

Between Tailwind and LLM generation I doubt I'll ever write more than a handful of CSS lines by hand in any future project I work on. CSS has, for me, become like the ASM output of the compilers I use. The result is good enough 99.999% of the time for me and I want to work at a higher level of abstraction.

OsrsNeedsf2P 2y ago
The downvoted comment is correct. The only CSS I've used in the last couple years has been to debug issues Claude couldn't resolve - and to delete excess styling that wasn't being applied anywhere. It has given me the flexibility, accuracy, scalability, and proved the test of time (going strong on 3 years)
Boltgolt 2y ago
Interesting, I can type CSS much much quicker than describing to an LLM what kind of layout I want and with what look
- noelwelsh 2y ago
  I find LLMs are best for creating the template, or filling in gaps of my knowledge. Examples: 1. Using a prompt like "Using Tailwind, create a three column layout with main content in the center column and smaller side columns for ancillary information" will generate HTML + CSS faster than I can type. 2. I use the LLM to generate some CSS styling for setting a background blur, which was something I hadn't done before using Tailwind. It created code faster than I could find things in the documentation, though I had to go and patch it up later. In essence it pointed me in the right direction. If I'm looking at a preview and want to change the styling of a particular element it is usually faster to directly edit it myself than get an LLM to do that. Tailwind makes this faster as the CSS is right there on HTML; I don't have to switch between stylesheet and HTML.
  - skydhash 2y ago
    1. I’ve mostly gone to the grid section of the docs of whatever framework I’m using (bulma these days) and copy paste the example, then copy paste my own code when I have enough pages done. > Tailwind makes this faster as the CSS is right there on HTML; I don't have to switch between stylesheet and HTML. I mostly use the web inspector for live edits to get a feel then I copy over the final result to the sheet. For more complex components, I use Codepen.

ripped_britches 2y ago

This is why I fully moved to flutter. Everything, including styling, is just a widget. It’s surprisingly liberating to write boring C# looking code that accurately describes a UI component without inheritance, overrides, style compiling, etc

b0m 2y ago
Hi. C# dev here. Would you please elaborate a bit how do you use flutter and C#?
- baueric 2y ago
  I think he means Dart code resembles C# pretty closely.
amonith 2y ago
Same, as C# dev I love Flutter. However I just know in my bones that Google will ditch it some day. It's been too many years without significant adoption and it will stop making sense in the corporate spreadsheet one day.
- frou_dh 2y ago
  At least according to this post which was on HN recently, Flutter lacking significant adoption is a myth: https://shorebird.dev/blog/dart-macros/#:~:text=Flutter%20has%20been%20%E2%80%9Cdying%E2%80%9D%20or%20%E2%80%9Cabout%20to%20be%20canceled%20by%20Google%E2%80%9D%20since%20we%20started%20the%20project%2010%20years%20ago.%20So%20I%20guess%20if%20%E2%80%9Caccounting%20for%201/3rd%20of%20app%20submissions%20to%20AppStore%20or%20Play%E2%80%9D%20is%20what%20%E2%80%9Cdying%E2%80%9D%20looks%20like%2C%20I%E2%80%99m%20here%20for%20it. https://shorebird.dev/blog/dart-macros/#:~:text=Flutter%20ha...
pjmlp 2y ago
Basically why Flash ruled back in the day.
notpushkin 2y ago

bpev 2y ago

Frankly, I feel like it goes even further than CSS. People don't really talk about HTML that much, probably just because it doesn't change as much as JS frameworks, etc. But that doesn't mean you should ignore it completely and just use a bunch of divs! When you start digging into all the different HTML elements and aria guidelines (for example, the differences between `<nav />` and `<menu role="menubar" />`), I think development starts to be a bit more clear, because you start to see how your tools are intended to be used. I think it also makes decisions around CSS styling more clear. And as a bonus, your code just starts becoming more accessible, which is nice. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

bryanhogan 2y ago

I disagree with many of the comments here. CSS is not too complicated. It's a good way to style HTML elements. There are some popular abstractions to writing CSS such as Tailwind. Although I do see it misguiding a lot of people. When you don't know CSS but want a webpage, use a template instead. If you want deep custom styling you will need to understand CSS. Tailwind is just a collection of predefined utility classes which you then over use, breaking a few clean code principles along the way, but you get a decent looking website without writing all the utility classes yourself, which can be helpful especially in larger team projects. There are improvements to this problem such as DaisyUI. But regardless, they do require some understanding of CSS. And if you do understand some CSS, getting to the next level and learning how to write scalable CSS is not much harder. The simple requirement of having global and scoped styling is a given in every modern framework. This is partly what led me to create a guide on writing modern scalable HTML and CSS: https://webdev.bryanhogan.com/ https://webdev.bryanhogan.com/ - Tailwind (wow, the website is laggy): https://tailwindcss.com/ https://tailwindcss.com/ - DaisyUI: https://daisyui.com/ https://daisyui.com/ - Some modern framework, e.g. Astro: https://astro.build/ https://astro.build/

Zardoz84 2y ago
Every time that I see someone talking about Tailwind like a panacea, I put weird faces. For looks a weird way to write a style attribute to a HTML tag. Something that MUST be avoided.
tacker2000 2y ago
Isnt daisyui exactly what we were doing before the tailwind stuff came about? Are we now full circle again and need an entire plugin to handle this?
- wetpaws 2y ago
  [dead]
exceptione 2y ago
From daisyui.com: Tailwind CSS provides low-level utility classes, wich usually inlcude only one CSS rule. daisyUI classes are a combination of multiple CSS rule that are named semantically for each part of the UI. So, to put it simple, Tailwind re-implements css property-value pairs as classnames, whereas daisyui re-implements css classnames. It seems like the whole dance is to avoid class="btn" style="font-color: #3e3" So what is different from above is that a style override is now possible via class like class="btn font-color-3e3" (or whatever tailwind provides as builtin class). Are these layers of indirection worth it, and still needed with modern css? I remember we came to css frameworks and BEM because it was difficult to scope css.

sirolimus 2y ago

AI has maketh CSS obsolote

kristiandupont 2y ago
How so? That doesn't seem true to me at all.
- sirolimus 2y ago
  I’m just being hyperbolic as a joke.

Gualdrapo 2y ago

I agree. But I feel like nowadays knowing CSS is not necessary to land a job in FED - while knowing frameworks as React/Next/Vue/whatever is.

bryanhogan 2y ago
The idea is that by knowing HTML and CSS you know how to use any framework. Since they are the base technologies that every front-end developer should know, a frameworks should build upon the principles of these. This doesn't hold true for React, since they just decided to do their own thing, but for frameworks such as Svelte this is a core principle they try to stick to.
- sickblastoise 2y ago
  Svelte is the only framework I have come across that is actually tackling the problem of front end bloat and I love it
nickpsecurity 2y ago
HTML/CSS was on most job descriptions I saw. Entry level wanted those and Javascript at a minimum. Your odds are better if you know all three.
- albedoa 2y ago
  > HTML/CSS was on most job descriptions I saw. Those are going to be on nearly every FE job description you see. I think OP's point is that they are not necessary to land a job despite their automatic inclusion in the job description. (Speaking anecdotally, the companies I have worked for either don't have any CSS masters to sufficiently test for mastery or don't include those experts in the interviewing process. Or, more commonly, we are so desperate for framework devs that any amount of CSS knowledge is considered good enough.)
alt227 2y ago
When I am hiring, I will always prioritise devs who have a strong knowledge of HTML/CSS/JS over any frameworks. If you know the language you can use any framework in that language with minimal effort, and the bonuses of being able to troubleshoot underlying issues is invaluable.

andrewstuart 2y ago

Master Css then get the AI to do it.

RealCodingOtaku 2y ago

The mastery to front end development is understanding the semantics of HTML. At every single company I worked for, I had to teach people to stop using div tag for everything. You can style things however you want, or even create components that the browser does not allow you to style (as long as you have fallbacks).

jfengel 2y ago
Does HTML even have semantics? You practically can use div for everything, and then use CSS to make it act like whatever component you wanted. You should let the defaults do their job, but they don't do very much. HTML's main semantic is to give things a hierarchical structure. Visually it's a free for all after that
- theandrewbailey 2y ago
  Yes, html has lots of semantic elements. https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html https://developer.mozilla.org/en-US/docs/Glossary/Semantics#...
- neontomo 2y ago
  > but they don't do very much no no no, different elements have different behaviours. for example, a button automatically has accessibility features like being able to tab to it and select with Enter key, which is essential for a screenreader. do that with a div and you end up building the functionality from scratch. if all you care about is the visuals, sure, there's little difference, but once you scratch the surface you will have a poor product by not using the correct elements (where there is a clear "correct" ofc, sometimes it's subjective).
  - agos 2y ago
    it's also essential for keyboard navigation. accessibility is not only for people who have some impairment!
  - sickblastoise 2y ago

brigandish 2y ago

The comments here remind of the "Git isn't hard to understand" humblebrags that we hear again and again on this forum, surrounded by a sea of honest and justified criticism. If lots of people complain about understanding your product - intelligent people - then your product is hard to understand. Why is the important question.

skydhash 2y ago
Usability is a thing and can be improved in some things, but sometimes it’s people that don’t want to read the manual and instead spend their day chasing after abstractions. Which they will abandon at the first edge case they cannot solve because of the lack of foundational understanding.
omer_balyali 2y ago
It doesn't mean that the product is broken. Sometimes intelligence is the worst enemy of self, as you think you can easily understand something or not even have to learn it correctly, as it looks very trivial. This is the case with most software developers that trying to fit mental models from other languages to CSS and then expecting it to behave in the same way. Mismatch of mental models are not uncommon, especially in "intelligent people" as they don't always assume that their understanding may be wrong. For me, biggest issue with CSS is how it's taught, how it's learned and mental models around the concepts. Most people have a different mental model of how the underlying system works, and this mismatch results in developer trying hard to bend CSS to his will. CSS may be good or bad, there can be a better alternative... but are there any practical change that may happen soon enough that we stop learning and understanding how CSS works? Even we have a new language, people will try to use it as they used CSS before, so those intelligent people may do the same mistakes again. We are stuck with CSS, whether we like it or not. I've been writing CSS since 2001 and it progressed immensely, still there are many things that's not possible to do easily with only CSS. But still it's the only thing we have for now and to make it better or to make a better alternative we have to understand how it works before just saying "i need a new tool", as the new tool may have the same issues as well.

karaterobot 2y ago

It's astonishing to me how many front end developers refuse to learn how to use vanilla CSS and Javascript, and the lengths they go to avoid touching them. I think of a lot of modern web tooling as a giant mech suit developers climb into to do battle with the underlying technologies of the web. There's so many layers of abstraction between you and the medium you work in, you can go your whole career without learning how to build a website yourself. The original justification was 'scaling' (a word that stands behind a lot of bad behavior, actually), because you cannot just write bare CSS for a large production website, obviously. But then it creeps down the ladder until pretty soon your hobby website is a 20 megabyte SPA with 500 NPM packages backing it.

gjsman-1000 2y ago
I think you miss the point. Having 25 developers trying to manage a CSS stylesheet together while naming classes does not scale. Having 25 developers not worry so much about stepping on other people’s toes with Tailwind scales better. Or in a nutshell: What is one of the hardest problems in CS? Naming things. What is Tailwind’s biggest feature? Build a frontend with minimal need to name things.
- alt227 2y ago
  Why on earth would you ever have 25 front end developers editing the same classes in the same stylesheet?
  - gjsman-1000 2y ago
    12 year old project, 2 developers per year, turnover every year. That’s all it takes.
    - alt227 2y ago
      > Having 25 developers trying to manage a CSS stylesheet together Your comment suggests you mean 25 developers simultaneously 2 developers per year can easily maintain a coherent stylesheet.

brianbest101 2y ago

[dead]

alberth 2y ago

CSS for styling is straight forward (which makes sense since ‘CSS’ is cascading ‘styling’ sheets) CSS for layout takes sometime getting use too. For me, the benefit of any css framework is not in prepackaged styles - it’s in simplifying layout for desktop/tablet/phone.

efortis 2y ago

Why CSS Modules are so unpopular?

recursive 2y ago
It's not standard yet. Behavior is implementation-defined and under-specified. A lot of people have used a thing like this[1], but this[2] is on a standards track. In the documentation for the first one, it describes a default "file scope", but really no definition of what a file is. It seems to be referring to a source file pre-build/bundle, but it really just doesn't say. That would belong in the documentation for some framework, not web platform stuff anyway. The idea of locally scoped styles is reasonably popular. Like vue single-file-components, and n+1 different implementations of "CSS modules". What it really needs though, is standardization. Things like [2] and the upcoming @scope will provide this. [1]: https://github.com/css-modules/css-modules/blob/master/docs/get-started.md https://github.com/css-modules/css-modules/blob/master/docs/... [2]: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md https://github.com/WICG/webcomponents/blob/gh-pages/proposal...
- Izkata 2y ago
  > In the documentation for the first one, it describes a default "file scope", but really no definition of what a file is. Probably because if you don't know what a file is, you have a lot more you need to learn first. It's a bare basic fundamental that goes way beyond CSS. But scope is true - CSS Modules like to pretend the CSS is specific to where it's used, and gloss over that some css attributes cascade to all children. @scope, and specifically the lower bound part of @scope, would fix this.
  - recursive 2y ago
    You missed my point about the files. Browsers generally don't see files in the way they're talking about. It's not a web standard. It's something for a particular bundle or build tool.

mrcwinn 2y ago

For better or worse, I’ve been using Tailwind since it was released. I’m not even sure I remember intermediate to complex CSS. Better places to spend time. I’m really grateful for what that team has done.

Waterluvian 2y ago

CSS is one of those things you can become very effective with, without knowing it all. I really don’t think you need to know it all. I also think it has a lot of tools you don’t always need. Don’t go crazy with selectors!

deleted 2y ago

[deleted]

spoonfeeder006 2y ago

> Custom icons for an input field? Welp, it’s not that easy for privacy reasons to add a pseudo-class here in certain cases. What exactly are those privacy reasons? And by custom icon for input field is meant replacing the cursor with e.g. an svg?

AlienRobot 2y ago
The only thing I can imagine is if they are third-party icons? I don't understand it either.
- alex-e-leon 2y ago
  The issue is that css doesnt allow adding pseudo elements (:before/after) to input fields, making adding icons to an input a little trickier than with other elements.

fatih-erikli-cg 2y ago

[dead]

ninetyninenine 2y ago

Css is a garbage api. Styling things should not be this hard. We are stuck with it because of tech debt. That’s most of web technology today.

radicalriddler 2y ago

At this point, if you know how the box model works and the difference between margin and padding, you're ahead of 50% of "frontend developers".

moi2388 2y ago

CSS is not the performance bottleneck. CSS is also not difficult. Tailwind is absolute nonsense imo. Either write some good simple plain css, use a framework with scoped css which already completely eliminates the need for tailwind, or use JavaScript css properties (with a slight performance penalty). The performance issues are because of use of heavy frameworks, unoptimised images and 1000 ads and trackers which nobody asked for (except management of course).

rossant 2y ago

Wow, so much hate against CSS here. I like CSS. I first learnt CSS in 1999 or something. Granted, it has grown much more complex (and powerful) since then, it has a lot of quirks, but it's not that bad. Lately, I've built simple websites and small web apps in vanilla Javascript and CSS, without using any framework, and it's much more enjoyable than years ago.

beryilma 2y ago
> Lately, I've built simple websites and small web apps in vanilla Javascript and CSS Any public links?
- rossant 2y ago
  See this for instance: https://atlas.internationalbrainlab.org/ https://atlas.internationalbrainlab.org/ All vanilla JS, HTML, CSS, SVG, except for the 3D widget which is based on Unity.

AMBETech 2y ago

[dead]

joeevans1000 2y ago

htmx

rekabis 2y ago

I agree wholeheartedly. And IMO, CSS isn’t even difficult, it just requires you to properly and effectively visualize the cascade to handle downstream effects. My problem is when people start using cognitive crutches such as LESS and SASS, which bloat the CSS immensely with insanely redundant styling. I once took a generated CSS file from a “professional” and cut it down from over 500kb to less than 180Kb with zero loss of functionality or presentation. One HTML widget had separate - and absolutely identical - CSS for each and every single one of the 25+ pages it was present on. That was 250+ lines of CSS, instantly evaporated by consolidating down to one common class and two special cases that had extra stuff. Which is insane.