How to Write Good HTML & CSS with Webflow

Interesting approach to writing HTML and CSS:

https://medium.com/@aaronthompson_77458/how-to-write-good-html-css-with-webflow-b6614d0479b2

Do you think Webflow or similar visual tools might become a mainstream way of writing HTML and CSS? I wonder because I'm learning to code and I'm afraid I might end up wasting a lot of time learning to code all by hand when I should learn to use a tool like Webflow. What do you think?

 

If you learn to code by hand, that experience will be useful no matter WHAT languages you use in the future. On the other hand, taking "short cuts" gives you experience that is NOT portable from one language to another.

 

I just saw your reply. I replied in the Wappler thread.

Wappler and Webflow look very similar, but Wappler seems far more powerful. I wonder if one of them stole the idea from another.

 

Nearly all bad ideas are stolen, so yes.

gary

 

Why is Webflow a bad idea? So far, it looks pretty promising for people like me struggling to learn to code. It seems to help to visualize the whole CSS layout concept while saving a bunch of keystrokes. No?

 

I spent many hours trying Webflow by now. The more I experiment with Webflow, the more I become frustrated with its limitation and workarounds.

One of the things that came up as I learn CSS is nested targeting. I noticed some @deathshadow code examples had this idea. Ex. You can write "#navMenu a {color: #fff;}" to change font color of ALL links inside "#navMenu" div. I learned in the very beginning that was where the term "Cascade" came from. You start with big picture stuff and then go down to change only some specifics where the big picture stuff doesn't apply. I thought, "Cool." Then, today, I found out that I couldn't do it with Webflow. Basically, I have first to create a class, and then I need to go over every g0ddamm line of the same tag to assign the silly class. So, if I have seven menu items, I click through every single one of them and assign the same damned class. WTF!?!? Imagine having to do that for all kinds of tags across the entire website. Shieeetttt.

So, I started going over some Webflow videos on YouTube to find out if there is a way to do this, and somehow, I came across this:

Webflow founder interview



In this video, he says something like this:

-----
We do put some constraints on really deeply nested CSS selectors usually because it's a bad practice to go down….. For example, we don't allow nested classes unless they are class and tag based..... We want to move our design to component-based thinking where we don't need to worry about these crazy nested, sass-driven stuff that we see nowadays..... In any case, anything that we can't do inside Webflow, we do it in custom code (section in Webflow).
-----

1) What "crazy nested sass-driven classes" is he talking about?

2) If I have to resort to custom code and write code, what the hell is the point of using Webflow when it promises to ELIMINATE the need to know the code and SAVE TIME? What I found is, Webflow still requires me to know HTML/CSS.

Besides all of that, Webflow is starting to feel like I'm writing an essay with a bunch of drag and drop pre-written paragraphs and then trying to figure out how to change that one line inside the box instead of writing exactly what I want to say from scratch. This visual editing thing hasn't worked quite as well as I expected after all. Frustrating.

 

Welcome to the high speed development world of "helper" apps.

g

 

A few more agonizing hours of Webflow. I gave up. Webflow SUCKS. Abso-fukk'n-lutely SUCKS. I thought writing HTML and CSS by hand was slower, but I found that the complete opposite is true; handcoding is FASTER than Webflow. Not only that, I tried to create a basic layout without any fancy tricks, and Webflow still attaches over 2,400 lines of CSS code (when unminified). My handcoding equivalent needed only about 70 lines. I couldn't work around the responsive weirdness with the layout, either, because they seem to use a set of pre-configured breakpoints. Worse, I browsed through their support forum and the vast majority of "I can't do X and Y. How do I do those things in Webflow?" questions are met with "Throw this custom code in the custom code section." WTF, why don't I just learn the damn code and write it then!?!?

So, yeah, @deathshadow and the other people opposed to the GUI editor idea were right; I'm gonna stop wasting my time with those WYSIWYG junk and learn to code in a text editor. HTML makes sense only through that approach.

 

No it isn't, it's garbage. Have you actually read any of the thread?

 

That's what I hoped it to be until I spent many agonizing hours over the past weekend and figured that the opposite was the case.

Clean?? How are 2,400 lines of CSS code for a bare minimum basic layout "clean?" That's what I got when I tried it.

I just don't see how it's helpful to generate a bunch of convoluted code and then fix it or rewrite it by hand to implement. Again, I thought the opposite way when I started this thread last week. Now, after spending agonizing hours wrestling with Webflow and learning more HTML/CSS, I'm on the other side of the argument.

 

Knowing HTML and CSS fluently will help you code with far more freedom than learning web flow. HTML and CSS are building blocks of browser code. Do not skip the basics!