In what order should I write my CSS?

HTML-CSS
1

General question.
In what order should I write my CSS?
Alphabetical if yes how?

or should I categorize sections with comments in the css?

Does my CSS look okay?


/*Base*/
body {
    width:100%;
    margin:0;
}

/*Start Navmenu*/
header {
    background-color: #9CA971
}

header ul {
    display: flex;
    justify-content: center;
    margin: 0;

}

header a {
    color:#3C4F62;
    text-decoration: none;

}

header a:hover {
    color: white;
}

header li {
    font-size: 30px;
    list-style-type: none;
    margin-left: 40px;
    margin-top:20px;
    margin-bottom: 20px;
}
/*End Navmenu*/



/*Start sections*/

/*Start Banner*/
#banner {
    width: 100%;
    background-color: #377BA3A3;
    
}

#banner img {
    width:1500px;
    height:200px;
    object-fit:cover;
    display: block;
    margin-left: auto;
    margin-right: auto; 
}
/*End Banner*/

/*Start Intro*/
#introduction {
    background-color:#e3e3e3;
    width: 100%;
    padding-top: 50px;
    padding-bottom:50px;
}
#about {
    display: flex;
    justify-content: row;
    width:900px;
    margin-left:auto;
    margin-right: auto;
    border-radius: 2em;
    /*border:black solid;*/
}

#about img {
    border-radius: 2em;
    border:#4E4E35 solid ;
    margin-top:auto;
    margin-bottom:auto;

}


#info {
   padding: 20px;
   font-size: 20px;
}
/*End Intro*/

/*Start Gallery*/
#recentwork{
    background-color: #B9BF95;
    padding-bottom: 20px;
}
#recentwerktext {
    text-align: center;
}
#recentwerktext h2 {
    margin: 0;
    
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.column {
    display: flex;
    flex-direction: column;
}

.column img{
    margin: 5px;
    border-radius: 2em;
    object-fit:cover;
}

/*End Gallery*/

/*Start testsection*/
#testsection {
    display:flex ;
    flex-direction: row;
    justify-content: space-around;
    background-color:#e3e3e3;
    width: 100%;

  
    

}

#sec1 {
    width: 200px;
    margin-right: 100px;
}
#sec2 {
    width: 200px;
}
#sec3 {
    width: 200px;
    margin-right: 100px;
    
    
    
}

#sec3 img{
  width: 200px;

    
}

/*Start Footer*/
footer{
    background-color: #807F66;
    padding: 20px;
    display: flex;
    justify-content: center;
    
}

footer p {
    margin: 0;
}
2

I personally prefer to write CSS in the order elements appear in the HTML—from the universal selector to the body and so on, following a top-to-bottom structure.

1 Like
3

No, not at all.

The CSS rules are applied in the order they appear, so the order is very important.

Rules applied later will override the rules at the top.

Finally, if everything else is equal, the order of appearance comes into play. When two rules have the same specificity, the one that appears last in the CSS will be applied.
https://www.freecodecamp.org/learn/full-stack-developer/lecture-css-specificity-the-cascade-algorithm-and-inheritance/how-does-the-cascade-algorithm-work-at-a-high-level

Here’s another guide:
https://9elements.com/css-rule-order/

1 Like
4

Hi,
I think writing in alphabetical order would make your job more difficult, especially if you’re working on a huge project with lots of styling.
I also prefer writing my CSS in order of the elements. I think the most common or encouraged order is that. Style the universal selector and body first. Then the main elements like header, nav, section, and footer. Then the rest of the elements.

Your CSS looks great in this order.