Best Practices in Styling

Ask us anything How do I?
1

Hi,
I have been following the tutorials and videos and taking a look into the best way to style the frontend in terms of performance. Although some tutorials suggesting using Sections to better organize and separate the parts of the page, somehow it seems a bit of overkill. I am not a frontend designer, so not sure fully of best practices.

I need to add 3 parts in a page, Assuming the paddings, row gaps and margins will be uniform and I will in the content have some columns/divs to make some horizontal sections throughout the page, wanted to make a small brainstorm, what would be best in terms of “performance design”:

Scenario 1

*** 1 Section**

  • 1 heading
  • 1 subheading
  • 1 container - Content

*** 1 Section**

  • 1 heading
  • 1 subheading
  • 1 container - Content

*** 1 section**

  • 1 heading
  • 1 subheading
  • 1 container - Content

Scenario 2

*** 1 Section**

  • 1 container
  • 1 heading
  • 1 subheading
  • Content
  • 1 container
  • 1 heading
  • 1 subheading
  • Content
  • 1 container
  • 1 heading
  • 1 subheading
  • Content

Scenario 3

1 Section

  • 1 Container
  • 1 heading
  • 1 subheading
  • Content
  • 1 heading
  • 1 subheading
  • Content
  • 1 heading
  • 1 subheading
  • Content

Thank you very much in advance :slight_smile:

2

Hey @WeeeeeWeb :wave:
Scenario 1 seems the best to work on imo.
It makes finding things on the Layout panel much easier. Event more when you rename all elements.
Also, WeWeb have some nice feature with sections like multi-page sections to easily create instances/copies.

You can create classes and spacing variables (in the Library) to define global properties (padding, gaps…) and apply them to different elements.

1 Like
3

Hi @jptrinh,
Good to hear that, thanks a lot. I was afraid that too many sections would impact speed due to more sub-elements, thus me keeping headings always within the section and not creating another container/div for this, because I do like to organize content with the sections.

I did notice the multi-page sections, need to find sometime to test it properly, I do use a lot the sidebars for this, a time saviour :slight_smile: .

Btw, great video on YT regarding GRIDS :smiley:

4

Also, there is an improvement coming up that will reduce the nesting of div (due to WeWeb generated div). Can’t wait for that improvement :smiley:
Thanks!

1 Like