# Best Practices in Styling

**URL:** <https://community.weweb.io/t/best-practices-in-styling/9620>\
**Category:** How do I?\
**Tags:** design\
**Created:** [July 9, 2024, 11:45am UTC](https://community.weweb.io/t/best-practices-in-styling/9620 "2024-07-09T11:45:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![WeeeeeWeb](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/weeeeeweb/32/9689_2.png) [@WeeeeeWeb](https://community.weweb.io/u/WeeeeeWeb)\
**Post date:** [July 9, 2024, 11:45am UTC](https://community.weweb.io/t/best-practices-in-styling/9620/1 "2024-07-09T11:45:51Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [July 10, 2024, 1:21pm UTC](https://community.weweb.io/t/best-practices-in-styling/9620/2 "2024-07-10T13:21:09Z")

</div>

Hey @WeeeeeWeb 👋  
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.

---

<div class="post-metadata">

**Author:** ![WeeeeeWeb](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/weeeeeweb/32/9689_2.png) [@WeeeeeWeb](https://community.weweb.io/u/WeeeeeWeb)\
**Post date:** [July 10, 2024, 1:43pm UTC](https://community.weweb.io/t/best-practices-in-styling/9620/3 "2024-07-10T13:43:52Z")

</div>

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 🙂 .

Btw, great video on YT regarding **GRIDS** 😃

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [July 10, 2024, 1:56pm UTC](https://community.weweb.io/t/best-practices-in-styling/9620/4 "2024-07-10T13:56:17Z")

</div>

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 😃  
Thanks!