CSS Structure


By creating consistent looking CSS we get many benefits such as being able to read other developers CSS quickly and our CSS should have less errors. A consistent looking CSS structure provides stability within a website and everyone is expected to follow this structure. Below is a list of rules that make up our CSS structure.

declarations and values start on the next row after { selector { declaration: value; selectors begin a new line after the previous { selector { declaration: value; } selector-2 { multiple selectors should be on multiple lines selector, selector-2, selector-3 { declaration: value; } each declaration and value should be on a separate row selector { declaration: value; declaration-2: value; there should be a space before each { selector { declaration: value; the : should follow directly after its declaration selector { declaration: value; there should be a single space after : except for events selector { declaration: value; } selector:hover { declaration: value; } there should be no spaces before ; selector { declaration: value; hex values should be in capitals selector { declaration: #FF00FF; hex values should be 6 characters in length selector { declaration: #FF00FF; single spaces should be used between values selector { padding: 3px 4px 5px 6px; empty stylings which may be used later should be closed selector-to-be-used-later { } background images should be surrounded by apostrophes selector { background: url('images/some-image.jpg'); closing brackets should be at the start of the final line selector { declaration: value; } declarations should be 1 tab from the start of the line selector { declaration: value; declaration-2: value; } declarations should be in alphabetical order (this final one is recommended but not everyone must do it) selector { border: value; padding: value; z-index: value; }