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

Miguel Palau
Miguel Palau
24,176 Points
Posted by Miguel Palau
Miguel Palau
24,176 Points

Isn't better to use box-sizing to begin with?

I think that using the box-sizing method we can get rid of this without going through the margins and paddings issues.

*, *::after, *::before
  box-sizing: border-box;

2 Answers

eck
eck
43,038 Points

It depends on how you or your team wants to do it.

I personally always set everything to border-box at the start of a project, since it is rare that I want the content-box behavior.

This is how I declare my box-sizing property:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

You can read about why I do it that way here.

Miguel Palau
Miguel Palau
24,176 Points
Miguel Palau
Miguel Palau
24,176 Points

What a cool answer, thanks makes a whole lot more sense.

I noticed you only used a set of ":" for your pseudos why is that?

Thanks again!

eck
eck
43,038 Points

Ah, you have a good eye :P

I gave you the CSS-tricks code example, but now that you mention it, I would actually use two colons with pseudo element selectors in the CSS I write.

While the CSS will work either way, the reasoning behind using two colons would be "to establish a discrimination between pseudo-classes and pseudo-elements". I believe this is just to make the CSS a bit easier to read.

If you want some additional reading you can check this out.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Miguel,

regarding the pseudos I don't think it matters either way. You can use a single set of colons or two.

Miguel Palau
Miguel Palau
24,176 Points
Miguel Palau
Miguel Palau
24,176 Points

I read about it a bit. So basically using one colon its universal and forwards compatible.

Using 2 is a css3 thing so it's great for more modern browsers and stuff.

Since I usually work with flexbox using 1 colon for the pseudos makes little sense.

Just my 2 cents :)