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

Posted by Stu Cowley
Stu Cowley
26,287 Points

Is It OK To Declare My CSS Like This?

Hey guys,

I have a super simple question on something I'm not 100% on with CSS.

is:

.div-name{ font-size:25px; color: #000; margin-top: 10px; }

An acceptable way to declare CSS anymore?

I ask this because back when I first started learning CSS 2 back in 2006 this is how everyone did it. Fast Forward to 2014 and never see CSS written like this anymore.

Stu : )

5 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Stu;

If you are referring to putting it all on one line, it works but I find it to be more difficult to read and find the properties in the file.

This:

.srt, .form__label--hidden {  border: 0;   clip: rect(0 0 0 0);   height: 1px;   margin: -1px;   overflow: hidden;   padding: 0;   position: absolute;   width: 1px; }
.panel--centered, .panel--padded--centered, [class^="btn--"] {  text-align: center; }
.icn--nav-toggle:before {  display: block;   content: '';   position: absolute; } 
.centered, .grid {  float: none;   margin-left: auto;   margin-right: auto; }
html {  font-family: sans-serif;   -ms-text-size-adjust: 100%;   -webkit-text-size-adjust: 100%; }

is much harder, for me at least, to read and maintain long term than:

.srt, .form__label--hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.panel--centered, .panel--padded--centered, [class^="btn--"] {
  text-align: center; }

.icn--nav-toggle:before {
  display: block;
  content: '';
  position: absolute; }

.centered, .grid {
  float: none;
  margin-left: auto;
  margin-right: auto; }

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

You can, of course, do whatever works best for you, but if you are working with a team of people you will probably run into more code that looks like the second example. CSS files can be thousands of lines in length. Coding it the first way would be, in my opinion, a management nightmare.

Ken

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Hi Stu, it's a work in progress, but you may be interested in CSS Guidelines.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

HI Stu Cowley

Do you mean the entire declaration on a single line? That's OK, but a but harder to read if you're looking at an entire CSS file (in my opinion). I generally like one property/value pair per line.

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

Most style guides suggest you put each declaration on it's own line

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Thanks guys! All of your feedback was helpful and I have entered them all into my vault.

The reason I asked this question was, I was looking over my styles on a project I'm working on and I had a lot of single values in classes, i.e.

.div { color: #eee; }

I felt that I was wasting space, and wasn't 100% is this was good practice for this senario cause I'm all about the best and latest way of doing things.

Stu : )