Learning CSS

• 3 min read
#frontend #css #learn #resources #style #ui

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

The above is directly from the MDN website on CSS where you can learn everything you need to know on the topic.

Start by reading the MDN CSS Basics then look through the section on CSS building blocks and more advanced topics:

CSS Layout

See also: MDN intro to layout.

Traditionally we had to use HTML tables and floats for creating page layouts but these days we can use a combination of Flexbox and Grid for layouts.

In the early days of CSS the possibilities for laying things out were limited and for that reason the table tag was often used for page layout (<table role="presentation">). Next the CSS display property became more widely used setting display: inline-block with negative margins etc.

The next step was using floats. Using floats was also tricky because the containing element could be smaller than the floated element making the floated element float outside it's bounding container.

In 2017 Flexbox became a CSS module with the goal of laying out and distributing space between or around items an a container. For the first time there was a powerful way to do one dimensional layouts in CSS. See MDN for a tutorial or to read up on the basic concepts.

Layout Resources

Browser Default Styles

Browsers have default styles that they will apply to rendered documents. A reset stylesheet is some CSS that will try to eliminate these inconsistencies between browsers by removing default margins, paddings, sizes etc. These days you often see sites doing some minimal version of this like in the sample below. Another option is to use something like normalize.css.

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Writing Approaches

There is basically two ways to think of how to write CSS. The traditional way of writing semantic CSS classes and a new way often referred to as utility-first classes based CSS where the Tailwind CSS framework has become very popular. Writing semantic style CSS often start to crumble as a project grows. Another approach could be something like Styled Components.

CSS Architecture

Block Element Modifier or BEM is a design methodology that helps create reusable components and code sharing. In larger projects how we name and organize our CSS will make a huge difference. Other methodologies OOCSS, SMACSS, SUITCSS, Atomic.

BEM Breaks down elements to blocks, elements, and modifiers. A block is a stadalone entity useful on its own like (container, header, menu, input, checkbox). An element is a part of a block with no standalone meaning like (menu item, list item, header title). A modifier is a flag on a block or an element like (disabled, highlighhted, checked, big). Naming will then be done using the following pattern: .block__element--modifier. Example:

.form {}
.form__input {}
.form__input--large {}
.form__input--disabled {}

CSS Language Extensions

To overcome some of the limitations of CSS a number of tools and extensions have emerged over the years. Among the more popular are Sass and Compass, Less, PostCSS and Stylus

More Resources

References

Video Training

Books

Misc