News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Here we go again: overly specific CSS

Started by Antechinus, December 28, 2014, 09:33:52 PM

Previous topic - Next topic

Antechinus

Oh goody. Lotsa luvverly redundant tag names here too. Might as well provide a good home for them and keep them off the streets, poor things. :D

/* The quick buttons */
div.quickbuttons_wrap {
padding: 2px 0;
width: 100%;
float: left;
}


With a bit of cunning that declaration could be ditched entirely, since .quickbuttons_wrap is just a daft leftover in two templates. It's not needed.

Ok, so:


ul.quickbuttons {
margin: 11px 0 0 0;
padding: 0 0 4px 0;
clear: right;
float: right;
text-align: right;
}
ul.quickbuttons li {
float: left;
display: inline;
margin: 0;
font-size: 0.9em;
}
ul.quickbuttons li a {
padding: 0 4px 0 5px;
display: block;
line-height: 1.9em;
float: left;
}
ul.quickbuttons li a img {
padding-bottom: 2px;
}
ul.quickbuttons li input {
margin-top: 4px;
}
ul.quickbuttons a:hover {
color: #a70;
}


.quickbuttons is always a ul, so does not that tag declared. Lose it.

Simplify .quickbuttons li a to just .quickbuttons a
Same goes for .quickbuttons li a img. Just using .quickbuttons a img should be fine.

The sprite declarations can be simplified a lot. This pile of stuff:

ul.quickbuttons li a.quote_button {
background: url(../images/quickbuttons.png) no-repeat 0 -1px;
padding: 0 2px 0 20px;
}
/* Fix for quote on reply box */
#post_modify {
border-radius: 4px;
}
ul.quickbuttons li a.modifybutton {
background: url(../images/quickbuttons.png) no-repeat 0 -59px;
padding: 0 2px 0 20px;
}
ul.quickbuttons li a.remove_button {
background: url(../images/quickbuttons.png) no-repeat 2px -29px;
padding: 0 2px 0 25px;
}
ul.quickbuttons li a.modify_button {
background: url(../images/quickbuttons.png) no-repeat 2px -59px;
}
ul.quickbuttons li a.approve_button {
background: url(../images/quickbuttons.png) no-repeat 2px -88px;
}
ul.quickbuttons li a.restore_button {
background: url(../images/quickbuttons.png) no-repeat 0 -120px;
}
ul.quickbuttons li a.split_button {
background: url(../images/quickbuttons.png) no-repeat 2px -149px;
}
ul.quickbuttons li a.reply_button {
background: url(../images/quickbuttons.png) no-repeat 0 -180px;
padding: 0px 4px 0px 22px;
}
ul.quickbuttons li a.reply_all_button {
background: url(../images/quickbuttons.png) no-repeat 0 -180px;
padding: 0px 4px 0px 22px;
}
ul.quickbuttons li a.notify_button {
background: url(../images/quickbuttons.png) no-repeat 1px -210px;
padding: 0 4px 0 22px;
}
ul.quickbuttons li a.unapprove_button {
background: url(../images/quickbuttons.png) no-repeat 2px -238px;
}
ul.quickbuttons li a.warn_button {
background: url(../images/quickbuttons.png) no-repeat 2px -270px;
}
ul.quickbuttons li.inline_mod_check {
padding: 1px 1px 1px 1px;
}


Can be boiled down to this:


/* Fix for quote on reply box */
#post_modify {
border-radius: 4px;
}
.quickbuttons a {
background-image: url(../images/quickbuttons.png);
background-repeat: no-repeat;
padding: 0 2px 0 20px;
}
.quote_button {
background-position: 0 -1px;
}
.modifybutton {
background-position: 0 -59px;
}
.remove_button {
background-position: 2px -29px;
}
.modify_button {
background-position: 2px -59px;
}
.approve_button {
background-position: 2px -88px;
}
.restore_button {
background-position: 0 -120px;
}
.split_button {
background-position: 2px -149px;
}
.reply_button {
background-position: 0 -180px;
}
.reply_all_button {
background-position: 0 -180px;
}
.notify_button {
background-position: 1px -210px;
}
.unapprove_button {
background-position: 2px -238px;
}
.warn_button {
background-position: 2px -270px;
}
.inline_mod_check {
padding: 1px;
}

Bloc

Indeed. +1

Something I try to avoid in my themes - or custom code - is too much "tweaks". You know, one pixel up there etc.If something is off I rather go back, see whats causing it, use a better container/width/technique etc. Doing band-aids are so frustrating. Then again sometimes thats ALL you can do.

Antechinus

Yup.

And for anyone who is wondering why overly specific CSS is bad, apart from the extra bytes bloating the file, and apart from the descendant declarations just plain making it harder and more confusing to read, especially for beginners, a good example is a basic customisation someone wanted earlier this year.

