Kris Ekenes, Instructor at CodingDojo, brought this CSS Tutorial for Beginners guest blog to you.
Modern CSS was born 25 years ago, when Hakon Wium Liu, one of the early pioneers of the Web in 1994, introduced the concept of Cascading Style Sheets. CSS has been a standard feature of modern web pages for decades, influencing how we interact with every site on the Internet.
Although CSS has seen many improvements over the years it can still be overwhelming to enter the CSS world. It can be difficult to understand the rules and regulations that govern CSS.
This CSS tutorial explains the best CSS practices currently in use. From naming and selecting to extensions and organization. This should be a good starting point for exploring modern CSS. For beginners, here are some tips to keep in mind when diving into CSS Tutorial.
CSS Tutorial for Beginners: What you need to Know
Guidelines for Naming Conventions
One of the most challenging and overwhelming aspects of creating CSS is naming your styles. This allows you to be flexible and precise throughout your project. There are several popular methods, including OOCSS and SMACSS. There are a few popular methods, including OOCSS, SMACSS, and BEM. This site is another great resource for CSS naming conventions. It will save you tons of time.
The Basics
Block – A block can be described as a separate element that serves a specific purpose. Examples of blocks include input, header, footer and header.
Element – An object that is semantically linked with a parent block is called an element. A li item, for example, is an element within a nav block.
Modifier – A modifier is a tool that modifies the behavior or appearance of an element or block. A selected or disabled modifier class may be available for the nav block or element.
Get to the Naming
Avoid using camelCase names in your CSS. It is generally better to use dashes () to separate words and make your CSS more readable.
Your blocks should be named in HTML with an identifying class number — using only letters and dashes — so that it can be selected in CSS under the same class name.
The elements can then be conjunctively referred to as attachments to a parent block by using two underscores:
Modifiers are the third line after elements and are separated by two dashes:
Remember that each of the three components of block, element, and modifier can be named with multiple words, which would be separated by a single dash for each space, allowing the double-dash or double-underscore for separators of components to continue their above functionality: .main-menu__first-item-color-green
Although there is no perfect naming convention system, it is important to choose a system that is consistent across your team. The details of the method are irrelevant as long as everyone is on the exact same page.
Understanding Specificity
Your browser uses a weight called “specificity” to determine which CSS chooseors are applied and which CSS selectors have precedence. The more specific a selector has with the matching HTML element, it is more likely that it will be applied. article, span and p are next. .main-menu), attribute, (e.g. [lang=’en ‘]), pseudo-class selectors (e.g. .main-menu:first-child).Lastly, the highest specificity is the ID selector (e.g. #menu-item-1. This means that any CSS selector directly selecting an element will prevail over any inheritable selector. This means that if an element is being styled using two CSS selectors with identical specificity, the #menu-item-1 will prevail over any inheritable rules.
The!important Rule Is Anything But
By applying the!important rule in CSS to a style, you are telling the browser to ignore all matching style rules and instead use your CSS.
