Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconbradleysays: More from bradleysays


More from deviantART



Details

Submitted on
April 9, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
10,046 (2 today)
Favourites
66 (who?)
Comments
36
×

CSS Did You Know? - April 9th, 2013

Tue Apr 9, 2013, 7:24 AM

{

CSS Did You Know?

}


Volume 8


:iconcss-dyk:

Welcome

CSS can be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note CSS-DYK. :)

Inside

CSS-DYK by bradleysays
Tiered Classes by GillianIvy




:iconbradleysays:

CSS-DYK Group



CSS Did You Know? has it's own group now. Be sure to watch or join CSS-DYK for the latest CSS news and our weekly CSS Did You Know? articles.

You can become a regular writer of the CSS DYK Articles! Just apply to be a "Writer" via the join group button. :)




:icongillianivy:

Tiered Classes



Cleaning up how you write your CSS can really make it easier to read and edit later on down the road.  Removing duplicates, grouping similar coded classes together, and less code to write out.  If you have several elements that all have the same color|font|text-decoration|padding|margin... etc, then stacking them in one style container will help you not need to write these all out multiple times.

How to code it


Let's say we want all the subheadings in a document to be the same color #222222.  Normally, we would write them each out one class selector at a time.  But this becomes long and tedious and not very neat to come through and edit later.  (say you want to change them all to #444444, you would need to edit it 6 times!)  To tier these classes, simply separate each class with a comma before writing in your style information.

Example




h1{
color:#222222;
}
h2{
color:#222222;
}
h3{
color:#222222;
}
h4{
color:#222222;
}
h5{
color:#222222;
}
h6{
color:#222222;
}


Becomes:


h1, h2, h3, h4, h5, h6{
color:#222222;
}

One beautiful line of code, rather than a whole page of the same thing over and over.  Less to type, less to read and easy to edit.  This can be applied to everything.  Say you want to remove the gruze styling of journal skins and the journal image book (and the empty space it leaves behind), and the entire moods box?  You can stack them all into one definition.

.gr1, .gr2, .gr3, .tri, .gr-top h2 img, .indent, .list{display:none;}


Voila!  No need to write display:none; over and over and over.  Anything else you want hidden, add to the list.

Happy Coding,


Add a Comment:
 
:iconkovowolf:
KovoWolf Featured By Owner Apr 11, 2013  Professional General Artist
Excellent <3
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Apr 10, 2013
Nice minimalistic skin I must say! :love:

Now, If only I get time to share these kind of CSS snippets myself. :sniff:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 11, 2013  Hobbyist General Artist
Share them now!!!! ;P
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Apr 11, 2013
It's alright. You are doing a good job yourself! I don't have to interfere. :D
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 11, 2013  Hobbyist General Artist
But there are many articles need writing :shifty:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 8, 2013
I would love to share CSS tips&tricks but I don't have time! :stare:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 8, 2013  Hobbyist General Artist
Good thing there is Sta.sh so you can write a bit then come back later to write more ;D :eyes:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 9, 2013
Yeah. :lol:
Reply
:iconyamaha160:
Yamaha160 Featured By Owner Apr 10, 2013  Hobbyist Digital Artist
I'm not a pro, but since i do tech-stuff for a website, i am familiar with some tricks. It definitely helps knowing CSS and basic html.
Reply
:icongridy:
Gridy Featured By Owner Apr 10, 2013  Professional Interface Designer
Great article! Responsive web design is a trend from last year, by the way. This page is the living proof of (among other things you can find there some great HTML5 and WordPress themes.) – [link]
Reply
Add a Comment: