Skip to main content

70 Expert Ideas For Better CSS Coding | Smashing Magazine

Popularity Report

Total Popularity Score: 0
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Groups (2)

  • discinc

    DISC Inc

    6 members,428 bookmarks

    Private group for DISC members

  • MankatoDotNET

    City of Mankato .NET

    2 members,86 bookmarks

    Private group for sharing links between the .NET developers at the City Of Mankato

Related Lists

Bookmark History

Saved by 112 people (24 private), first by anonymouse user on 2007-05-10


Public Comment

on 2007-08-23 by tinotriste

Interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions

Public Sticky notes

70 Expert Ideas For Better CSS Coding

Highlighted by hanswobbe

We’ve taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

Highlighted by jonphipps

  • Use CSS Constants for faster development. “The concept of constants – fixed values that can be used through your code [is useful]. [..] One way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define ‘constants’. A common use for this is to create a ‘color glossary’. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.” [Rachel Andrew]
  1. # /*
  2. # Dark grey (text): #333333
  3. # Dark Blue (headings, links) #000066
  4. # Mid Blue (header) #333399
  5. # Light blue (top navigation) #CCCCFF
  6. # Mid grey: #666666
  7. # */

Highlighted by moultriecreek

read

Highlighted by trigger

, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /* Structure */, /* Typog

Highlighted by jtraub

To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook]

Highlighted by mal0ney

Use 1.4em - 1.6em for line-height. “line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart.

Highlighted by mal0ney

  • You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
  1. div > strong { color:#f00; }

Highlighted by mal0ney

  • The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:
  1. p[title] { color:#f00; } >

Highlighted by mal0ney

p[title] { color:#f00; }

Highlighted by mal0ney

  • he selector matches all div elements that have a class attribute with the value error:
  1. div[class=error] { color:#f00; }

Highlighted by mal0ney