5 ms·

In the past month or so I finally managed to get into web development (using cloudlfare workers/pages, they are amazing), and I tried to do a bottom up approach

by c-fe 3y ago

In the past month or so I finally managed to get into web development (using cloudlfare workers/pages, they are amazing), and I tried to do a bottom up approach. I really dont like huge frameworks that you install with a sleek small command but they add 100s of weird files to your repository that you have no idea what they are for and cant really all read. So I started off with just HTML, vanilla js and ofcourse CSS. Now after a weeks of using that stack, Im slowly starting to understand why there is certain software (frameworks, packages) that everyone seems to be using, and I may switch as well. One of the first things I ditched was CSS and I switched to tailwind. Apart from making it easier to make stuff look good, it just generally seems to make building layouts so much easier. Maybe I just did not go enough into CSS, but I can not see myself ever going back to vanilla CSS now that I have started using tailwind, so articles like these I always find interesting as they show experienced people not using tailwind so they probably have some good reasons why they prefer CSS.

eyelidlessness 3y ago
I applaud your pragmatism. And I wish this pragmatic attitude was more common here, it’s refreshing in a sea of negativity whenever anything about web dev is posted. Re: CSS layout. It’s actually just a very big, complex practice to become proficient in. If you’re ever inclined to go back and relearn it, it helps to accept that from the outset. Once you’ve accepted that it’s a fairly involved learning process, the successes should feel more significant and the failures hopefully more temporary. But! Re tailwind: if it’s working for you, and you never feel compelled to drop into lower level styling concerns, that’s fine. Great even. You’re getting stuff done that you want to do, with tooling that addresses your needs! I don’t personally love tailwind, and I much prefer to write styles directly… but it’s obvious tailwind solves this well for you and others who don’t share my preference. Re CSS vis tailwind: probably overly pedantic, but you are still using CSS. You’re just not authoring it directly. I’m only pointing this out because you may find a time when tailwind doesn’t do everything you want/need, and it’ll help to know it isn’t some styling black box. It’s just a very thoroughly robust abstraction around the styles you could write directly if you choose. And if that abstraction, however robust, doesn’t fit your needs, plain CSS is always there to supplement it.
- c-fe 3y ago
  Thanks for you words, comments like these make me appreciate sharing my thoughts here! Regarding your points, I don't see myself getting deeper into CSS in the near future, but I can't say it will never happen. For now though, I see both CSS and tailwind as means to an end and I am not yet interested in understanding how they work.
  - jen729w 3y ago
    I've been through your journey, and CSS was by far the hardest to wrap my head around. Once JS clicks the journey is smooth, but CSS always feels like it'll be hard. And then one day ... there it is. It all just makes sense. Not as much sense as JS! But enough sense for me to think, huh, I never thought I'd get this. My one criticism of Tailwind, which I enjoy but do not currently use, is that it's likely to delay if not prevent this ultimate moment. If your long-term goal is to be a proficient front-end developer, I think you should try getting dirty with CSS sometimes. Not always! Use Tailwind when you have a thing you need to get done. But sometimes.
coinfused 3y ago
Same! Really wanted to start from scratch and I'm just using vanilla html/css/js for https://ameye.dev/ https://ameye.dev/ Haven't found the need yet for any frameworks.
- c-fe 3y ago
  i really like the design of your page, good job!
- dorfsmay 3y ago
  > Haven't found the need yet for any frameworks This is a static page, CSS framework shine for dynamic page where style needs to change beaded on state.
