Code: Beauty and the Beast!

Community
1

I’ve been reading a few random articles recently on good coding practices and techniques and it makes me wonder what other people do in terms of presentation, structure, methods etc, as I’ve not really seen any “definitive standard” so far. What’s your style or maybe you don’t have any? Are you a “rough and ready” coder? Or maybe you use a code beautifier to help you? :scratch:

I know I’m a neat freak when it comes to my css, so I gotta have everything indented or at least structured neatly first and foremost, then apply some comments (so I know what’s coming - logic kicking in) and when I think of it, try to alphabetize my properties, though I must admit, I sometimes only do this when I’m finished with the code and not there and then! :blush:

Do you think people judge you on your code presentation, say in terms of professionalism and quality of work? I can understand why some people might do this but once it works, adheres to standards, shouldn’t it be ok? Or perhaps… why should you have to compromise, if a job is worth doing, it should be done correctly.

Interested to hear your stance on this topic and what approach you apply to your own code! :slight_smile:

2

I’m a presentation perfectionist. My code is always neat and tidy – because it’s all hand-coded, it makes a huge difference doing it that way because then it is much, much easier to debug. It’s easy to make it look near because it’s lean and mean, with no cruft or unnecessary filler. I don’t go a big deal on indenting, because when you have long lines of text or multiple nested indents it can become unclear and difficult to read.

I don’t know if other people judge me on the presentation of my code, but I know that I judge other people on it :cool:

3

Hey Stevie, thanks for your input! :slight_smile:

I can appreciate the nested indents, yes you are right it can become a bit precarious but I think I must be suffering from OCD or something because I still gotta do it! lol :confused:

I tend to judge people on their code also, maybe I shouldn’t? I’m not sure really if it’s fair. Maybe I’m too strict? I guess when I do view code I expect the same effort I would put in and if I see something that falls short of that, I’m irked by it. To me, it just comes across as maybe just thrown together? Then again, it could be a genius piece of code, who cares how it looks behind the scenes! But I guess I do care, that’s the issue. I think coding is like an art and should be displayed as such to be honest!

4

Yeah, my code is all over the place most of the time. Thankfully I’m not getting paid for coding, and the only people looking at the code and judging it are other neat freaks :smiley:

5

Here’s a sample of my code (for a project I’m working on atm):


		 <div id="navbg">
		 <nav>
			 <ul class="navlinks">
				 <li class="liactive"><a href="">Home</a></li>
				 <li class="navli"><a href="">Protein Sequence</a></li>
				 <li class="navli"><a href="">DNA Sequence</a></li>
				 <li class="navli"><a href="">DNA Mutations</a></li>
				 <li class="navli"><a href="">Conclusion</a></li>
			 </ul>
		 </nav>
		 </div><!--navbg-->

When I do HTML, I’ll nest indents but also I’ll comment whenever I close a div with the id name.

My CSS is a bit unconventional. Most people will do something like this:


div {
     height:360px;
}

I like to display my code like:


#col1head
{
 width:469px;
 position:relative;
 display:block;
 margin-left:5px;
 margin-top:30px;
 padding:3px;
 height:50px;
 background-color:#0c728b;
}

That’s personal. I like neat code because it’s easier to read if I view the source. I think we do judge the coder on the code. If it’s condensed to load faster, I can understand that, but when it’s very spacious, liberally commented, and such, I appreciate the effort. I don’t know how you can alphabetize your CSS properties…it would take way too long for me :confused:

I make my code neat for debugging purposes…I don’t care about the people reading my code.

Note: I had a really mean teacher for a web class. I turned off word wrap in Notepad++ (<3) and just kept hitting end, delete, end, delete to condense my code. I just hope it was really hard to grade :smiley:

~TehYoyo

6

For the nested indenting problem, I delay that problem by using 2 spaces for tabs instead of four. I also try and keep things from going over the 80 char mark. Then again…I am very generous with me space bar and enter key. Lots of white space every where. Both in terms of html and css.

Template example of HTML:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" charset="utf-8">
    <title>...</title>
  </head>
<!-- - 80 - 80 - 80 - 80 - 80 - 80 - 80 - 80 - 80 - 80 - 80 - 80 - 80 - 80 - -->
  <body>
    <div id="...">
      <div id="...">
        <div id="...">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ante
          vitae tellus lobortis viverra. Curabitur ultricies neque id dolor
          convallis at pharetra tortor mattis. Sed vel enim eget libero molestie
          varius bibendum volutpat velit. Cras mollis porta quam, ut tincidunt
          mi lobortis dictum. Etiam imperdiet interdum odio sit amet facilisis.
        </div>
      </div>
    </div>
  </body>
</html>

For CSS I keep things condensed but at the same time very open with lots of white space. I also indent whole blocks for rules I deem as children of a parent.


#some-id {
  param: value;
  param: value;
}

  #some-id .nested-class {
    param: value;
    param: value;
  }

If 2 spaces is not enough indent, separating blocks by using a few newline makes it much easier.

7

you should be able to do that with a single search/replace command

it’s trivial in :heart: UltraEdit :heart:

:cool:

8

