Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Naming Headaches for AJAX & CSS

    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.

    Code:
    /*
    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;}

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 583 Times in 564 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •