This CSS Tutorial for Beginners guest post is brought to you by Kris Ekenes, Instructor at Coding Dojo.
The inception of state-of-the-art CSS began over 25 years ago when one of the earliest pioneers of the Web, Håkon Wium Lie, proposed the first idea of Cascading Style Sheets while working at CERN in 1994. In the decades since, CSS has become a staple in state-of-the-art web pages, directly influencing how we experience and interact with virtually every site on the Internet.
While CSS has seen vast improvements over the years, it can be daunting to step into the world of CSS. Understanding the rules and regulations that govern not only how CSS works, but what the CSS best practices are can be a challenge unto itself.
This brief CSS tutorial shows the CSS best practices in use today. From naming and selectors to extensions and organization. This should provide a solid jumping-off point to dig into what modern CSS has to offer. Read on to learn more some tips to consider when your diving into CSS Tutorial completes just for beginners.
CSS Tutorial for beginners: what you need to know
Naming Convention Guidelines
Perhaps one of the most difficult and overwhelming aspects of creating good CSS is devising a solid naming convention that allows both flexibility and granularity within your styles throughout the project. There are a handful of popular methodologies including OOCSS, SMACSS, and BEM. BEM — which stands for Blocks, Elements, and Modifiers — is one of the best solutions for anyone new to CSS conventions.
While a more detailed description can be found on the BEM site, we’ll give a brief overview here to get a sense of how you should consider managing your CSS naming and structure in your next project. Another great resource for CSS naming conventions that will save you loads of time can be found here.
The Basics
- Block – A block is a standalone element that’s unique and serves a purpose on its own. Examples include nav, header, footer, and input.
- Element – An element is an object that’s semantically linked to a parent block. Thus, a li item is an example of an element within the nav block.
- Modifier – A modifier, as the name implies, modifies the appearance or behavior of a block or element. The nav block or element may have a selected or disabled modifier class.
Get to the Naming
- Try to avoid camelCase names throughout your CSS. It’s generally considered better to use dashes (-) to separate words and be more readable.
- Your blocks should be named with an identifying class name in HTML — using letters and dashes only — so it can be selected in CSS with the same class name, such as: .menu
- Elements can then be conjunctively named as attachments to the parent block using two underscores: .menu__item
- Finally, modifiers are third in line after the element and are separated using two dashes: .menu__item–disabled
- 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
- While no naming convention system is ideal, whether you use something like BEM as described above or your own methodology, the critical thing is to choose a system and be consistent across your team. As long as everyone is on the same page, at the end of the day, the actual specifics of the method don’t matter all that much.
Understanding Specificity
When your browser analyzes the HTML and associated style sheets, it uses a weight called ‘specificity’ to determine which CSS selectors take precedence over others and are ultimately applied. The higher the specificity of a selector and the matching HTML element, the more likely it takes precedence over other, lower specificity selectors.
The lowest specificity selectors are type or tag selectors that select a specific HTML element (e.g. article, span, p).
Next are the class (e.g. .main-menu), attribute (e.g. [lang=”en”]), and pseudo-class selectors (e.g. .main-menu:first-child).
Lastly, the highest specificity is the ID selector (e.g. #menu-item-1).
Put more simply, this means that any CSS selector that’s directly selecting an element will take precedent over any selector that is inherited. Thus, if the #menu-item-1 is an ID selector in the stylesheet, those rules will be applied over rules it inherits from being a part of the .main-menu class.
It’s also worth noting that when an element is being styled by two rules with identical specificity, the most recently defined rule will be applied (in effect, both are applied, so the rule that was applied last is kept around).
Why the !important Rule is Anything But
When applying the !important rule to a style in your CSS, you are effectively telling the browser to ignore all other matching style rules, and instead, apply only what is specified by !important. In almost all cases, using !important is a terrible practice because it naturally destroys the cascading aspect of your stylesheets by avoiding all other rules.
The one exception where !important may be required is if you are styling a page this is importing CSS from another source outside of your control (such as a third-party library).
In such cases, it may be that you are unable to force your style rule to have the highest specificity, and must, therefore, use !important to grab control back. However, in most situations and development environments, !important can and should be avoided at all costs.
Use Element and Class Selectors
It can be easy to believe you need to be very specific with your CSS selectors by using a combination of tags and/or IDs with your element and class selectors, but in the majority of situations, simply using the element or class selector will suffice.
In the example below, we ultimately want to modify either the contents of the nav element or the .menu-button class, so we don’t need to complicate things further by adding unnecessary tags or utilizing a specific #home-button ID selector.
Example (Gist)
Use Shorthand Properties
Many CSS rules have multiple forms with which the rule can be written. Ideally, for the sake of readability and brevity, you’ll want to always use the shorthand versions of these properties.
Example (Gist)
Alphabetize Properties Within Rules
For clarity and to keep your code consistent, try to get in the habit of alphabetizing your properties list. The notable exception is with vendor-specific prefixes, which should typically remain grouped with the core properties they belong with. Some developers also like to put vendor-specific rules at the top of the list, with all the standard properties to follow in alphabetical order.
Example (Gist)
Working with the SASS / SCSS Extension
While it is useful to both understand and be able to work with standard CSS, the truth is that these days, almost all state-of-the-art web applications are using Sass (Syntactically Awesome StyleSheets), the very robust and popular CSS extension.
Also, Sass allows you to use all the standard CSS you know and love in addition to a slew of new features like variables, nesting, mixins, and more. Once you begin using Sass, you’d be hard-pressed to ever find a reason to resort back to plain CSS syntax again.
Since the official Sass documentation offers a plethora of good information on using Sass properly, we’ll just briefly touch on some of the core concepts to entice you to learn more and get started.
It’s also briefly worth noting that throughout the documentation and on the web, you will often see two different names to refer to Sass: Sass and SCSS. SCSS (Sassy CSS) is the latest and most prevalent version of the Sass syntax. Virtually everyone will be using the newest syntax (SCSS), rather than the older syntax (which was originally known as Sass).
Thus, it can generally be assumed that in almost every case, both the terms SCSS and Sass are used interchangeably and refer to the same thing, which is the SCSS syntax of Sass.
Variables
One of the coolest features of SCSS is the use of variables, which just like in other programming languages, allow you to assign a particular value to a named variable, and then reference that variable throughout your SCSS code. This makes it incredibly simple to change a single property, such as the default font-color, across the entirety of your project in one line.
A variable simply requires the $ symbol preceding the name, then an assigned value. The variable can then be referenced by the same $name later for extraordinarily easy assignment and reuse.
Example (Gist)
Nesting
To allow for a simple visual hierarchy of your CSS rules, SCSS features nesting. This grants you the ability to order and indent your rules and elements, much in the same way your HTML is structured, and the generated CSS will make the appropriate associations for you.
For example, if we wanted to modify the color of text within article elements, and also change the behavior of all paragraph and links that are descendants of an article element, we could use nesting in SCSS.
Example (Gist)
This SCSS would generate the following CSS as expected.
Example (Gist)
Using Mixins
Another great feature of SCSS is mixins, which are effectively like more complex variables that can contain multiple CSS rules and then be applied to other elements throughout your styling. Mixins can even have parameters with which to pass your own values, much like small functions of CSS goodness.
The official documentation has a great example of mixin usage for consolidating all the various vendor prefixes to modify the border radius into one single mixin.
That’s just a small taste of some of the awesome features of SCSS, so you should absolutely start using the extension in your own project to get used to this amazing technology that extends the power of CSS by leaps and bounds.
Additional resource: Infographic – What’s the Difference between HTML vs CSS?
A CSS tutorial guide for beginners may be the way to a new career journey
A CSS Tutorial guide for beginners complete from start to finish. Want to know more about coding? Learn more about skills you need to take you to the next level at Coding Dojo.
Source: https://www.codingdojo.com/blog/css-tutorial-for-beginners