PUSH_AX 3y ago
Tailwind is vanilla CSS though right? If someone created a stylesheet that just mapped one class to one CSS rule, and did that over and over for all the kinds of rules (with sensible spacing variations), you've got 90% of what tailwind is as far as I understand. It's just CSS classes.
- matheusmoreira 3y ago
  > mapped one class to one CSS rule So they essentially reinvented the style attribute in a less verbose form?
  - geek_at 3y ago
    Less verbose? Ha, far from it. Look at the tailwind examples. One div tag now has 6 or more classes attached
    - matheusmoreira 3y ago
      Well I suppose it's less verbose than a lengthy style="..." attribute that accomplishes the same thing.
      - ludwik 3y ago
        Now it's a lengthy css instead. It seems to me we are going backwards...
        Hedepig 3y ago
        Out of interest, have you built anything non-trivial with tailwind? I've used CSS, and Tailwind and not worrying about naming everything correctly and not skipping around different files is a dream for me. Perhaps that's my brain, Idk. Further I have gone over old code, and haven't had any problem with maintainability
      - culi 3y ago
        > Well I suppose it's less verbose than a lengthy style="..." attribute that accomplishes the same thing. It's not actually the same thing. What you're talking about is inline styling which takes precedence over class-based styling. It's generally considered bad practice to rely on inline styles. The traditional approach is `style="card"` not `style="...a bunch of rules..."`
matheusmoreira 3y ago
I really like the minimal approach. I started my site as just a GitHub Pages repository with hand-written HTML and CSS. Eventually that became too painful due to the layout repetition and verbosity of HTML. I wanted a lightweight HTML templating language. Pug was great back then but it is now unmaintained. So I forked it into a new project and customized it for my needs.
culi 3y ago
My experience with Tailwind was with Fresh which did NOT allow you to use regular CSS. I found that Tailwind was far from enough to accomplish everything you need and often made it particularly hard to build an accessible web app of any complexity. In addition, anyone looking to mess around with psuedo classes or even just have a more unique style will likely find Tailwind to get in the way more than it helps. At least when it's the only tool you're allowed to use. I understand being forced to ONLY use Tailwind is not how most people have had to experience the tool but my personal experience has made me extremely weary of it I also just don't really understand. It adds a complicated build step. I already previously heavily used "utility classes" in my own vanilla CSS projects and so can anyone else without adding a complex build step. This also inherently provides something like tree-shaking. You don't have any css code you're not using since you only define the classes you want. You also get to know all the CSS variable names. For small projects, Tailwind feels like an overengineered solution to a non-problem (though I respect that it has helped a ton of people bad at CSS make decent looking websites). For large projects, it quickly becomes more of a crutch than a help. For frameworks like React, styled-components already solves issues TW supposedly helps alleviate in a much more elegant way. It seems like the niches TW is helpful for is medium-sized projects and for people who are just... not that good at CSS and not interested in improving
- beezlewax 3y ago
  Why does it help people who are not good at css though? That part I've never understood
  - iudqnolq 3y ago
    For example if you type "center" into the search engine on their docs you'll get a modern reasonable way to center things (flexbox or grid). Whereas if you Google for css centering you'll run into all sorts of different ideas.

by c-fe 3y ago

eyelidlessness 3y ago

I applaud your pragmatism. And I wish this pragmatic attitude was more common here, it’s refreshing in a sea of negativity whenever anything about web dev is posted. Re: CSS layout. It’s actually just a very big, complex practice to become proficient in. If you’re ever inclined to go back and relearn it, it helps to accept that from the outset. Once you’ve accepted that it’s a fairly involved learning process, the successes should feel more significant and the failures hopefully more temporary. But! Re tailwind: if it’s working for you, and you never feel compelled to drop into lower level styling concerns, that’s fine. Great even. You’re getting stuff done that you want to do, with tooling that addresses your needs! I don’t personally love tailwind, and I much prefer to write styles directly… but it’s obvious tailwind solves this well for you and others who don’t share my preference. Re CSS vis tailwind: probably overly pedantic, but you are still using CSS. You’re just not authoring it directly. I’m only pointing this out because you may find a time when tailwind doesn’t do everything you want/need, and it’ll help to know it isn’t some styling black box. It’s just a very thoroughly robust abstraction around the styles you could write directly if you choose. And if that abstraction, however robust, doesn’t fit your needs, plain CSS is always there to supplement it.

