Teaching back-end developers to code semantically 24.08.2008 @ 11:45am 54 comments

While working on a large application in my full-time role, I created a generic stylesheet to handle form styling and came across a few problems with the developer/designer split within the company. Developers often need to write HTML for forms but do not always know/care about semantics/accessibility and this sometimes means inaccessible/non-semantic forms go unnoticed throughout the app.

I wondered if there was a way I could force the developers to code semantically without having to sit over their shoulder and walk them through it each time they needed to mark up a form, and then it came to me.... use more specific CSS selectors.

By using more specific selectors it forces them to code semantically in order to get the style they need. For example instead of the follow:

input {
    border: 2px solid #ccc;
    background-color: #eee;
    }

You can be more specific and use the following as a selector instead:

form fieldset input {
    border: 2px solid #ccc;
    background-color: #eee;
    }

This is just a really simple example but as you can see, if they want their input fields to look right, they need to ensure they are within a form and a fieldset.

Another example might be tables. Some people do not use <thead>, <tfoot> and <tbody> but we can make sure they do by adding them to our CSS selectors.

You can also use attribute selectors to ensure the use of relevant attributes. For example, if you wanted to make sure newly added navigation links always had an accesskey, you could do the following (this will not work in IE6 so you can just add this rule without the attribute selector to an IE6 only stylesheet):

ul#nav li a[accesskey] {
    /* whatever */
    }

Be warned though, there are some attribute selectors that do not work in IE7, so always remember to check your CSS across browsers :)

So... by being more specific, future developers of your website/application will slowly learn that things don't work within your project unless they are semantic and will be coding semantic markup by default in no time! Well, this is the theory.

What people think...

There have been 54 comment(s) on this entry so far. Have something you'd like to say? Feel free to comment below.

Email newsletter software said...
10.03.2010 @ 12:42am

Great Insight.
I am definitetly going to use it on my work.
Thanx for sharing such a useful information.

Alina John said...
08.03.2010 @ 11:05am

hi, really a g8 post. This is very useful info. Keep it up.
Thanks

vans said...
06.03.2010 @ 04:17am

interesting idea, however i feel in larger organisations the cogs and gears turn much to slowly for this approach to catch on!

Le @ Online STD said...
04.03.2010 @ 11:46pm

Informative post, It is quiet difficult to make css working nicely with all browser.

Amir Rezaee said...
04.03.2010 @ 07:50pm

Thanks for that. And a great example! Thanks again!

Rabit Pearl said...
03.03.2010 @ 05:13am

I have a question=) what in the code makes some page index very fast why others take ages to get indexed? Is there any special code you have to put in for the searchengines to find it faster?

Great blogg and i have bookmarked it, if need any help i will contact u !

Tech Guy said...
02.03.2010 @ 10:09pm

I use a pre made template for form styling as well that is not so different

Jimmy Games said...
02.03.2010 @ 08:21pm

wow...this is interesting
i like it...
keep posting

Jadwal Pertandingan Piala Dunia said...
28.02.2010 @ 03:31am

I do not quite understand the CSS code, but this post I added a little knowledge

Hub creation and promotion said...
26.02.2010 @ 01:24am

So you created a template? That is actually a good idea.

find1carrental said...
19.02.2010 @ 11:06am

I will surely try this. Nice post.

Hydroponic systems said...
14.02.2010 @ 10:40am

With "web 2.0" you definitely want to use css code for your forms instead of tables.

Energy said...
13.02.2010 @ 08:57am

So you created a template? That is actually a good idea.

Jump higher said...
13.02.2010 @ 08:56am

Semantic code? What the hell, I have enough trouble learning normal code. :p

jobs for 14 year olds said...
10.02.2010 @ 08:22pm

very useful code, I'm looking for that.

haymn said...
06.02.2010 @ 11:12am

http://www.h-raf.com/vb/ حبايب الرفدين

招聘兼职 said...
03.02.2010 @ 09:17pm

First they have to get over their superiority complex...

rahul ninja said...
02.02.2010 @ 07:31am

HEY REALLY GREAT POST VERY INFORMATIVE AND USEFUL FOR US THANKS FOR THE POST KEEP BLOGGING

يوتيوب said...
27.01.2010 @ 06:18pm

Thanks for the example

مزيكها على كيفك said...
26.01.2010 @ 07:45pm

thankxx

Toronto Movers said...
14.01.2010 @ 10:35am

Thanks for the example

Tyler Brownell said...
05.01.2010 @ 09:29pm

Using more specific CSS selectors is nice to keep things organised, however there is a strain on the browser if all of your selectors are this specific. Be sure to specify as many general rules as you can before you start getting really specific.

For instance, the first is more efficient then the latter:

.last a {}

#header ul li.last a {}

Generally speaking, the less specific your selectors are, the faster the browser will render the CSS.

Great post!

iphone fix said...
04.01.2010 @ 11:08pm

