We have outsourced the html and css design to an external company. We want to make sure the quality of code is good. What benchmarks can we set to achieve this.
Javascript – How to validate the html/css and JS code outsourced to an external company.
cssjavascript
Related Solutions
(I presume you meant to say .style1 .style2 .style3 in your CSS example, otherwise you're referring to tag names.)
In CSS, .style1 .style2 means something completely different from .style1, .style2: the first only applies an element to which has both style1 and style2 classes, the second applies to both style1 and style2 individually. That distinction is vital (don't forget the C in CSS means "cascading"), so there shouldn't be a way of eliminating the need for the comma.
Now, as to why you can't use commas in the HTML element, you may well have a point: unfortunately it's too late to do anything about it.
A lot of these answers are going to cover the broad swaths of ideas, but here's my personal ones:
- Leave room in the form design for error messages.
- Don't put labels in the input boxes!
- Put your CSS and JavaScript in a separate file, unless you know what you're doing and feel properly bad about it.
- Keep design elements the same between pages. It's infuriating when a design component (like a "recently viewed" box) has different markup on every page.
- Don't do what's easy for you, do what's right.
<button>tags suck.backround-imagefor things that really should be<img>tags suck. - Make sure that if you're creating a page component, it can scale. I know most good front-end developers do this, but I've had plenty of instances where someone used a single image in what should have been a top/bottom cap situation. Programmers don't like opening up Photoshop.
- Proofread your templates. Programmers (good ones) are dedicated, detail oriented people. If they start seeing issues in your design (maybe the footer navigation has spelling errors or inconsistent spelling) it's going to make them ask questions and slow down their work.
Finally, and maybe most importantly:
- Learn the basic conventions of the language that is being developed in the back-end. Being able to look at a PHP template and understand the basic syntax behind a
foreachor anifstatement and how to format anechostatement or move a<?php ?>tag around will greatly increase your value as a front-end developer - I love when a front-end developer needs to make a simple change and can do it in the template instead of handing me a new zip of all of their files. - As an addendum, learn to use version control software. You don't need to be an expert, but if I can look at a diff instead of having to try and figure out what changed between two zip files it makes my job a hundred times easier.
Those are just a few - I'm sure there are many more, but if you accomplish all of these you're sure to earn the respect and appreciation of whoever is turning your templates into a web site.
Best Answer
Use lint tools:
The source for css lint is also available at github and according to their docs, html lint should be available soon. The advantages of using the source are:
Have a coding standard for both CSS and HTML and ensure that they're given to your outsourcers. Ensure that deviations from your standard are followed up on and the work rejected. Make sure that you follow this rigidly. As time goes on, one would hope that you get less errors, but the more you allow (especially early on), the more frequent (and worse) they can become.