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 CSS Foundations Text, Fonts, and Lists Font Properties

Posted by Stoyan Stoyanov
Stoyan Stoyanov
Courses Plus Student 2,061 Points

Question to Guil Hernandez.

So i was wondering for all of the CSS properties about performance. Does the short or the longer definition is faster? Here is some example:

I.

p{

font: italic 3em Lato, serif;
padding: 0 0 2px 3px;

}

OR

II.

p{

padding-bottom: 2px;
padding-left: 3px;
font-size: 3em;
font-style: italic;
font-family: Lato, serif;

}

Thanks for the spent time.

P.S. If somebody loves UX, i am UX designer junior, we can text and communicate to discuss great ideas and plans and researches :).

Again thank you. Best regards your sincerely Stoyan from Bulgaria.

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Stoyan Stoyanov,

As others mentioned in this thread, the effects on performance is insignificant. I also prefer the shorthand properties, but there are cases where declaring each property can make your CSS DRY'er and more maintainable/easier to read. Harry Roberts wrote a pretty good article about this – have a look.

Hope this helps! :)

Stoyan Stoyanov
Stoyan Stoyanov
Courses Plus Student 2,061 Points

This was helpfull thanks :)

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The way you write your CSS rules almost never makes a noticeable difference performance wise. However, the first is strongly favored on style and maintainability grounds.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

This is a very good question, and I'd be interested to see Guil's response.

I don't think that there are any major performance differences between the 2 codes you've given to us but my favourite one is the first one as I think that is better to read. :-)

cc Guil Hernandez