CSS Myths

Cathy Dutton
Jun 28, 2017 · 9 min read

1) CSS is broken

So first of all CSS is not broken, it just isn’t a programming language and so should not be expected to behave like one. Many of the CSS in JavaScript methodologies that have appeared over the past couple of years aim to ‘fix’ CSS by forcing it to behave in a more conventional programming way, in doing so some key CSS features are lost.

2) CSS is easy

CSS is not easy, it may be seen as the simplest of the client side languages, but creating a maintainable CSS code base at scale is a difficult skill to master. Like no other front end language any changes made in CSS have the potential to affect the global landscape, meaning extra discipline and knowledge are required.

i. Cascade

The cascade determines which properties will be applied, and can be thought of as a way of resolving conflicting styles. Which selector wins out in the cascade depends on three factors:

  • Specificity
  • Source order

ii. Importance

There are three origins of styles, each one has a level of importance used by the cascade to determine which properties will be applied.

  1. User
  2. Default (User agent or browser style sheet)

iii. Specificity

Specificity comes into play if the importance of two declarations is the same. A 4 digit number is given to each selector, this number is derived from the 4 factors below, the selector with the higher specificity will be applied.

  1. The number of ID’s in the selector
  2. The number of classes, attributes and pseudo-classes in the selector
  3. The number of elements and pseudo-elements in the selector

Examples:

#nav .selected > a:hover // Specificity = 0,1,2,1.wrapper .box ul li // Specificity = 0,0,2,2

iv. Source order

Source order comes into play if the importance and specificity of two declarations is the same. Declarations that appear at the bottom of a style sheet will effectively overwrite any matching declarations from above.

v. Inheritance

CSS properties like font-family and color can be applied to a single element and be passed down to the elements children. Inheritance can be controlled using three CSS properties:

  • initial
  • unset

3) Global scope is a bad thing

CSS is often compared unfavourably to the localised scoping features of JavaScript. A misunderstanding of the global scope leads to an overuse of the !important declarations and excessively long selectors (both of which introduce a new set of problems). However, the global by default feature of CSS is actually a great asset, if you know how to use it. The cascade and inheritance together determine how all elements will be styled, this allows you to create base level rules just once and have them applied across a projects code base.

  • Typography and spacing are consistent
  • Design patterns are consistent
  • CSS is re-usable
  • CSS remains scalable and easy to update

4) There is no local scope

CSS, where required can be scoped, the simplest method for this would be by using double classes and a naming convention such as BEM to target a specific chunks of UI.

// Default button
.button {
display: inline-block;
text-align: center;
background-color: #00823b;
color: #fff;
}
// Success button
.button--success {
background-color: #005ea5;
}
// cancel button
.button--cancel {
background-color: $primary-color--featured;
}
:root {
--button-color: #ffa600;
}
.button {
background-color: var(--button-color);
}
:root {
--button-color: #ffa600;
}
header {
--button-color: #aaa19a;
}
.button {
background-color: var(--button-color);
}

5) if you use important! you’re writing bad CSS

It is true that an over-reliance on the !important rule can be a warning sign for underlying issues with the CSS architecture, but providing it is used responsibly and for it’s intended purposes it is perfectly fine to use.

.margin-bottom {
margin-bottom: 10px;
}
.margin-bottom {
margin-bottom: 10px!important;
}

6) There is no feature detection

Progressive enhancement promotes the idea of adding extra functionality for modern browsers and devices, only after delivering core content and functionality to all bowsers and devices. This is often achieved with JavaScript feature detection.

.banner {
background-image: url(image-url);
color: black
@supports (background-blend-mode: multiply) {
.banner {
background-color: green;
background-blend-mode: multiply;
color: white
}
}

7) CSS is just for making things pretty

CSS can do more than simply apply the aesthetics to an applications UI. It can also play a role in enhancing the accessibility and usability of a project.

  • Improve the readability of anchor tags
  • Provide navigation assistance with active and visited classes
  • Provide screen reader specific content such as ‘Skip to content’ links
  • Ensure hidden content isn’t picked up by screen readers with a visibility:hidden; class
  • Insert descriptive text for icons or external links…
a[target=_blank]::after {
display: inline-block;
overflow: hidden;
width: 0;
height: 0;
white-space: nowrap;
content: '(opens new window)';
}

8) Shorthand is better

Shorthand properties allow multiple values to be set simultaneously and are a nice way of keeping your style sheets concise and readable. There are currently 6 shorthand property groups:

  • background
  • margin
  • border
  • padding
  • list
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
margin: 10px 0;
html {
font: 16px Helvetica Neue
}
html {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 16px;
line-height: normal;
font-family: Helvetica Neue;
}
html {
font-size: 16px;
font-family: Helvetica Neue;
}

9) CSS doesn’t have functions

CSS is defined as a markup language not a programing or scripting language, but it does come with some basic functions included The most common functions deal with colour manipulation and animations, functions like linear-gradient(), blur(), translate() and rotate().

.sidebar {
width: 300px;
}
.content {
width: calc(100% - 300px);
}
var backgroundColor = bodyStyles.getPropertyValue('--background-color'); // Retrievebody.style.setProperty('--background-color', 'black'); // Set

10) Frameworks are bad

There are literally hundreds of CSS frameworks, grids and methodologies available to speed up development and help lay the foundations for scalable well structured CSS. These frameworks can be hugely beneficial but are often heavily criticised.

  • The markup is not semantic
  • The CSS is bloated and often unnecessary for smaller projects
  • Framework CSS is overwritten in the project code

In summary

In summary CSS is not a bad programing language, its a very good style sheet language. The features of CSS are not secret, anyone can read up on and learn to write good CSS, if you choose not to it can become a nightmare.

Surviving CSS

Collection of posts on all things CSS

Cathy Dutton

Written by

Interaction & UX Designer, Front End Developer, Obsessed with CSS. - cathydutton.co.uk

Surviving CSS

Collection of posts on all things CSS