I used to face many problems when I started coding. I had great difficulties with X HTML and CSS, but now I am fully trained to write it. Thanks job up. Great.

Erecciones said...
24.12.2009 @ 10:05pm

I will try this one for my layouts. I will update you if i have some problem regarding this. Erecciones

Bev said...
17.12.2009 @ 11:08am

I hate always trying to get people to follow my instructions. Often I just end up doing the work myself because I get so frustrated!

Line of Credit Loans said...
06.12.2009 @ 10:59pm

Wow you just amaze me . I love reading your blog everyday .

Conversion Vans said...
06.12.2009 @ 10:57pm

I had so many problems when I first started coding but since I started reading your blog .. I have been getting really good. Thank you

Learn said...
30.11.2009 @ 08:46pm

Interesting post. Nice blog design.

inmobiliaria madrid said...
27.11.2009 @ 03:56am

I usually prefer to use CSS and XHTML for designing my website. They can meet most of the requirements.

Michiel Van Kets said...
23.11.2009 @ 08:32am

I used to face alot of problems when i started coding.i had alot of trouble with X HTML & CSS but now i am fully trained for it.thanks for the write up.great job.

eSky - Premium Web Directory said...
22.11.2009 @ 08:01pm

Thanks. Useful tip. :)

Designer said...
22.11.2009 @ 03:34pm

For me I think the greatest will be if I can use any tag that I can define. For example <header> and CSS to be header {} Thanks for tips!

San Diego Electrician said...
10.11.2009 @ 03:22pm

You need a certain brain to read code. It is the same with being a electrician in san diego. Not everyone can do electric work and live to tell.

Poquer said...
05.11.2009 @ 12:00pm

I considered your arguments from the teaching perspective and i really enjoyed reading your post.coding thing is too difficult for me as i am still in process of learning.

Facebook Applications said...
02.11.2009 @ 05:15am

The coding is really tough for newbie to execute it. but you have solved this problem. Thanks

Allen said...
27.10.2009 @ 11:09am

thanks for the tips - im going to give this a shot.

Cloud Antivirus Software said...
16.10.2009 @ 07:55am

very useful post. thanks for everything!

Prostate Cancer Conqueror said...
12.10.2009 @ 02:39pm

Well written. I surely must get more into these techie stuff as time permits. Thanks for sharing these to help back end developers.

Custom Blog Design said...
08.10.2009 @ 01:04pm

You make a geat point here. The problem often stems from the fact that most programmers start working when the front-end (HTML, CSS) part is not well-defined yet just based on wireframes. It's always a good idea to have a full-blown HTML template which the back-end programmer will use to create the pogram that will dynamically generated pages.

niki said...
06.10.2009 @ 11:31pm

I do not quite understand, but your train of thought was very good.

WebMaster Nate said...
28.09.2009 @ 02:00am

Programmers and developers need to learn to collaborate better.

Shaman PVP said...
27.09.2009 @ 08:44pm

great idea. As a developer, I think a 'guide' or example form template you could put together that developers could refer to as they work would help them get started. Sometimes it's hard to just read the css and figure out what the markup is supposed to be.

Annuities said...
23.09.2009 @ 07:05am

An insightful post.Will definitely help.

Thanks,
Steve

Dataflurry said...
22.09.2009 @ 03:10pm

I completely agree... Programmers and programmers and designers are designers, and often times they both need to take the other parties needs in to consideration in order to make an excellent program or script.

Top Exercise Videos said...
20.09.2009 @ 11:08pm

Coding semantically saves you a lot of headache from the start... its always what I recommend to the coders working for me. :)

arab-ia said...
15.09.2009 @ 10:25pm

thanks interesting stuff I

Car rental uk said...
13.09.2009 @ 02:28pm

As a developer of both ends (mostly front) I can see where you're coming from.

I think it's useful for backend developers to have an idea of how front end works and vice versa.

revival said...
13.09.2009 @ 10:53am

Fantastic post - i can really see the value in that

Backpacks for laptops said...
13.09.2009 @ 01:07am

Good stuff. I'm not a developer but I can see the value in this approach. You're altering the structure to streamline the way they see things. Innovative!

Christian Hollingsworth said...
10.09.2009 @ 10:51pm

Great thoughts. What's important to remember, as you mentioned, is compatibility across multiple coders for a certain project. The more semantic and specific - the better.

Free Ringback Tones said...
03.09.2009 @ 03:15pm

yess thanks!!!

Poptropica said...
03.09.2009 @ 03:09pm

Teaching back-end developers to code semantically !! seep ok

Dragon said...
18.08.2009 @ 04:37pm

First they have to get over their superiority complex...

Alien-1 said...
01.03.2009 @ 07:40pm

interesting stuff I might try it in the near future.

Add your thoughts

Fields in bold are required.

Add a comment



Latest entries

Categories

Who am I?

I am Jenna Smith - a front end web developer who has been busy coding XHTML & CSS for the last 6 years. If you are interested in seeing my work or getting in touch you can do so through my growldesign website.