The default 2.0.x CSS for the buttonlist is overly specific, which meant to get his idea working Samborabora had to use the convoluted code in this post. I could see this was a mess, and knew what the problem was. So, two posts later I showed him how to rewrite the default CSS, so nothing in the default theme would be broken but customisation would be far easier.

Antes

0.o Dream... I'll eat them once my exams are over and heating my paws at home. But I must say, more I touch the CSS, i make it smaller and some people complains about how I'm limiting the usage.

Thanks a lot for spending some time on those stuff :)

Kindred

Excuse me, antes... But that was uncalled for.

We did not ding you for reducing the specificity of css, we requested that a few extra classes to support mods be added into the default, even if they are not called by the curve2 standard display. There is a difference.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Quote from: Antes on December 29, 2014, 07:04:16 PM
0.o Dream... I'll eat them once my exams are over and heating my paws at home. But I must say, more I touch the CSS, i make it smaller and some people complains about how I'm limiting the usage.

Thanks a lot for spending some time on those stuff :)

Yebbut this stuff won't limit the usage. ;)

TBH I haven't tested it all yet, but most of it is a no-brainer based on basic good practice. There may be one or two places where my suggestions aren't workable. I'll see if I can get them all tested on local soon.

Antes

At some point we (Oldiesmann & I) discussed a JS file allows CSS3 elements (dunno how but) ported to IE6-8 (http://selectivizr.com/), that option still *unofficially* on table, we may bump Curve2 to be fully HTML5/CSS3 with that JS support. That surely saves lots of lines from CSS especially :first-child/:last-child elements (first_th/last_th alteration codes from files etc...).

Antechinus

Why even bother with IE6-8? XP is dead, and anything else will run a minimum of IE9. If someone is still insisting on running IE8, that's their problem. My 2c is it's not worth bloating the core with fallbacks for dead browsers. Waste of time, and will rapidly become less and less relevant than it already is.

The stuff concerned is mostly minor eye candy anyway, so even if someone is using a dinosaur browser it shouldn't matter too much.

Antes

don't look at me, tell that to PM/Lead Dev :P well at least we are in agreement SMF 3.0 is gonna support IE10+. I even removed windowbg2 from my theme I can do anything with CSS3 no need to use lots of stuff.

live627

Quote from: Antechinus on December 28, 2014, 10:06:40 PM
Oh goody. We haz moar. :D

/* Styles for the manage calendar section. */
dl.settings dt.small_caption {
width: 20%;
}
dl.settings dd.small_caption {
width: 79%;
}

/* Styles for the manage search section. */
dl.settings dt.large_caption {
width: 70%;
}
dl.settings dd.large_caption {
width: 29%;
}


K, so these are only used in a couple of places, so again they do not need to be specified as descendants. They do require the tag names, but only because the same class name has been used for both dd and dt. If the dd and dt were given different class names you could drop the tag names from the css
Looks like  that syntax is requited to keep proper inheritance.

Antechinus

K. Well Like I said I'll see if I can get them tested. The inheritance problems could be (probably are) because of over-specified stuffz in index.css borking admin.css, if you only edit the latter.

live627


live627

Quote from: Antechinus on December 29, 2014, 08:31:23 PM
K. Well Like I said I'll see if I can get them tested. The inheritance problems could be (probably are) because of over-specified stuffz in index.css borking admin.css, if you only edit the latter.
/* Lists with settings use these a lot.
------------------------------------------------------- */
dl.settings {
clear: right;
overflow: auto;
margin: 0 0 10px 0;
padding: 5px;
}
dl.settings dt {
width: 40%;
float: left;
margin: 0 0 10px 0;
padding: 0;
clear: both;
}
dl.settings dd {
width: 56%;
float: right;
overflow: auto;
margin: 0 0 3px 0;
padding: 0;
}

Kindred

I wanted to drop support for everything below ie9 but the dev lead contradicted me and decided to keep supporting at least ie8. :(

There are things that I will argue vociferously with the devs about (including or not including)...   but this was not worth the time to argue.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Yebbut ages ago it was decided to not worry about minor eye candy in IE8, so there's a good precedent there. ;)

Kindred

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Arantor

IE8 came with Win7 and is technically supported until Win7 is also no longer supported, however the global share of IE8 is miniscule (Statcounter reports 3.18% share as of Nov 14)

live627

Quoteuntil Win7 is also no longer supported
which is 2020

Bloc

Quote from: Antechinus on December 29, 2014, 10:20:54 PM
Yebbut ages ago it was decided to not worry about minor eye candy in IE8, so there's a good precedent there. ;)
:D Indeed.

One thought is avoid the most complicated CSS at any rate, to meet even eye candy issues in older browsers. KISS does apply in CSS too. :P

Oldiesmann

If it really isn't worth our trouble to support IE8 at this point, then I'm fine with dropping support for it. I didn't realize it was barely used at this point.
Michael Eshom
Christian Metal Fans

Advertisement: