Need Feedback / Opinion about BEM and drawing before coding practice

[vikramvi]

Dear Experts in Industry,

I’m building plain HTML and CSS projects. I would like to follow BEM approach and did drawing above even before writing single line of code in HTML and/or CSS.

Please review & suggest from your real world experiences about this practice.

Thanks in advance.

[javanoob]

I’ve been coding and creating websites both as a hobby and professionally here and there since the mid-1990s.

If doing this helps you stay on track with writing the code or something of course do it. Otherwise my suggestion is to avoid doing all this kind of extra work.

People don’t want nonsense; word documents and schematics and plan layouts when they ask for a website. They want a website.

Many projects I’ve done the client sent me an image they wanted the website to look like. That cuts out guessing and the time it takes to be creative and create all the things we think the client might like.

The times the client gave me an image of what they wanted I loaded their image in to photoshop, sliced it and saved it as html with images, opened it in notepad++ to clear unnecessary code out of it, enter links and adjust it if it needed to be: the client got the website exactly how they wanted it.

There are also times, especially working with php scripting based websites, I’ve created an image of the website to use as a schematic for everything but it wasn’t just a layout plan I used that exact image to cut and slice things from for the actual website.

In my opinion writing a blank plan like you’ve made is a waste of time, extra work that’s not necessary. We know where headers and cards go. We figure out where the navigation location looks best when we put it in the design as we’re doing it and testing it as we go in a browser.

[lasjorg]

If you think it can help your process then by all means go for it. I know some people really like to sketch it out first. I personally think I might benefit from it at times, I just don’t really have the patience for it. For smaller projects with a single developer, I’m not sure if it is time well spent. You should be able to create that layout in the editor without having to sketch it out first.

I might suggest using a different tool, like Figma for the design and maybe look into something like Storybook if you really want to go all out on creating a UI library collection.

[vikramvi]

Thanks for your inputs & valuable suggestions.

I’m guy who is super religious about BDD and TDD, thus strongly believe in “fail to plan, plan to fail” philosophy.

Regards,
Vikram