Scribd
Upload
66 views

Twitter Best Practices Css

The document provides best practices for writing CSS code, including: 1) Grouping selectors and keeping individual selectors to a single line. 2) Ordering property declarations by position, box-model, typography, visual, and misc. 3) Avoiding !important unless absolutely necessary and instead increasing selector specificity. 4) Limiting shorthand declarations and ensuring code is well-commented and approachable by others.

Uploaded by

ganis ade pratama
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
66 views

Twitter Best Practices Css

The document provides best practices for writing CSS code, including: 1) Grouping selectors and keeping individual selectors to a single line. 2) Ordering property declarations by position, box-model, typography, visual, and misc. 3) Avoiding !important unless absolutely necessary and instead increasing selector specificity. 4) Limiting shorthand declarations and ensuring code is well-commented and approachable by others.

Uploaded by

ganis ade pratama
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

George Moller

_georgemoller

CSS

BEST PRACTICES

by
George Moller

_georgemoller

When grouping selectors, keep individual selectors

01 to a single line.
George Moller

Don't prefix property values or color parameters _georgemoller

02 with a leading zero.


George Moller

_georgemoller
Lowercase all hex values and use shorthand hex values where

03 available.
George Moller

_georgemoller

04 Avoid specifying units for zero values.


George Moller

_georgemoller

Related property declarations should be grouped together

05
following the order; position, box-model, typography, visual,

misc:
George Moller

_georgemoller

Don’t use !important , is a last resort generally only used


06
when you need to override something and there is no other way.

Instead increase the specificity of the selector.


George Moller

_georgemoller

When a rule set includes only one declaration, consider


07
removing line breaks for readability and faster editing.
George Moller

_georgemoller
Limit shorthand declaration usage to instances where

08 you must explicitly set all available values.


09
George Moller
_georgemoller
Ensure your code is descriptive, well commented, and
approachable by others. Great code comments convey
context or purpose.
George Moller

10
_georgemoller

CLASSNAMES:

1 Keep them lowercase and use dashes to separate words.

2 Avoid excessive shorthand notation. (.btn is fine, .s is not)

3 Use meaningful names; use structural or purposeful


names over presentational.

4 Prefix classes based on the closest parent or base class.


George Moller

10
_georgemoller

CLASSNAMES:

11
George Moller
_georgemoller

SELECTORS:

1 Use classes over generic element tag for optimum rendering


performance.

2 Avoid using several attribute selectors (e.g., [class^="..."]) on


commonly occuring components. Browser performance is known
to be impacted by these.

3 Keep selectors short and strive to limit the number of elements in


4 each selector to three.names over presentational.
11
George Moller
_georgemoller

SELECTORS:

George Moller

_georgemoller
Place media queries as close to their relevant rule sets

12 whenever possible.

You might also like