Enhance CSS - merge two #

utnalove · 08-27-2012, 08:33 PM

Hello, I have two divs which use the same code:
<div id="menu-nav">
and
<div id="menu-nav-sec">

Their codes are:

Code:

#menu-nav ul ul a{color:#fff;background:#000;font-size:13px;font-weight:700;text-decoration:none;text-align:left;border-bottom:1px solid #212121;height:auto;line-height:18px;padding:8px 5px 8px 13px;width:160px;text-align:left;}
#menu-nav li:hover > a,#menu-nav ul ul :hover > a{background:#591b3b;cursor:pointer;z-index:96;}
.menu-header ul li a{color:#fff;padding:10px 0;}
.menu-header .current-menu-item a{color:#eee;background:#591b3b;height:22px;}
#menu-nav .menu-header,div.menu{text-transform:none;font-weight:700;padding-left:54px;height:31px;}
#menu-nav .menu-header ul,div.menu ul{list-style:none;margin:0!important;}
#menu-nav .menu-header li,div.menu li{float:left;position:relative;margin:0!important;}
#menu-nav li a{display:block;text-decoration:none;padding:9px 13px 0;}
:first-child+html #menu-nav li a{display:block;text-decoration:none;padding:3px 13px;padding-top:5px;}
#menu-nav ul ul{display:none;position:absolute;top:31px;left:0;float:left;box-shadow:0 3px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);z-index:99999;}
#menu-nav ul ul ul{left:100%;top:0;}
#menu-nav ul li:hover > ul{display:block;}

/* New Code */

#menu-nav-sec ul ul a { color:#fff; background:black; font-size:13px; font-weight:bold; text-decoration:none; text-align:left; border-bottom:1px solid #212121; height:auto; line-height:18px; padding:8px 5px 8px 13px; width:160px; text-align:left; }
#menu-nav-sec li:hover > a,#menu-nav-sec ul ul :hover > a { background:#591b3b; cursor:pointer; z-index:96; }
.menu-header ul li a { color:#fff; padding:10px 0; }
.menu-header .current-menu-item a { color:#eee; background:#591b3b; height:22px; }
#menu-nav-sec .menu-header,div.menu { text-transform:none; font-weight:bold; padding-left:54px; height:31px;}
#menu-nav-sec .menu-header ul,div.menu ul { list-style:none; margin:0!important; }
#menu-nav-sec .menu-header li,div.menu li { float:left; position:relative; margin:0!important; }
#menu-nav-sec li a { display:block; text-decoration:none; padding:9px 13px 0; }
:first-child+html #menu-nav-sec li a { display:block; text-decoration:none; padding:3px 13px; padding-top:5px; }
#menu-nav-sec ul ul { display:none; position:absolute; top:31px; left:0; float:left; box-shadow:0 3px 3px rgba(0,0,0,0.2); -moz-box-shadow:0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2); z-index:99999; }
#menu-nav-sec ul ul ul { left:100%; top:0; }
#menu-nav-sec ul li:hover > ul { display:block; }

/* End New Code */

How can I merge the two codes and save many lines of code?

alykins · 08-27-2012, 08:36 PM

You can do declaration 1, declaration 2, etc... so...

Quote:

#menu-nav ul ul a{color:#fff;background:#000; ... }
...
#menu-nav-sec ul ul a { color:#fff; background:black; ...}

becomes

Code:

#menu-nav ul ul a, #menu-nav-sec ul ul a {color:#fff;background:#000; ... }
#menu-nav li:hover > a, #menu-nav ul ul :hover > a, #menu-nav-sec li:hover > a, #menu-nav-sec ul ul :hover > a {background:#591b3b; ... }
and so on

in fact, in the red and blue, you were doing it already

utnalove · 08-27-2012, 08:40 PM

Thanks. And this has already a comma.... how will it become?

Code:

#menu-nav .menu-header ul,div.menu ul{list-style:none;margin:0!important;}

utnalove · 08-27-2012, 08:53 PM

Thanks much!! It worked well

alykins · 08-27-2012, 08:57 PM

div.menu ul {...}
targets all ul's that are children of div's with class menu applied.
The first one (#menu-nav .menu-header ul) is an odd declaration to me... I don't usually do a lot of CSS so I have forgotten the specificity hierarchy... someone who uses it more frequently can probably elaborate more.
Nonetheless nothing will change, you simply have two different declarations. Every new declaration is marked by a comma. So you could do

Code:

#menu-nav .menu-header ul,div.menu ul, #apple, .banana, #horse ul {...}

so long as you keep appending commas.

utnalove · 08-27-2012, 09:10 PM

Thanks. I didn't know that this is the purpose of commas.
I am now thinking aboud enhancing this css, make it simpler and smaller, leaving the same visible style.

I have no idea how and what, but somebody told me to use SCSS... not sure even if I can, I am on a shared hosting and I can't install anything in the server. Maybe there are some other ways to enhance it.. hmm...

VIPStephan · 08-28-2012, 01:37 AM

SCSS? I think that whole SASS thing is pretty useless and it definitely doesn’t make your CSS simpler and more compact (compared to doing it yourself). In fact, you basically need to learn a new scripting language while it is converting the code into regular CSS anyway (and without you having real control over it, too). The only thing that could be a little useful is that it might save you some time writing CSS but I even doubt that, and with the right program you don’t even need that.

utnalove · 08-28-2012, 06:17 AM

Thanks VIPStephan, so hiring some front end developer, who knows CSS well would be better, right?

alykins · 08-28-2012, 02:23 PM

well what do you develop? I do back end coding, but that doesn't mean I can't do client side- it just means I don't like/prefer to do so. Coding is coding, and when it comes to coding HTML/CSS is some of the easiest. The hardest thing about CSS is understanding the inheritance and getting used to how it all interacts... CSS just takes a lot of practice

utnalove · 08-28-2012, 04:06 PM

alikins, do you have some website where I can contact you?

alykins · 08-28-2012, 04:15 PM

You can PM me; however, I am not free-lancing ATM. Feel free to PM for other Q's though if you'd like. I do know that in the web projects and market place section you can post Reqs for developers.