Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › multiple declorations of classes or id's in CSS (real basic question)
New Posts  All Forums:Forum Nav:

multiple declorations of classes or id's in CSS (real basic question)

post #1 of 13
Thread Starter 
Is it valid CSS to have the same class or ID in two different CSS files.

eg

layouts.css
Code:
#breadcrums {
position: relative;
width: auto;
/* and other such positioning definitions */
}

style.css
Code:
#breadcrums {
font-family: 'comic sans';
font-size: 25px;
/* etc */
}

When I've tested something like this, it worked on FF, Chrome, IE (shudder) and Opera - so the browsers definitely do support doing the above. However is this a documented / accepted method or is this "evil"?

The reason I ask is because I want to have a layout CSS and a style CSS, so that I can retain the same style across all web platforms while just serving a different layout CSS per platform (eg phone, tablet and desktop versions of layout CSS). Thus making it easier to manage the site across different platforms.

This isn't a deal breaker by the way. If it is bad practice then there's plenty of other ways I can achieve the same result. This one just struck me as a potentially clean method (assuming it's acceptable) smile.gif
post #2 of 13
It's not bad practice to do that and is completely valid, it's just the outdated way. Use @media queries instead...

Just note that it won't work with IE8, if that's important to you.
Code:
@media all and (min-width: 1001px) {
     #someDiv {
          width: 1000px;
     }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
     #someDiv{
          width: 100px;
     }
}

There's a lot more stuff you can do with @media, this is one of the more basic things you can do with it.

An in-depth explanation can be found here: http://css-tricks.com/css-media-queries/

Also...
http://www.w3schools.com/css/css_mediatypes.asp
http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
Edited by ImmortalKenny - 10/16/12 at 10:31am
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
post #3 of 13
Thread Starter 
excellent. I'll have a read tonight. +rep
post #4 of 13
Thread Starter 
hmmm, I'm not convinced media tags are any good at all.

They force more data to be downloaded (which is exactly what I'm trying to avoid on the mobile platforms) and half the browsers out there don't support them, so you'd need some procedural code to deal with them anyway.

I quite like the fact that you can assign stuff based on screen resolutions, pixel density, but in it's current form, @media generates more code for a less robust implementation. frown.gif

bah, sometimes I hate CSS mad.gif

@ImmortalKenny: Thanks for your links and advice though. Much appreciated. smile.gif
post #5 of 13
Yes it is valid. It is actually why the first letter in CSS stands for Cascading. @media has nothing to do with it.

It will always apply them in the order that you include the css so if a rule is in both definitions, the last one will be the one used. This is a basic and fundamental function of CSS so continue using it!
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #6 of 13
Thread Starter 
Quote:
Originally Posted by glakr View Post

Yes it is valid. It is actually why the first letter in CSS stands for Cascading. @media has nothing to do with it.
It will always apply them in the order that you include the css so if a rule is in both definitions, the last one will be the one used. This is a basic and fundamental function of CSS so continue using it!

I think the @media queries was more an example of another solution to the specific problem I'm discussing rather than CSS in general.

Thanks for the explanation by the way smile.gif
post #7 of 13
I was taught that an id should be used only once & a class can be used multiple time, both can work multiple times but it's easier to update your html if you use that rule.
blue devil
(18 items)
 
  
CPUMotherboardGraphicsRAM
AMD FX 6300 ASRock 970 Extreme3 Asus HD7870-DC2-2GD5-V2 corsair vengeance 2x4GB 
Hard DriveHard DriveOptical DriveCooling
500 GB SATA II 3.0 GB 16MB 7200RPM 1 TB SATA LG dvd-r/w coolmaster hyper 212 
OSMonitorMonitorKeyboard
windows 8 64 bit 19" samsung syncmaster 940bw 42" philips 1080p hd tv Razer Lycosa 
PowerCaseMouseMouse Pad
650 watt corsair bronze certified SILVER/BLACK AZZA ORION BLUE LED Razer deathadder Razer sphex 
OtherOther
intel x-25 v ssd 40 GB kingston 120 GB ssd 
  hide details  
Reply
blue devil
(18 items)
 
  
CPUMotherboardGraphicsRAM
AMD FX 6300 ASRock 970 Extreme3 Asus HD7870-DC2-2GD5-V2 corsair vengeance 2x4GB 
Hard DriveHard DriveOptical DriveCooling
500 GB SATA II 3.0 GB 16MB 7200RPM 1 TB SATA LG dvd-r/w coolmaster hyper 212 
OSMonitorMonitorKeyboard
windows 8 64 bit 19" samsung syncmaster 940bw 42" philips 1080p hd tv Razer Lycosa 
PowerCaseMouseMouse Pad
650 watt corsair bronze certified SILVER/BLACK AZZA ORION BLUE LED Razer deathadder Razer sphex 
OtherOther
intel x-25 v ssd 40 GB kingston 120 GB ssd 
  hide details  
Reply
post #8 of 13
Thread Starter 
Quote:
Originally Posted by mcochran1998 View Post

I was taught that an id should be used only once & a class can be used multiple time, both can work multiple times but it's easier to update your html if you use that rule.

I'm not talking about using id's multiple times in HTML, I'm talking about using id's multiple times in CSS
post #9 of 13
You should be able to if i remember right.
edit now that i think about it i'm sure you can I did just that in one of my school projects.
blue devil
(18 items)
 
  
CPUMotherboardGraphicsRAM
AMD FX 6300 ASRock 970 Extreme3 Asus HD7870-DC2-2GD5-V2 corsair vengeance 2x4GB 
Hard DriveHard DriveOptical DriveCooling
500 GB SATA II 3.0 GB 16MB 7200RPM 1 TB SATA LG dvd-r/w coolmaster hyper 212 
OSMonitorMonitorKeyboard
windows 8 64 bit 19" samsung syncmaster 940bw 42" philips 1080p hd tv Razer Lycosa 
PowerCaseMouseMouse Pad
650 watt corsair bronze certified SILVER/BLACK AZZA ORION BLUE LED Razer deathadder Razer sphex 
OtherOther
intel x-25 v ssd 40 GB kingston 120 GB ssd 
  hide details  
Reply
blue devil
(18 items)
 
  
CPUMotherboardGraphicsRAM
AMD FX 6300 ASRock 970 Extreme3 Asus HD7870-DC2-2GD5-V2 corsair vengeance 2x4GB 
Hard DriveHard DriveOptical DriveCooling
500 GB SATA II 3.0 GB 16MB 7200RPM 1 TB SATA LG dvd-r/w coolmaster hyper 212 
OSMonitorMonitorKeyboard
windows 8 64 bit 19" samsung syncmaster 940bw 42" philips 1080p hd tv Razer Lycosa 
PowerCaseMouseMouse Pad
650 watt corsair bronze certified SILVER/BLACK AZZA ORION BLUE LED Razer deathadder Razer sphex 
OtherOther
intel x-25 v ssd 40 GB kingston 120 GB ssd 
  hide details  
Reply
post #10 of 13
Thread Starter 
Quote:
Originally Posted by mcochran1998 View Post

You should be able to if i remember right.
edit now that i think about it i'm sure you can I did just that in one of my school projects.

Well as others have already said, it's intentional behaviour.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › multiple declorations of classes or id's in CSS (real basic question)