Guidelines HTML5 & CSS3 - Atlogys (2018)

AGENDA
• HTML5 Guidelines
• CSS3 Guidelines
• SMACSS Guidelines
• Design Guidelines

HTML5
Note: Always keep your code tidy, clean, and
well-formed.

HTML5
• Always declare the document type as the first line
in your document:
<!DOCTYPE html>

HTML5
We recommend using lowercase element names because:
• Mixing uppercase and lowercase names is bad
• Developers normally use lowercase names (as in XHTML)
• Lowercase look cleaner
• Lowercase are easier to write
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file
names: "london.jpg" cannot be
accessed as "London.jpg"

HTML5
• Image Attributes :
Always add the "alt" attribute to images. This attribute is important when
the image for some reason cannot be displayed. Also, always define image
width and height. It reduces flickering because the browser can reserve
space for the image before loading.

HTML5
Always follow this HTML Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello world! in HTML5</title>
<link href=”#” rel=”stylesheets”>
</head>
<body>
<p>Hello world!</p>
<script></script>
</body>
</html>

Heading Hierarchy:

HTML5
Comments:
This element is used to add a comment to an HTML document. An HTML
comment begins with . HTML comments are visible to anyone that views the
page source code, but are not rendered when the HTML document is
rendered by a browser.

HTML5
HTML5 layout:

HTML5
Setting The Viewport :
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
Prevent HTML Zoom:
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />

HTML5
Protocol:
Use the HTTPS protocol for embedded resources where possible.
Always use the HTTPS protocol (https:) for images and other media files, style
sheets, and scripts, unless the respective files are not available over HTTPS.

CSS3
CSS/CSS3 Guide Lines
Issues: If you’ve ever worked on a medium to large website, you have
probably come across a range of issues with CSS.
Repetition: Lots of floats, font-size references, heading levels repeated.
Unmanageable: It may have started out well, but it has become a mess?
Weight war: You need to add some CSS - so you must start adding to
selectors in order to win.
Coupling: Your CSS is specifically tied to HTML or location.

• Weight in CSS Selectors

Web Dev Philosophy
Respect the original design vision

CSS3
ID vs Classes

CSS3
• ID: An ID is a unique identifier which allows us to target a specific element
on the page and, since it is unique, it can only be used once in a page.
• Class: we have classes which allow us to do exactly the opposite. Classes
are used when you have the same element more than once on a page.
Use meaningful or generic ID and class names.
Instead of presentational or cryptic names, always use ID and class names
that reflect the purpose of the element in question, or that are otherwise
generic.

CSS3
• Use meaningful or generic ID and class names.
• Instead of presentational or cryptic names, always use ID and
class names that reflect the purpose of the element in
question, or that are otherwise generic.

CSS3
Shorthand Properties:
• Use shorthand properties where possible.
• CSS offers a variety of shorthand properties (like font) that should be used
whenever possible, even in cases where only one value is explicitly set.
• Using shorthand properties is useful for code efficiency and understandability.

CSS3
Prefixes:
• Prefix selectors with an application-specific prefix (optional).
• In large projects as well as for code that gets embedded in other projects or on external sites
use prefixes (as namespaces) for ID and class names. Use short, unique identifiers followed
by a dash.
• Using namespaces helps preventing naming conflicts and can make maintenance easier, for
example in search and replace operations.

CSS3

CSS3
Quick tips for creating CSS

SMACSS

SMACSS
• Scalable to…
1. Scale with larger projects
2. Scale with larger teams
3. Scale over multiple projects

SMACSS
• There are five types of categories:
1. Base
2. Layout
3. Module
4. State
5. Theme

SMACSS
1. Base:
CSS resets, default styles
(ex. html, body, h1, ul, etc)

SMACSS
2. Layout:
Grid, major components
ex. header, sidebar, nav

SMACSS
3. Modules:
Content patterns
(ex. search-box, navigation, content-box)

SMACSS
4. States:
Module in various states

SMACSS
5. Themes:
Module in various contexts

Grid System

Typography Page

Guidelines HTML5 & CSS3 - Atlogys (2018)

Recommended

More Related Content

Similar to Guidelines HTML5 & CSS3 - Atlogys (2018) (14)

More from Atlogys Technical Consulting (20)

Recently uploaded (20)

Guidelines HTML5 & CSS3 - Atlogys (2018)