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
John Tasto
21,587 PointsWhat is the purpose of converting pixels to ems and percentages? Why not just start with ems and percentages?
In nearly every CSS and Sass course here (I've watched a lot of them), the instructor recommends converting pixel values to ems or percentages. For example,
$base__font-size: 16px;
@function em($target, $context: $base__font-size) {
@return ($target / $context) * 1em;
}
or
$grid-column-width: 65px;
$grid-gutter-width: 20px;
$grid-column-count: 12;
$grid-max-width: 1050px;
$context: grid-context($grid-column-width, $grid-gutter-width, $grid-column-count);
@function grid-context($column-width, $gutter-width, $column-count) {
return ($column-width * $column-count) + ($gutter-width * ($column-count - 1));
}
@mixin doubly($margin: 1em) {
& + & {
margin-left: $margin;
@content;
}
}
@media (min-width: 769px) {
@for $i from 1 through $grid-column-count {
$target: ($grid-column-width * $i) + ($grid-gutter-width * ($1 - 1));
.grid__column--#{$i} {
width: percentage($target / $context)
}
}
}
[class^="grid__column--"] { // pretty sure this should be ~=
@media (min-width: 1px) and (max-width: 768px) {
margin: em(12px) 0;
}
@media (min-width: 769px) {
@include doubly(percentage($grid-gutter-width / $context))
float: left;
min-height: 1px;
padding: 0 10px;
&:last-of-type {
float: right;
}
}
}
.grid {
@extend clearfix;
float: none;
margin: 0 auto;
width: 90%;
[class*="grid__column--"] > & { // make nested grid 100%
width: 100%;
}
@media (min-width: 1100px) {
max-width: $grid-max-width;
}
}
To me, this looks like trying to bring old school fixed sized layout into the modern era of fluid design. You get to think of your layout in pixels, but then convert it to ems or percentages at the last second. This only adds another layer of complexity, when you could just start by thinking about it in ems or percentages and never use pixels! Isn't it easier to think of the page width as 100% instead of 960px?
The only situation I can think of where it actually makes sense to think about pixels is when defining media queries, because screen widths actually do have defined pixel widths.
Am I off base here? Is there a benefit to thinking in pixels that I'm not considering?
3 Answers
elk6
22,916 PointsFor the courses it's mostly to get a feel of the difference between them. Or you could use this to change your old projects.
Kevin Korte
28,149 PointsI know "design in the browser is a thing", but most websites have at least partial elements built in some sort of software like Sketch. Because ems and percentages are relative units, it can be hard to use them at this stage in the build process. This usually ends up with a design or gameplan in pixels.
At least with ems, and their cascading nature, you might not be aware at this stage what an em value might actually become on the screen.
There are also times where elements shouldn't scale indefinitely. For readability sake, and thus user experience, line character widths should be a fixed width, even within a responsive design....too wide and it because difficult for the reader to keep track of what line they are on. Thus the age old solution newspapers have employed for every of columns, which CSS gives us a column ability as well. So you might still have to end up converting back to pixels on some things.
At some point too you have to know what width 100% is to accurately build a responsive site. 100% width might be 480px wide, or it might be 1920px wide. 1 em might be 16px wide, or it might be 14px wide, or it might be 18px. I personally still think in pixels, even if that isn't what the end result ends up as.
John Tasto
21,587 PointsI've never used Sketch, but it sounds like it should be updated to allow use of relative units.
For situations where the cascading nature of ems won't work, there are rems (although only IE9+). I think the point of ems though is that you can scale the font on a whole section or page just by changing the size in a top level element, and using pixel values breaks that.
As for your last two points, that is what media queries are for, where it is absolutely appropriate to use pixels.
John Tasto
21,587 PointsHow are you getting an extra line between your paragraphs in markdown?
Kevin Korte
28,149 PointsI haven't tried it yet, but it looks like Sketch might support percentages.
https://medium.com/sketch-app-sources/new-features-in-sketch-3-3-presented-in-gif-cfc1b06e27c8
Still not sure how ems would work in software since it doesn't has a css engine, maybe it could though. I'm not a software engineer. For whatever reason though, it seems many design tools do not support percentage and relative units. And so I think that leaves a lot of front end guys recreating from values they see from the software. Which is also a bit where this "design in the browser" movement came from.
I love this concept Chris Coyier put together to really show the power of ems, and you're exactly right. https://css-tricks.com/rems-ems/
If I wanted to carry a 66 character line length, I might fix that with pixels, while it's container is relative. That would be super common.
Ultimately it comes down to this. There is no right or wrong here. It's up to the developer to decide. I won't be surprised if you see more and more relative units being the base or starting point. I have an suspicion this CSS video might be a bit dated. It is generally still the way the grain tends to go today. If you want to go fresh with percentages and ems, there is nothing wrong about that.
I personally still tend to like to code pixels, and than let my css preprocesser handle my em or rem conversions. I'll do percentages myself. But that's just how I work.
As far as line breaks, just two line spaces and I get the paragraph breaks....but it's not working for you or me in this thread I see...weird. I was not doing anything special. The forum has been buggy lately.
John Tasto
21,587 PointsThanks for sharing that css-tricks article, that is a good idea. I wish Treehouse would display the creation date for their courses, it would help decide what to watch first, and how much weight to give the information it contains.
Kevin Korte
28,149 PointsThat's a good idea, honestly.
Jason DeValadares
7,190 PointsI think most real-world scenarios have you starting with a PhotoShop markup before you start code. You could eyeball it I guess but if you wanted to make sure your customer gets a page exactly as it was shown to him/her, you'd want to get the math right.
John Tasto
21,587 PointsYes, I could see where this would be useful if I were given a mockup. For projects where I start from scratch though, trying out various layouts programmatically is a lot more efficient than using an image editor or some other layout tool.
John Tasto
21,587 PointsJohn Tasto
21,587 PointsI agree, it could be useful to convert old projects, but it comes up so often it seems like they're promoting it as a best practice for new projects. I think a better approach would be to show how to do it using strictly percentages and ems, then say if you want to convert an old project that uses pixels, you can do it like this or use this function.