{CSS}

1. Specificity / INheritance

In the simplest case, the last declaration that matches a given element is the one that gets applied. What colour will this be?


<p id="id" class="class"><span>Hello World</span></p>
p { color: red; }
p { color: green; }



But if one selector is more specific than another, that declaration gets applied, regardless of the order they're listed in. What colour will this be?

<p id="id" class="class"><span>Hello World</span></p>
.class { color: red; }
p { color: black; }

What colour will this be?

.class { color: red; }
#id { color: blue; }
p { color: black; }

Some selector patterns are more specific than others.


– #id (worth 100 points each)

– .class (worth 10 points each)

– element (worth 1 point each)


Specificity also has a cumulative effect. What colour will this be?

#id { color: green; }
p#id { color: yellow; }

But be careful whenever inheritance is involved! When calculating specificity, don't compare apples and oranges. Remember to read your selectors right-to-left. What colour will this be?


#id { color: red; }
p span { color: black; }

Some links:


– CSS: Specificity Wars

– CSS Specificity

– Specificity Calculator

2. USEFUL SELECTORS

Selectors can match an element based on more than 1 class at a time.


<ul>
    <li class="heading">Heading</li>
    <li class="menu-item">One</li>
    <li class="menu-item">Two</li>
    <li class="menu-item active">Three</li>
    <li class="menu-item">Four</li>
</ul>
li.menu-item { color: lightgrey; }
li.menu-item.active { color: red; }

Selectors can match against any [attribute] or [attribute value], not just id or class.


<p data-attr="true">One</p>
<p data-attr="false">Two</p>
<p data-attr="john-doe">Three</p>
<p data-attr="johnny-appleseed">Four</p>
<p data-attr="john-carter">Five</p>
<p data-attr="hello goodbye farewell">Six</p>
p[data-attr] { color: yellow; }
p[data-attr="false"] { color: red; }
p[data-attr*="john"] { color: lightgrey; }
p[data-attr^="johnny"] { color: blue; }
p[data-attr$="carter"] { color: gold; }
p[data-attr~="hello"] { color: violet; }

Selectors can match any descendant (obviously!) or just direct children, using >. What colour will ABC be? 


<ul id="nav">
    <li>One</li>
    <li>Two
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>Three</li>
</ul>
ul { color: red; }
ul#nav > li { color: green; }

Selectors can match based on previous siblings, using + or ~. What colour will each paragraph be?


<h1>Heading</h1>
<p>Just a paragraph.</p>
<p>Just a paragraph.</p>
h1 + p { color: red; }

What colour will each paragraph be?

<p>Just a paragraph.</p>
<h1>Heading</h1>
<p>Just a paragraph.</p>
<p>Just a paragraph.</p>
h1 ~ p { color: red; }

Selectors can match just the first (:first-child) or last (:last-child – except in IE 7/8) element in a collection. An typical example...


<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    border: 1px black solid;
}

li { padding: 10px; border-top: 1px black solid; }
li:first-child { border-top-width: 0; }

CSS can also create pseudoelements (but not in IE7!) in front of or behind an element, using :before and :after. An example... 


<p>World</p>
p:before {
    content: "Hello";
    color: red;
}

Pseudoelements are really weird (they don't exist in the DOM, the require the content property, etc.). Use them with caution!


Some CSS3 selectors we can't use just yet include :first-of-type, :last-of-type, :only-of-type, :only-child, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :root, :empty, :target, :enabled, :disabled, :not...

3. Selector Performance

The #1 thing to keep in mind is that CSS selectors are essentially queries that get evaluated from right to left!

Some suggestions:


– Avoid the universal selector (*)

– Don't overqualify #id or .class selectors

– Avoid the descendant selector

– Element selectors shouldn't contain a child selector

– Use the most specific selector possible (tags are bad!)

– Use child selectors "sparingly"


Why might you not follow these suggestions?



– Divitis

– Namespacing

– Hollow victory

4. Media Queries

You can use media queries to apply CSS based on screen width/height, pixel density, etc.


body { background-color: red; }

@media screen and (max-width: 500px) {
    body { background-color: green; }
}

@media screen and (max-width: 250px) {
    body { background-color: blue; }
}

For more info: CSS Media Queries

5. Floats

Do you clear your floats? Do you even know what "clearing floats" means?

Method #1: you can apply a height or a float to the container itself.


– Highly dependent on design/content/layout

DO NOT just float all the way up the DOM!

Method #2: you can use the ol' trailing <div> with clear applied to it (do I even need to discuss why this is a bad idea?!?)... 

The winner is Method #3: use the :after pseudoelement on the container element, and apply clear to that.

6. CSS3 Tricks

Rounded corners using border-radius 

Text shadows using, uh, text-shadow  

Box shadows and rgba() colours  

Images as borders

Background image sizes  

Multiple background images

Background gradients  

Transforms (2D and 3D)

Transitions

Animations

7. VENDOR Prefixes


Some properties need vendor prefixes, some don't. Make sure you use them where needed!


– Opera: -o

– Webkit: -webkit

– Firefox: -moz

– IE: -ms

8. Sprites

Pros:


– reduced HTTP requests

– much improved image caching


Cons:


– difficult to maintain

– multiple developers

– one sprite to rule them all is very hard


9. Web Fonts

No more Arial or Verdana!


@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	 url('webfont.woff') format('woff'), /* Modern Browsers */
	 url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	 url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: 'MyWebFont', sans-serif; }

Or just use Google or Typekit.

Problems:


– Bandwidth and HTTP requests

– Bold and italic

– Font formats

– Rights

– Flash of unstyled text

Perfect for icons! Flat design! Jony Ive!


Icon Fonts Are Awesome

Symbolset

Fontello

10. MORE Links

CodePen

Can I Use...

CSS-Tricks

Codrops Playground

;

CSS Tips & Tricks

By Matthew Hogg

CSS Tips & Tricks

Various CSS tips, tricks and techniques for people who might not be born front-end developers.

  • 1,006