Survey Form code structure - SMACSS, readability and best practice

Survey Form code structure - SMACSS, readability and best practice
0

Hallo.

I rebuilt my survey form from scratch using some of the things I’ve learned since completing the other projects.

https://codepen.io/JDarke/pen/YoojmX

I’ve tried using the SMACSS guidelines this time, so I’d appreciate any feedback on how I’ve laid out my code and how clear my comments are, and any pointers on best practice as I’m trying to get into good habits early on.

Feel free to also give feedback on the form itself, of course. :slight_smile:

Thanks!

@JDarke, I liked your first form better. With that one I was able to select the labels for the radio buttons and checkboxes. With this one, user can only click the radio button/checkbox.

Couple of other things;

  • don’t add case to any of the HTML elements. (You have <Main> </Main>)
  • try to not use the <br> element. Use margin and/or padding in CSS.
1 Like

Long before Flexbox I was learning a CSS framework competing with Bootstrap that used SMACSS. It organized and flattened out my CSS making it easier to troubleshoot CSS due to a lack of compound selectors and I only used IDs for WAI-ARIA for RIAs because it wasn’t optional there. So I grouped and alphabetized elements, IDs, and classes. Had a lot more CSS then then you have with Flexbox. I noticed you’re trying to list CSS in the order it appears. Some would call that a geographical approach. That is the approach I prefer now. The main thing is to stick with a system. It may help to incorporate a naming convention like the one I linked to to keep your selectors flat and more descriptive. Good job on tightening up the CSS.

1 Like

Yeah, the first form was technically superior, as I based it on the example survey project. This new one was built from scratch, trying to see if I could get the same result through different methods (namely using a grid layout).

Good point about the clickable labels - I’ll definitely try to add that back in!

Point taken on the use of case in elements, and I did take out some lazy linebreaks as you suggested on my first form - I just haven’t managed to lose the ones in the radio section yet. :confused:

Thanks again for the feedback! Much appreciated.

1 Like