c-fe 3y ago
Thanks for you words, comments like these make me appreciate sharing my thoughts here! Regarding your points, I don't see myself getting deeper into CSS in the near future, but I can't say it will never happen. For now though, I see both CSS and tailwind as means to an end and I am not yet interested in understanding how they work.
- jen729w 3y ago
  I've been through your journey, and CSS was by far the hardest to wrap my head around. Once JS clicks the journey is smooth, but CSS always feels like it'll be hard. And then one day ... there it is. It all just makes sense. Not as much sense as JS! But enough sense for me to think, huh, I never thought I'd get this. My one criticism of Tailwind, which I enjoy but do not currently use, is that it's likely to delay if not prevent this ultimate moment. If your long-term goal is to be a proficient front-end developer, I think you should try getting dirty with CSS sometimes. Not always! Use Tailwind when you have a thing you need to get done. But sometimes.

coinfused 3y ago

Same! Really wanted to start from scratch and I'm just using vanilla html/css/js for https://ameye.dev/ https://ameye.dev/ Haven't found the need yet for any frameworks.

c-fe 3y ago
i really like the design of your page, good job!
dorfsmay 3y ago
> Haven't found the need yet for any frameworks This is a static page, CSS framework shine for dynamic page where style needs to change beaded on state.

PUSH_AX 3y ago

Tailwind is vanilla CSS though right? If someone created a stylesheet that just mapped one class to one CSS rule, and did that over and over for all the kinds of rules (with sensible spacing variations), you've got 90% of what tailwind is as far as I understand. It's just CSS classes.

matheusmoreira 3y ago
> mapped one class to one CSS rule So they essentially reinvented the style attribute in a less verbose form?
- geek_at 3y ago
  Less verbose? Ha, far from it. Look at the tailwind examples. One div tag now has 6 or more classes attached
  - matheusmoreira 3y ago
    Well I suppose it's less verbose than a lengthy style="..." attribute that accomplishes the same thing.
    - ludwik 3y ago
      Now it's a lengthy css instead. It seems to me we are going backwards...
      - Hedepig 3y ago
        Out of interest, have you built anything non-trivial with tailwind? I've used CSS, and Tailwind and not worrying about naming everything correctly and not skipping around different files is a dream for me. Perhaps that's my brain, Idk. Further I have gone over old code, and haven't had any problem with maintainability
    - culi 3y ago
      > Well I suppose it's less verbose than a lengthy style="..." attribute that accomplishes the same thing. It's not actually the same thing. What you're talking about is inline styling which takes precedence over class-based styling. It's generally considered bad practice to rely on inline styles. The traditional approach is `style="card"` not `style="...a bunch of rules..."`

matheusmoreira 3y ago

I really like the minimal approach. I started my site as just a GitHub Pages repository with hand-written HTML and CSS. Eventually that became too painful due to the layout repetition and verbosity of HTML. I wanted a lightweight HTML templating language. Pug was great back then but it is now unmaintained. So I forked it into a new project and customized it for my needs.

culi 3y ago

My experience with Tailwind was with Fresh which did NOT allow you to use regular CSS. I found that Tailwind was far from enough to accomplish everything you need and often made it particularly hard to build an accessible web app of any complexity. In addition, anyone looking to mess around with psuedo classes or even just have a more unique style will likely find Tailwind to get in the way more than it helps. At least when it's the only tool you're allowed to use. I understand being forced to ONLY use Tailwind is not how most people have had to experience the tool but my personal experience has made me extremely weary of it I also just don't really understand. It adds a complicated build step. I already previously heavily used "utility classes" in my own vanilla CSS projects and so can anyone else without adding a complex build step. This also inherently provides something like tree-shaking. You don't have any css code you're not using since you only define the classes you want. You also get to know all the CSS variable names. For small projects, Tailwind feels like an overengineered solution to a non-problem (though I respect that it has helped a ton of people bad at CSS make decent looking websites). For large projects, it quickly becomes more of a crutch than a help. For frameworks like React, styled-components already solves issues TW supposedly helps alleviate in a much more elegant way. It seems like the niches TW is helpful for is medium-sized projects and for people who are just... not that good at CSS and not interested in improving

beezlewax 3y ago
Why does it help people who are not good at css though? That part I've never understood
- iudqnolq 3y ago
  For example if you type "center" into the search engine on their docs you'll get a modern reasonable way to center things (flexbox or grid). Whereas if you Google for css centering you'll run into all sorts of different ideas.