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.
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.
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.
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.