6 ms·
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 C
by 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 agoEvery 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 agoIsnt 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 agoFrom 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.
- wwweston 2y ago> and BEM because it was difficult to scope css. I suspect this reflects the cultural problem that in many organizations no one really wants to create or stick to a systematic design. Scoping CSS isn't trivial as a site grows large, but it's far from intractable. Tailwind's orientation on concrete details everywhere is the "just give up" solution -- stop trying to get the organization and culture to do work they don't want to do. EDIT: I'd also guess there's an element of poor feedback loops for most development tools. When people people talk about things like "I don't want to have to look up what every class means", they're speaking to one reality of code componentization across the multiple dimensions of styling/semantics/markup/logic in development environments that often can't support interactive, legible, and interconnective feedback as development is done. There are probably solutions to this but they're more involved and less well known or fungible than just collapsing styling/semantics/markup into a single dimension around a consistent constrained UI domain language you can add to your resume in a week tops. This is friendlier to the predominant "culture" for building front ends right now.
- exceptione 2y ago> Tailwind's orientation on concrete details everywhere is the "just give up" solution Yes, and that is why I am genuinely curious whether going the nuclear approach is still needed, or that css variables, @scope and what-not of today solves the problems of the past. Because it seems that Tailwind introduces problems that CSS sought to resolve, and now DaisyUI seeks to resolve the problems of Tailwind. Are we now at a point that devs do not know enough about the basics and are mentally stuck on tools they do know? Or is it that the old problems still have not been solved?
- moralestapia 2y agoI never got the appeal of Tailwind, it's almost a 1-to-1 map from style="" to classname="", they just made the terms slightly easier to remember. Tailwind is a prime example on how good marketing can help you win a market, even if the alternative is free, even if it's already crowded, even if your product is trash. Marketing wins. Edit: I have used Tailwind, a lot. Recently, upgrading from v3 to v4 in a Next.JS project, which was supposed to be a no brainer, turned out to be a four hour ordeal. I cannot spend that much time just to make sure that "background-color: red" still works, lmao, it is such a travesty. Because of that, I'm in the process of removing it from my projects now.
- Cu3PO42 2y agoFor the longest time, I didn't get it either. It took me actually trying it out in a project to like it. It's true, much of it is the same as writing inline-styles, but it's also more powerful than that. Here's a few things that I like about it: - Ability to use pseudo-selectors, etc. in "inline-styles" - Limited set of predefined values to use for padding, margin, and such that make it a bit easier to stay consistent - Some helpful utilities like good looking shadows and animations Sure, I could achieve all of that in a different way. Nothing about it is ground-breaking or even unique, but it's a nice package that works well for me.
- dsego 2y ago> Limited set of predefined values to us... With the ability to predefine css constants I guess it's now possible to use the style prop directly and not have to use raw hex colors and pixel values (eg. there are css libraries with these https://open-props.style https://open-props.style).
- chamomeal 2y agoThat’s exactly what I thought until I actually tried tailwind. Now I really like it. It has pros and cons like anything though. Trying to style a fundamental component is pretty painful. Like imagine your company’s main “button” element. It’s got 8 different sizes, optional icons on both sides, animations, styles, each needing to support different color combos. Tailwind is miserable for that. You get giant huge balls of spaghetti classes all over your button, and it’s pretty incomprehensible. But for “glue” styles, it’s freakin amazing. Putting those components together, giving them spacing, even making simple components that don’t have lots of conditional properties? It’s really nice. You can style stuff quickly and consistently right from the markdown, you don’t have to think of classnames for every teeny little thing, and you can somewhat imagine what stuff looks like just by looking at the jsx. I remember the crazy hype around it when it got popular, and it really put me off. Didn’t even try it for a long time. Now I’m in a codebase that doesn’t have it, and I miss it! I don’t miss it terribly, but it was a nice little QOL upgrade
- nickpsecurity 2y ago"CSS is not too complicated. It's a good way to style HTML elements." Humans think comparatively. So, it might help to tell them what CSS replaces. HTML has many structures: text, images, links, tables, divisions, etc. We'd have to style them in a procedurally-generated layout. We'd learn a GUI or 2D graphics engine. Maybe several, use a cross-platform with its limits, or write our own. At one point, we needed native extensions like Flash. Learning all of that would be difficult even for an experienced programmer. Whereas, many casual coders have learned CSS fairly easily. Then, it's usually just a matter of twiddling with it until it works right. Also, browsers make the twiddling cycle fast and easy vs testing homebrew GUI's. So, it's definitely easier most of the time. It's not always what's best. It's a nice baseline for HTML, though.
- marssaxman 2y agoMy experience was the opposite: I picked up HTML-based web design quite easily, but when CSS came along, it was so finicky that I was never able to make it reliably do what I wanted. Everything seemed to be connected to everything else by invisible springs, so that if you breathed on one thing a little funny, something unwanted would happen somewhere else. I ended up abandoning web design altogether rather than continue fighting with CSS. With traditional HTML layout, I could just write out a document, and reasonably expect that it would come out looking right: but using CSS was a frustrating, trial-and-error process, where it was often easier to change my design to fit what the CSS was willing to do than to suffer along, wrestling with endless side-effects, trying to make something happen that would have been easy with tables.
- nickpsecurity 2y ago"I picked up HTML-based web design quite easily, but when CSS came along, it was so finicky that I was never able to make it reliably do what I wanted. " That is true. It's easy to learn. It's easy to get to do straight-forward things. It's too unpredictable in many, use cases where an alternative layout might be used. However, those required actual programming on top of executing, third-party code. They went with usually easy and safe for better or worse.
- jmull 2y agoSomething at the level of bootstrap or daisyui makes a lot of sense to me, a developer. But designers I've worked with -- and I've really got to defer to their expertise here -- often seem to be too constrained by the fixed design structure on what I'll call "signature" sites or pages. For things that aren't that important/visible, sure, these general systems work well enough. But for other things, there's a specific vision they are trying to achieve, and forcing that through something like daisyui and bootstrap is a hell of a lot more work (for me) than building from css directly, or from utility classes like tailwind provides. I think the reality is, the developer is building *app-level* components from html, css, and js. Naturally, you reach for something to take drudgery out of it, thus you work in terms of a middle-level abstraction. daisyui and tailwind are both such abstractions, so from a high-level there's isn't really much distinction or argument to be had. tailwind is somewhat lower level and more flexible while daisyui does more for you at the cost of reduced flexibility. Obviously, you pick something like daisyui when you're pretty sure you don't want/need the extra flexibility of tailwind, or tailwind when you're in doubt. Since you're going to have an app-level library of components, it's just not a big deal either way, just a matter of how pleasant it will be to develop and maintain those components.
- grandempire 2y agoLately I’ve been using bootstrap grid only and been happy with that.
- osigurdson 2y agoI think for getting in the 70th percentile of UI design, tailwind + daisyui are fine. If you need to have the absolute best UI, it is necessary to understand CSS from the ground up.
- zelphirkalt 2y agoYep, this aligns with what I think. Gonna check out your website about CSS. In my experience when I need to do some CSS, of course I need to look up how to do things, but I get into it and then it is rewarding, making something work nicely with minimal code. I made a personal website that is responsive without media queries at all. Requirements vary, but when you have a good grasp of CSS and don't rely on other stuff doing CSS for you, you can write good modular CSS, that just works. The tailwind page doesn't manage to have responsive layout that doesn't jump around at arbitrary widths. Instead of floating/moving elements seamlessly when the width is reduced, they suddenly jump around to their next position. This is rather "meh", not great. I guess they go full in with media queries.
- madeofpalk 2y agoI think CSS gets all the flack it gets unfairly because people often run into it as a byproduct of other work they do. Whereas these developers probably aren’t running into windows/macos/ios/android app development.
- wruza 2y agoI’ve ran into almost all of this, and css is still the worst thing in the list. It’s literally the highest wtf/gfy per minute among all. Barely debuggable, inconsistent, comefrom by design, inarticulate crap.
- dsego 2y agoEspecially since all the things that one would expect should be easy were just really difficult to do for a long time, things like vertically centering, layouts before grid/flex, changing a style in one place and not accidentally breaking some other part of html. There was a lot of tribal knowledge about browser quirks, how to clear floating divs for example, selector precedence, how margins collapse, etc, it's all just non-essential complexity that bites you in the ass when you have the least time to deal with it.
- wruza 2y agoExactly. Css is magic, in a sense that you can’t make any sense of it. Just look at this: https://stackoverflow.com/a/19719427 https://stackoverflow.com/a/19719427 , you can “tune” collapsing margins by adjusting overflow, float or position. Yeah! Imagine adjusting your seat by pressing brakes or turning radio off. Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height This is css community fundamentals. It works “perfectly”, but make sure your height is not specified. Oh, and don’t change the container type. And with time it all depends more and more on other hacks, until your layout turns into a knot of hacks and cross-sectional assumptions smeared all across the “codebase”. And then you ought to make fully isolated non-leaky components with it. I mean, you can’t, but here’s a hack to make them fit together. I mean, in this particular case, wow thank god the container is already position absolute.
- bluSCALE4 2y agoThe sad reality is that younger folks are too busy learning JS and backend devs just don't understand it. I've yet to learn new CSS patterns from anyone I've worked with in front end in the last 6 years. On the same note, I've worked on a few teams that have made backwards decisions and have chosen dead tools instead of embracing new CSS patterns. I think I have to take Ana Tudo, Lea Verou and Rachel Andrew for doing enough advocacy to keep my skillset relevant.
- PantaloonFlames 2y agoThanks for all this. > And if you do understand some CSS, getting to the next level and learning how to write scalable CSS is not much harder. I want to believe. I know some CSS and can write SCSS. But reaching the next level seems difficult.
- kevinsync 2y agoI haven't had a chance to read the all the comments so this may have already been mentioned further down the line, but -- IMO mastering CSS (vanilla) is essential to understanding how browsers render content, which itself is vital to understanding how to structure content (and by extension, write browser JavaScript) Just learn it! It's worth it. It also makes Tailwind and all those abstractions way easier to grasp. P.S. Sass (SCSS) is incredibly powerful. Learn that too!
- Izkata 2y ago> Tailwind is just a collection of predefined utility classes which you then over use, breaking a few clean code principles along the way I mean, if you're talking Clean Code the book, I think Tailwind does that "break it down too far" part pretty well.
- tabony 2y agoCSS has way more features today than 15 years ago but is easier to master in my opinion. Back then, CSS implementations had a lot more quirks and you had to keep all of this in your head. Just because one combination of CSS properties in Firefox worked one way did not mean it worked even similarly in Internet Explorer.
- nsonha 2y agoCSS is overly complicated for how little it does. You have to learn it. For comparison, when I did Android development, I never had to "learn" how their xml DSL works, it's mostly "just work"tm. Android has constrain layout, css is now at level 4 and still doesn't have it, it has at least 5 overlapping layout mechanisms. I guess more choices are always fun, if you are a code poet instead of an engineer. CSS was designed without engineers' consideration, while these days it's mainly the (front-end) engineers that write them. No module system, and integration to the rest of the web stack by APIs that feel accidental, class=? <link>?, var(--?), centering things... Don't even get me started on css frameworks, why do I have to do so much work to style on the web, while it's barely any cognitive load to style on any other platform?
- code_for_monkey 2y agoisnt daisy ui basically just doing what bootstrap did back in the day?