I’ve actually started to write my CSS in lines, and find it easier to work that way, despite most people seemingly hating it:

#some-id {param:value; param:value;}
  #some-id .nested-class {param:value; param:value;}

I actually find it easier to make my way around the code like that, as there’s a lot less scrolling, and I order things in a pretty logical way (for me, at least).

9

Eek, the crazy mind of the daemon :stuck_out_tongue:

That’s interesting, perhaps it is an individual mindset really. We obviously don’t all think alike and our approach to coding is quite evident of that, in some cases. Maybe it’s attributed to our capacity as coders say in terms of knowledge. Do we tend to “rush” code more because of our increasing knowledge and aren’t really bothered about the “little stuff” like presentation etc? Hmm, my approach to coding “layout wise” has not changed since I started some years ago. I still need to have things neat, in order and with some logic to them, but again that’s when the personal preference comes into play too.

As Rudy said above, it’s the same for me in Notepad++…but you got that already :stuck_out_tongue:

Now that’s just evil :smiley:

:tup: See, this is code in all it’s glory. Respected and displayed as such. You’ve made me notice I also include the “newline” breaks alot to keep things clean. I didn’t realise I did that that much but I do!

Yikes, Ralph I don’t know how you do it! To me, that’s a bit of a nightmare to read. I know where you’re coming from and it is logical, I guess that’s the different mindsets kicking in now. Perhaps mine is leaning more towards a designer than a developer, even with my code :smiley:

10

Lately, I’ve been making it a habit to group everything, from typographic properties, to color, to layout stuff, and I write everything (except the first curly bracket) on a new line, e.g. like so:

#my-id {
   background: rgb(35,35,35) url(image.png) no-repeat 0 0;
   color: rgb(255,255,255);
   text-transform: uppercase;
   text-shadow:1px 0 1px rgba(0,0,0,.8);
   width:80%;
   float: left;
   position:relative;
   top: .5em;
   left:0;
}

The order is:

a) Colors and typographic styles
b) Element dimensions
c) Element positioning/floating, etc.

I find I can scan the properties more easily when they’re grouped by what they affect.

Furthermore, I group all CSS rules based on what they do, so #header, #nav, #footer, Content, #sidebar, .columns are grouped as layout styles, link styles, headings, paragraphs, lists, etc. are grouped as typographic styles, and page-specific styles are grouped separately.

11

Maleika, when I grow up I want to be like you :smiley:

I love your approach, though on a side-note I must say I’m more a hex girl than an rgb one! I see your method and it’s a good one, I can imagine it’s quite easy to get into that routine when you start it. Plus it’ll be easy to find things too when you need to carry out amendments. Huh, puts my alphabetical listing to shame :smiley:

12

Well, yeah, see with things like CSS or static HTML (let alone server side programming) it’s only natural to keep some sort of formatting standard. But try and keep that formatting in the HTML output when its produced by several different parts of the server side code. It’s not worth the effort. Worse yet, if you try to keep the output all neat, the source code often ends up being a mess.

Your blog’s HTML output is all over the place too, Hazel, so just what are you talking about here? :stuck_out_tongue:

13

I use RGB because I find it a lot more practical for when I decide at some point that I’d like to change the opacity and use RGBA, so I might as well write it in RGB right away instead of having to convert HEX to RGB in such situations.

14

I can see your point here, I guess it can be unrealistic in certain instances - I don’t really know enough on “server side programming” to comment expertly on how to control that beast but I’d imagine if there’s a will there’s a way :wink:

Eh, nevermind that meanie…it’s a manic progressive project of mine, I was referring to my CSS presentation at the outset if you recall, not my HTML, though still, I do like order in place there too. I usually “format” when I’m done and as I said, this is an on-going past-time so no rush for me :smiley: …and quit snooping…snooper!

Yeah I figured as much Maleika, you don’t do something unless there’s a valid reason and purpose for it! It’s a good idea and now when I think of it, something I should update to myself, ah…still lots to learn! :slight_smile:

15

That would just drive me mental if every time I edited the text I had to reflow the lines and move the indent spacing around…

16

That’s another interesting thing. How do you write your colors? I think with the addition of RGBA, I’ll start using the RGBA form, but as of now I use Hex.

That seriously makes me want to…do terrible things to myself when I read over code like that.

17

Hmm… not sure what you mean, but if you mean whether I use HEX or RGB, then I always declare my colors and background colors in RGB.

18

That’s what I meant…is it better practice to do it that way? Or just less confusing?

~TehYoyo

19

No need for excuses. I doubt anybody bothers to prettify WordPress output, it’s probably impossible without a speical plugin just for that anyway and then it would just add an unnecessary overhead.

My CSS is pretty too, honest :shifty:

20

I use hex codes because that’s how I’ve always done it since I started designing web sites 13 years ago, when that was all that was on offer. Because I’ve got used to the hex codes for a lot of the colours I use regularly, it isn’t a big deal, but I agree that logically it would make far more sense to use RGB, on the basis that it takes the calculation step out of the process. On the other hand, the purist in me objects to the potentially 12 extra characters need for rgb(255,255,255) instead of #fff … am I a bit obsessed? Maybe … !