In order to maintain consistency and readability in the code of the Cubosquare web development team, we have established a set of coding guidelines for HTML and CSS. These guidelines are based on industry standards and best practices, and should be followed by all members of the team.
-
Use semantic markup whenever possible. This means using HTML elements that have meaning and convey the purpose of the content, rather than using generic divs or spans.
-
Use lowercase for all HTML tags and attributes.
-
Use double quotes for all attribute values.
-
Use two spaces for indentation to make the code more readable. Indent nested elements by one level.
-
Use comments to explain the purpose of each section of code.
-
Do not use inline styles. Instead, use external CSS files to define styles.
-
Use HTML5 doctype:
<!DOCTYPE html> -
Use UTF-8 as the character encoding:
<meta charset="utf-8"> -
Use alt attributes for all images:
<img src="./img/example.jpg" alt="Description of the image">if the image is decorative, use an empty alt attribute:<img src="./img/example.jpg" alt=""> -
Use the HTML5
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>elements to define the structure of the page. -
Do not nest
<header>,<section>,<footer>elements inside each other. -
Use the
<div>element to group elements together when there is no other suitable element available. -
Use the
<span>element to group inline elements together when there is no other suitable element available. -
Use the
<strong>element to indicate important text. If the text is bold for stylistic reasons, use CSS instead. -
Use the
<em>element to indicate emphasized text. If the text is italic for stylistic reasons, use CSS instead. -
Use proper heading tags for page structure:
<h1>for the main title,<h2>for section titles, and so on. -
Use
<p>tags for paragraphs of text. -
Use
<ul>and<ol>tags for unordered and ordered lists, respectively. -
Use
<a>tags for links. External links should have thetarget="_blank"attribute to open in a new tab. -
Use
<input>for buttons when there on specific reason to use<button>. Use thetype="submit"attribute to submit a form when the button is clicked. -
Use
<button>tags for buttons. Use thetype="button"attribute to prevent the button from submitting a form if it is not supposed to do so. -
Use
<form>tags for forms. Use theactionattribute to specify the URL where the form data should be submitted. Use themethodattribute to specify the HTTP method to use when submitting the form data. -
Use
<input>tags for form inputs. Use thetypeattribute to specify the type of input. Use thenameattribute to specify the name of the input. All form inputs should have anameattribute. -
Use
<label>tags for form labels. Use theforattribute to specify theidof the input that the label is for. -
Use
<select>tags for dropdown menus. Use<option>tags for the options in the dropdown menu. -
Use
<table>tags for tabular data. Use<thead>,<tbody>, and<tfoot>tags to define the table header, body, and footer, respectively. Use<th>tags for table headers. Use<tr>tags for table rows. Use<td>tags for table cells. -
Do not use
<br>tags for spacing. Instead, use CSS to add spacing between elements. -
Do not use
<table>tags for layout. Instead, use CSS to position elements. -
Do not use deprecated HTML elements or attributes. For example, do not use
<center>tags or thealignattribute. -
Use relative URLs for all links and images. For example, use
src="./img/example.jpg"instead ofsrc="https://example.com/img/example.jpg".
-
Use meaningful and descriptive class names. Avoid using single letters or abbreviations.
-
Use BEM naming convention for class names. A BEM class name consists of three parts: the block, the element, and the modifier. For example,
.menu__item--activewould be a BEM class name for an active menu item. -
Use two spaces for indentation to make the code more readable. Indent nested rules by one level.
-
Use lowercase for all CSS selectors and properties.
-
Use of scss is recommended. If you are using scss, use separate files for each component or section of the website. For example, you could have a
navigation.scssfile for the navigation bar, afooter.scssfile for the footer, and so on. -
Use variables to define colors, fonts, and other values that are used throughout the website. This will make it easier to make changes to the design in the future. For example, you could define a
$primary-colorvariable for the primary color used throughout the website. or in css--primary-color: #000;and use it like thiscolor: var(--primary-color); -
Keep the code as simple as possible. Avoid using unnecessary selectors or properties.
-
Keep the code modular. Avoid using long selectors that are specific to a particular page or section of the website.
-
Use single line comments to explain the purpose of each section of code.
-
Use shorthand properties whenever possible to reduce the amount of code. For example, use
margin: 0instead ofmargin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;. -
Don't use reset but if you want use normalize.css instead.
-
Use media queries to create responsive designs that adapt to different screen sizes. There is no pre-defined breakpoints, you can define breakpoints according to design.
-
Avoid using
!importantunless absolutely necessary. It can make the code difficult to maintain and override.
Here is a recommended file structure for the Cubosquare web development team:
- index.html
- about.html
- contact.html
- css/
- styles.css
- ...
- img/
- logo.png
- background.jpg
- ...
- js/
- script.js
- navigation.js
- ...
- scss/
- styles.scss
- _variables.scss
- _header.scss
- ...
These guidelines are not set in stone. They are meant to be a starting point for the Cubosquare web development team. Feel free to make changes to these guidelines as needed.