@ArielLeslie I wish I could give you more likes, that gif is perfection.
@emersonlbr I’ve been working with CSS for a long time and I’ll STILL get hung up every now and again. It’s especially fun when you’re trying to get each browser to display relatively the same way (cause they all have their quirks you need to work around). My advice is to build up your own personal CSS bag of tricks and practice and perfect them as much as you can.
By that I mean, techniques that you use on the regular: centering things, floating things, building responsive layouts (mobile first is usually the way to go), styling a navigational menu, styling fonts, responsive images, etc. Eventually you’ll be able to predict (for the most part lol) how something will behave when you put a certain style on it. Which is a huge help when it comes to debugging. Again, sometimes I still will get tripped up and it’s usually something stone simple that I’ve left out. And as you go along you can add more advanced tricks to your plate.
My other tip is build habits in your style sheet. Like for example you could always declare widths and heights at the very top of a particular styled element, next padding and margins, maybe then font-stylings or background stuff, etc. Having a consistent way you lay stuff out helps you catch bugs or missing necessary styles faster.
Another example is if you’re working with media queries, some folk like to put them right under the initial element they’re styling, some like to stick them all at the bottom (which is my preference personally). It’s up to you, but whatever you end up doing, remember to be consistent with it.
Don’t be afraid to comment the heck out of your sheet either, I make a little reference section at the top with regularly used colors or styles and an index with section abbreviations (if it’s going to be a long sheet) that I can Ctrl + F/Command+F and go right to that section rather than scrolling down lines and lines of code:
/* ========
Index
NAV - main navigation
LAND - Landing page styles
MEDIA - Media queries
========== */
/* ==========
Color References
Main Body Background: #fefaf1
Upper Body/Specials Background (Brown): #2A1A0A
Font color: #2A1A0A
Link Hover Color/Menu Button Color: #5cb7c4
========== */
...
...
...
/* MEDIA */
@media screen and (max-width: 768px) {
#contact{
max-width: 500px;
padding: 0 5%;
}
}