Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › What programming design principles to you follow for web development
New Posts  All Forums:Forum Nav:

What programming design principles to you follow for web development

post #1 of 4
Thread Starter 
An interesting discussion in a CSS tutorial got me thinking; I'm often quite an elitist when it comes to programming code. I don't mean in terms of the language chosen but in terms of the code produced. While there often isn't a "right" way to code a routine, there are often "better" and "worse" ways.

However web development (and I'm talking strictly client side code here: HTML, CSS, Javascript, etc) is a different paradigm entirely from the compilable languages of C++ right through to server side scripts web scripts like PHP. Aside Javascript, writing client side code doesn't typically require any "programmers intuition".

However my question is, does it matter? And if so, what principles do you apply?

Personally I try and keep each facet of page design separated by their core roles. eg
  • Content: HTML
  • Design: CSS
  • Graphical objects: SVG, PNG, etc
  • client side code: Javascript
I appreciate there are times when mixing the different languages / mark ups are necessary, but i really do try and avoid it where possible. I even go one step further and have a separate CSS file for layout (eg desktop / mobile layouts) and motif (eg the different website themes) to as I see them as two separate aspects of page design. However some people like to throw in some basic graphics rendering into CSS or define styles within HTML (and I'm not talking about embedding CSS within HTML).

I'm not saying my method is correct and other people are doing it wrong. However from my programming background, that method makes the most sense to me as a programmer.

What are your thoughts? Do you follow similar approaches? Do you think I'm over complicating things?
post #2 of 4
For development purposes, splitting all of your HTML, JS and CSS up like crazy can be a great idea. In the production environment you might as well squash them down into as few files as possible (for the JS and CSS anyway). Web browsers don't care about how clean and maintainable your file layout is. The more files they need to download, the longer the page takes to load. Only a few files can be downloaded in parallel after all.
    
CPUMotherboardGraphicsRAM
i7 920 D0 MSI X58 Pro-E GTX 560 Ti 448 3x2GB G.Skill DDR3-1333 9-9-9-24 
Hard DriveHard DriveOptical DriveOS
840 Pro Caviar Black LG BD-ROM Windows 8.1 Pro x64 
MonitorMonitorKeyboardPower
Dell U2713HM Dell U2311H Turbo-Trak (Google it :D) Corsair HX-520 
CaseMouseMouse PadAudio
CM690 Mionix Avior 7000 Everglide Titan AKG K 242 HD 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i7 920 D0 MSI X58 Pro-E GTX 560 Ti 448 3x2GB G.Skill DDR3-1333 9-9-9-24 
Hard DriveHard DriveOptical DriveOS
840 Pro Caviar Black LG BD-ROM Windows 8.1 Pro x64 
MonitorMonitorKeyboardPower
Dell U2713HM Dell U2311H Turbo-Trak (Google it :D) Corsair HX-520 
CaseMouseMouse PadAudio
CM690 Mionix Avior 7000 Everglide Titan AKG K 242 HD 
  hide details  
Reply
post #3 of 4
Thread Starter 
Quote:
Originally Posted by randomizer View Post

For development purposes, splitting all of your HTML, JS and CSS up like crazy can be a great idea. In the production environment you might as well squash them down into as few files as possible (for the JS and CSS anyway). Web browsers don't care about how clean and maintainable your file layout is. The more files they need to download, the longer the page takes to load. Only a few files can be downloaded in parallel after all.

I appreciate that, but that's not really what I meant by modularising everything. I'm not talking about splitting everything up to numerous sub files, I'm talking about keeping the different elements of the page design separate. So you're not using CSS or JS to draw objects.

eg I'm all for embedding CSS into HTML (eg where the file size is less than the HTTP header), just so long as you use <style> instead of setting the style properties in HTML (which I believe is deprecated now anyway)

another example: i'm all for having 1 image clip (or whatever the technical term is) and splitting that via CSS to reduce the footprint of glyphs, as you're still keeping the image data and the layout data separate.

The only reason I keep the motif CSS separate from the layout CSS is because that makes handling themes across different platforms significantly easier. i can use the same theme for different platforms and just change the layout.css depending on which platform the user is on. It also means I can offer a number of themes for the same platforms easily. Other than that, like yourself, I try to keep the number of dependencies for a web page to a minimum.
post #4 of 4
@plan: Back when I used to do web development, I followed your method in its entirety.

I often ask myself the question "Am I overthinking or overcomplicating this?" and I always answer with a second question: "I know it is harder now, but will it be easier for me in the future, had I not done it this way?". The answer to that is always "yes", ergo the answer to the first question is always "no".

smile.gif

Usually this is because I had done it the lazy way the first time, and then realized... oh crap, I need to re-design this NOW.
Ol' Sandy
(28 items)
 
"Zeus"
(12 items)
 
Elite Preview
(6 items)
 
CPUMotherboardGraphicsRAM
Intel Xeon E3-1230v3 Gigabyte GA-Z97X-UD5H-BK MSI Gaming GTX 980 Kingston 32GB (4x8) 
Hard DriveHard DriveHard DriveHard Drive
Plextor PX-256M5S 256GB Samsung EVO 1TB Hitachi HDS721010CLA332 Hitachi HDS723020BLA642 
Hard DriveHard DriveHard DriveOptical Drive
Hitachi HDS723020BLA642 Hitachi HUA722010CLA330 WDC WD10EARS-00Z5B1 TSSTcorp CDDVDW SH-S223B 
CoolingCoolingOSMonitor
Phanteks PH-TC14PE with TY-140's Lamptron FCv5 (x2) Windows 8 Pro 64-bit Dell U2412M 
MonitorMonitorMonitorKeyboard
Dell U2412M Dell U2212HM Dell U2713HM Topre Realforce 87UB | Ducky DK9087 G2 Pro 
PowerCaseMouseMouse Pad
Corsair AX-750 Corsair Obsidian 650D Logitech G700 XTRAC Ripper XXL 
AudioAudioAudioAudio
Beyerdynamic DT-770 Pro 250ohm Schiit Bifrost DAC Schiit Asgard 2 HiVi Swan M50W 2.1 
CPUMotherboardRAMHard Drive
Intel Xeon E5-2620 Super Micro X9SRL-F-B 128GB 1333MHz LSI 9271-8i 
OSPowerCase
VMware ESXi 5.5 SeaSonic SS-400FL2 Fractal Define R3 
CPUMotherboardGraphicsRAM
Intel Core i5-3437U HP EliteBook Folio 9470m  Intel HD Graphics 4000  16GB DDR3 SDRAM 
Hard DriveOS
256GB SSD Windows 10 Insider Preview 
  hide details  
Reply
Ol' Sandy
(28 items)
 
"Zeus"
(12 items)
 
Elite Preview
(6 items)
 
CPUMotherboardGraphicsRAM
Intel Xeon E3-1230v3 Gigabyte GA-Z97X-UD5H-BK MSI Gaming GTX 980 Kingston 32GB (4x8) 
Hard DriveHard DriveHard DriveHard Drive
Plextor PX-256M5S 256GB Samsung EVO 1TB Hitachi HDS721010CLA332 Hitachi HDS723020BLA642 
Hard DriveHard DriveHard DriveOptical Drive
Hitachi HDS723020BLA642 Hitachi HUA722010CLA330 WDC WD10EARS-00Z5B1 TSSTcorp CDDVDW SH-S223B 
CoolingCoolingOSMonitor
Phanteks PH-TC14PE with TY-140's Lamptron FCv5 (x2) Windows 8 Pro 64-bit Dell U2412M 
MonitorMonitorMonitorKeyboard
Dell U2412M Dell U2212HM Dell U2713HM Topre Realforce 87UB | Ducky DK9087 G2 Pro 
PowerCaseMouseMouse Pad
Corsair AX-750 Corsair Obsidian 650D Logitech G700 XTRAC Ripper XXL 
AudioAudioAudioAudio
Beyerdynamic DT-770 Pro 250ohm Schiit Bifrost DAC Schiit Asgard 2 HiVi Swan M50W 2.1 
CPUMotherboardRAMHard Drive
Intel Xeon E5-2620 Super Micro X9SRL-F-B 128GB 1333MHz LSI 9271-8i 
OSPowerCase
VMware ESXi 5.5 SeaSonic SS-400FL2 Fractal Define R3 
CPUMotherboardGraphicsRAM
Intel Core i5-3437U HP EliteBook Folio 9470m  Intel HD Graphics 4000  16GB DDR3 SDRAM 
Hard DriveOS
256GB SSD Windows 10 Insider Preview 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Coding and Programming
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › What programming design principles to you follow for web development