Shop Mobile More Submit  Join Login
×

:iconbradleysays: More from bradleysays


Featured in Collections

News, Journals, Features by im-not-sana

:dA_customization by el-L-eN

Journal Entries and Literature by Link-Pikachu


More from DeviantArt



Details

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

Stats

Views
12,558 (2 today)
Favourites
62 (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
:iconpoppyrous:
poppyrous Featured By Owner Apr 9, 2013
Wow thanks, I'm only familiar with html codes... css had been very difficult for me...
Reply
:iconmiontre:
miontre Featured By Owner Apr 9, 2013  Hobbyist Photographer
That h1 header link. Ouch. Those always taint my skins :lol:
Imma send you an update for that :iconlameowplz:
Reply
:iconbradleysays:
bradleysays Featured By Owner Apr 9, 2013
Thanks. :giggle:
Reply
:iconmiontre:
miontre Featured By Owner Apr 10, 2013  Hobbyist Photographer
Will also see about doing something different with them in the code boxes. :nod:
Reply
:iconbradleysays:
bradleysays Featured By Owner Apr 10, 2013
Awesome. :#1:
Reply
:iconminato-kushina:
Minato-Kushina Featured By Owner Apr 9, 2013
Thanks for this useful article! I have always admired people who make journals, stamps, dA related widgets and such! :worship:

No matter the explanation and advices, it's all Greek to me! :D
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 11, 2013  Hobbyist General Artist
I at first read that as "it's all geek to me" :giggle:
Reply
:iconminato-kushina:
Minato-Kushina Featured By Owner Apr 11, 2013
Me too, many times I read geek as greek! :D
Reply
:iconastrikos:
Astrikos Featured By Owner Apr 9, 2013   General Artist
:la: Awesome article is awesome!
Reply
:iconvalasedai:
ValaSedai Featured By Owner Apr 9, 2013  Hobbyist Digital Artist
Oooh this looks really promising!
I've only recently started to dabble in CSS so I think this series will really help.^^
Reply
:iconilantiis:
iLantiis Featured By Owner Apr 9, 2013  Hobbyist Digital Artist
Love it!
Reply
:iconneurotype:
neurotype Featured By Owner Apr 9, 2013  Hobbyist General Artist
Fancy skin!

I'm still excited they enabled that here :B
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 9, 2013
Nice new layout!
But i am wondering why my skin is the preview on FB :o
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 11, 2013  Hobbyist General Artist
Because of the awesome. :XD:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 11, 2013
Sounds like a good reason!
Reply
:iconbradleysays:
bradleysays Featured By Owner Apr 9, 2013
I was wondering that too. :O_o:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 9, 2013  Hobbyist General Artist
Snazzy skin, will all the articles be wearing it? :D Thanks for giving me the opportunity to write! More to come! ;D
Reply
:iconelectricjonny:
electricjonny Featured By Owner Apr 9, 2013  Hobbyist Photographer
Commas rule :nod:

Another great thing I like to do for formatting (since it's how I generally format ALL my CSS) is to indent the selectors with a tab character, like so:
h1 {
        color:#FFCCOO;
}
And so on.
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 9, 2013  Hobbyist General Artist
Yea, I never tab but my bf tabs all his. Commas make me happy, they make my CSS so much less lengthy... I think they used to not work. I remember trying it several years ago and it didn't.
Reply
:iconelectricjonny:
electricjonny Featured By Owner Apr 9, 2013  Hobbyist Photographer
Yeah commas (and /*comments*/) were recently added, probably six months back or so. I think a few other things were added around that time, like :before/:after and maybe content:?

But yeah, the dA CSS has changed a bit over the years =P

I just like adding a tab before the selector since it lets me easily see the "stuff I could change", since I format it the way I do. Doing things all in one line (h1 {color:blue;}) just seems rather uncoordinated, especially if you have a lot of properties :slow:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 9, 2013  Hobbyist General Artist
Oh I write out like:
h1{
color:#ffffff;
}

Except if there is only display:none; since no other code will be needed there. One line... I can understand writing it out in one line if it is the HTML for a div style or something, which would be excessive to have it all written out. But everyone writes it in their own way. I guess the industry standard is to do it like dreamweaver with the tab in there.

I can't remember when I decided to randomly try the commas again, about 6 months ago sounds right. I remember the roll out of content/before/after. But didn't know what else was released.

I never really used comments, but I suppose it would be good to add to make my skins editable by the users (more easily). Since I do a lot of them as commissions where the user has little to no knowledge of CSS typically. Thanks for the heads up.
Reply
:iconelectricjonny:
electricjonny Featured By Owner Apr 9, 2013  Hobbyist Photographer
Heh, yeah I never released any CSS journal templates, mostly since I don't want to be bombarded with questions about how to do X or how to do Y :lol:

That's sort of the reason why I don't release any GM *.user.js scripts anymore; I don't want to be bothered by people when the script doesn't work like they want it to or doesn't work anymore since dA changed shit.


I mean, I love that people release journal templates/skins, but it just seems that it's never a case of "thanks for the skin", more it's a "how can I change this thing?", which would just annoy me. Install the skin and be happy, or if you want to change it, then learn CSS :B
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 9, 2013  Hobbyist General Artist
I guess it is a balance of that. I get a lot of thank you's and a lot of people who want to know how to do something. I bombard them with too much information :evillaugh: Which I do warn people about on my front page. If they ask me a question, they should expect to get ANSWERED (in triplicate).

I don't mind explaining things, as teaching someone else something helps me learn it better.
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 9, 2013  Professional Interface Designer
Oh and niiiiice CSS :horny:
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 9, 2013  Professional Interface Designer
:la: I love doing that with classes, saves so much space and makes it really easy to change f.e. a font, if you only have to change it in one spot :#1:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 9, 2013  Hobbyist General Artist
Yes, I'm trying to write all my CSS as neat and efficiently as I can to not write the same things over and over again... And less scrolling!
Reply
Add a Comment: