Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
Posted by eslam said
eslam said
Courses Plus Student 6,734 Points

structuring css

It is a good practice to structure css based on components instead of specific sections ? for example :

      <body>

        <header>
            <h1>some text</h1>
            <nav>
                <ul></ul>
            </nav>
        </header>
        <main>
            <h1>some text</h1>
            <section>
              <header></header>
              <article></article>
              <footer></footer>
           </section>
           <button></button>
        </main>
        <footer>
            <button></button>
           <a href="#">some text</a>
        </footer>

    </body>

so usually what i do is make a comment in css about each section and style it individually like that :

/******************
  general styling
*******************/ 
body {
  property:value;
}

/******************
     header
*******************/ 
header {

}
header nav {

}

header h1 {

}

/******************
        main
*******************/ 
main{

}

main h1 {

}

section header{

}
section article {

}

section footer {

}

main button {

}

/******************
     footer
*******************/ 
footer {

}

footer button {

}

footer a  {

}

will it be a better practice if i group things together like for example :

  • header
  • nav
  • buttons
  • footer
  • forms
  • links
  • images
  • videos
  • sound
  • typography

its like grouping same elements together, like instead of saying header h1 and give it some styles i will instead make a typography section and write comment for each element and what it presents

so what do you guyz think ?

2 Answers

leorohmann
leorohmann
2,466 Points
leorohmann
leorohmann
2,466 Points

You can have both in the css! And you should! Usually firstawall comes all the general informations for elements (font-styles, headlines, colors ...) Under this general information you should make separated css sections (as it is in your css), So make one section for header another for footer and so on.

For example:

General Styles

## Body ## Headlines ## Colors ## Elements ### Paragraphs ### Articles ### Sections

Header

Footer

...

Do you know what I mean? @eslamsaid

Diego ROJAS
Diego ROJAS
1,781 Points
Diego ROJAS
Diego ROJAS
1,781 Points

What I personally do is I make separate css files for each component of my website (Header, Footer, Widget...). It is consider best practice to do so when working with real life project. If you're just messing around trying new things out put everything in the same file. If it's a real project make a folder for each HTML page and a global folder to put everything that is comon to all / some of our HTML pages.

Doing so is great for

-Debugging

-Media Queries

-Keeping a clear hierarchy (Which style will be applied depending on the order you're loading your files in)

Also to keep your project clean and human readable and to style things up MUCH faster I'd suggest you use SASS or SCSS which are amazing styling languages

Unlike many many docs out there SASS documentation is great: https://sass-lang.com/

Hope that helps :D

Happy coding