Naming Headaches for AJAX & CSS

[jamgood96]

Hey Everyone,

I'm working on a CRM-type project for our company that is driven by CodeIgniter and JavaScript/AJAX. Things have progressed fine so far, but as the site is growing, I'm losing confidence in how I am referencing CSS/HTML elements (divs, classes, form inputs, etc).S ince this is dynamic, I have multiple CSS-popup divs with forms and data entry that are being added and removed throughout the workflow, each one needing to be formatted a certain way.

What is the best way to keep track of all of these? Is there a naming convention that I should be using? When accessing things through AJAX, should I be referencing the class when things change, the form input element, the div id? I know these are very open ended questions with infinite solutions, but I'm curious how people go about managing large sites with dynamic content? An example of how I have some CSS written is below just to give some brief insight.

/*
PROJECT BOX STYLING
*/
#project_addOrEditProjectBox {
	font-size:14px;}
	#project_addOrEditProjectBox .loading {
		margin-left:-25px;
		margin-top:-25px;}
#project_addOrEditProjectBox label {
	display:block;
	font-size:12px;
	margin-bottom:2px;
	text-align:left;}
	#project_addOrEditProjectBox input[name=street] {
	display:block;
	margin-bottom:4px;
	text-align:left;
	width:295px;}	/*-4px for padding, -2px for border*/
	#project_addOrEditProjectBox input[name=city] {
		margin-right:6px;
		width:174px;} /*-4px for padding, -2px for border*/
	#project_addOrEditProjectBox input[name=state] {
		margin-right:6px;
		text-align:center;
		width:29px;}
	#project_addOrEditProjectBox input[name=zipcode] {
		text-align:center;
		width:59px;}

[rnd me]

whatever you do, aim to reduce repetition. for example, all of your rules have an ID selector in front of them ("#project_addOrEditProjectBox"). You said you have other boxes, so i can't help but imagine that many boxes share properties.

so, you would give all of those boxes a class of "box", and use #project_addOrEditProjectBox only to define deviations from the generic box.

likewise, while many aspects of each box needs customization, i'll bet that .box input {text-align: center} could replace several rules in just the css you have shown. You simply spec text-align: left for anything that the more universal rule breaks. Always opt-in on tags and classes, and opt-out on IDs. Ok Ok, don't always do anything, that's bad advice, but do try to keep repetition down to a minimum.