Foolproof Front-End Guidelines for novice and pro developers

Foolproof front-end guidelines for novice and pro developers

Frontend development work is rewarding, but it can be challenging. Tools and techniques are constantly being reinvented, meaning that even the most talented developer can quickly fall behind.

Here at CodersClan we’ve spent years developing cool projects. We try to be on top of the latest developments in… well… development.

We’ve spent years converting designs into fully working and great looking websites and realized that if you want your websites to look great, you need to look at your code at a new angle.

We’d like to share all the tips and tricks which will make your front end development and styling look smooth and professional.

Follow our hints to the pixel, and easily turn your designs into digital reality.

1. Split The Design into Logical Features

Your design will be much easier to work with if you break it down into self-contained features. Ideally, your features should be easily reusable in multiple locations (this will make the process much quicker when you’re changing or replicating designs elsewhere).

If an element appears more than once in the design, we recommend implementing it as a separate feature. Basically, the more moving parts you have to work with, the more dynamic and flexible your design will be.

Start with global styles, and work your way down to the most specific features. We suggest operating in this order -

1. Global styles (e.g. default font, text, anchors).
2. Components (e.g. buttons, cards, forms).
3. Blocks (sections).
4. Pages and templates.

Starting with universal features will give you a sound base from which to operate. You can then use composition to build more complex features.

Take a look at this example :

Here, we split a design into different features (components). We can then develop these components as standalones, to be moved around easily or used elsewhere.

2. Support Dynamic Content

All features should be implemented with dynamic content in mind.

Dynamic content is a must for online brands. To perform at their best in a crowded market, websites must be able to adapt quickly and smoothly, without breaking the UX. Bear this in mind when implementing every single feature.

Remember — each implementation should continue to work when

• Using more or less text than in the design.
• Using more or fewer children. Assume that lists and collections are infinite.
• Children are in odd or even numbers.
• Parts are omitted or content is empty.
• An image or element is bigger than its container.

Don’t use fixed sizes.

The size of each element should adapt to the content. This doesn’t mean that it shouldn’t look the same size in the design — but don’t take the design template as fixed and immutable. The important thing is that the content is clear and the design looks professional. Trying to squash content into an inflexible design will not give the sleek UX you need.

Rather than fixing widths and heights, use CSS properties such as margin, padding, min-width, and others to achieve the feel of the design while ensuring that each element is adaptable.

3. Implement responsive design

Always implement responsive design — even for breakpoints which don’t have a design provided.

• The content must be readable in all window sizes.
• The layout must not break or have glaring design issues.
• The code must be made with additional responsive breakpoints in mind.

Implement the generic design first

Start with rules that apply to all design variants. Begin by implementing the styles that apply to most breakpoints, then add media queries and rules for specific breakpoints.

Your goal here is to avoid property overwrites and reduce CSS noise.

.magic {
	/* Generic rules here */
	/* These rules apply to all breakpoints */
	/* Avoid property overwrites and restrict media queries overlaps */

	@include media('<small') {
		/* Rules for smaller devices only */
	}

	@include media('>=small', '<large') {
		/* Rules for medium devices only */
	}

	@include media('>=large') {
		/* Rules for larger devices only */
	}
}

• The responsive design should adapt when resizing the browser without the need for a page refresh.
• Avoid duplicate content by using a common HTML structure for all breakpoints. Only use separate HTML structures for different responsive breakpoints when the alternative is a more complex solution — these should be the exception to the large majority of cases.
• The responsive design should adapt when resizing the browser without the need for a page refresh.

Avoid duplicate content by using a common HTML structure for all breakpoints. Only use separate HTML structures for different responsive breakpoints when the alternative is a more complex solution — these should be the exception to the large majority of cases.

4. Strive for pixel perfection

Your implementation must aim to be pixel-perfect. Use the measurements provided by your design tool (we favor Zeplin, but Photoshop, Invision etc also work well) when establishing font sizes, spacing, margins, padding, and so on.

For comparison, overlay the design over the implementation using a tool such as PerfectPixel, or PixelParallel.

5. Follow CSS conventions

Set a consistent naming scheme throughout the project. Many of our projects use BEM.

• Target classes instead of elements. e.g. .btn instead of a, .menu-item instead of li, .footer instead of footer.
• Use single-direction margins e.g. always use margin-bottom instead of using both margin-top and margin-bottom.
• Avoid/minimize the following:
  - Using !important to overwrite a rule, unless absolutely required.
  - Excessive selector nesting. Deep selectors make it hard to overwrite rules.
  - Absolute positioning. It makes the implementation more rigid and responsive design harder to implement when it’s not used correctly. It has its place in specific situations, but it can be avoided for a large portion.
  - Fixed width or heights for containers. Instead, use min-width and min-height.
• Use flexbox and grid for creating layouts and avoid floats.
• Don’t overwrite values when the inherited value is enough. i.e. don’t set a property to the same value as the inherited value.
• Set common values in the parent element, instead of setting the same value in all child elements. See below -

/* Don't do this */
.bad {
	&__container {
		font-size: 1.2rem;
		/* ... */
	}

	&__item {
		font-size: 1.2rem;
		/* ... */
	}
	
	&__button {
		font-size: 1.2rem;
		/* ... */
	}
}

/* Do this instead */
.good {
	font-size: 1.2rem;

	&__container {
		/* ... */
	}

	&__item {
		/* ... */
	}
	
	&__button {
		/* ... */
	}
}

6. Respect grid and proper spacing rules

The grid is there for a reason. Respect it, and everything will fit just fine. Ignore or skip grid elements, and the result will be a clunky site which does not behave as you’d expect it to.

When using a framework (Bootstrap, for example), use its grid utilities.

If you don’t have a framework, respect the grid already in use in the project. The following rules will help:

• Use a container for setting boundaries (.container), and using rows and columns. Don’t skip rows and head straight to columns, for example.
• Be careful when setting padding or margins between grid columns. This can cause issues in other responsive breakpoints. Only set the padding if you adjust the spacing of the whole grid. Instead you can add spacing to the inner elements when needed.
• Avoid using padding for creating space between elements (any elements, not just grid). Padding should be used for inner spacing only.

7. Structure the code using SCSS

First, split your code into multiple files. Each file should apply to a single feature (a component, a block, etc.).

Then, create variables for any value that is used more than once. This is especially important for:

• Any value shared in multiple features
• Values that are dependent, related, or calculated from one another.

Create functions and mixins for common behavior. For example:

• To better identify media queries (e.g. identify when mobile navigation begins/ends).
• To hide the complexity of advanced selectors (e.g. target all headings, target arrows in a carousel, target IE).
• To apply style variations (e.g. apply different colors to a block, apply different spacings to a component).
• For common code structure or behavior (e.g. replicate button appearance, header bar top offset).
• For utilities (e.g. value conversion, quick access to specific maps).

8. Set default typography rules

• Implement global typography rules for headings, paragraphs, lists, etc. Set a default font size, family, line-height, and other common properties.
• Use appropriate HTML tags for rendering headings, i.e. use <h1>/<h2>/etc. and not <div>.
• Create CSS classes for alternate and common typography styles.
• Minimize overriding the typography styles for each section, unless they are really unique. Instead leverage the global rules: check the typography styles already defined in the project and see which styles apply to the given section.
• Optimize font delivery by only including the necessary font variations, adding preconnect hints, and hosting Google Fonts locally. If you have font files and need to convert them or generate the necessary rules, use a tool such as Transfonter.

9. Leverage the build system

• Install external dependencies through a package manager (npm, Yarn, etc.). This applies to both styles and scripts.
• Avoid adding external dependencies manually to a project (unless absolutely required). Place them in a separate vendor folder for easy identification.
• Use Autoprefixer and avoid manually adding vendor prefixes. If Autoprefixer isn’t adding the vendor prefixes you expect in the built CSS code, check the browserslist configuration. You can use the browserl.ist tool to see which browsers will be selected by a given query.

10. Use semantic tags

Semantic tags are vital for SEO and accessibility reasons. But they’re also useful for you, the developer.
They make the code a lot easier to understand and to work with.

For example:

• Clickable elements should be <a> or <button>, not <div> or <span>.
• Titles should be <h#> tags, not <p> or <div>. There should be one <h1> tag on a page and no more than one.
• Lists should use <ul> or <ol> and <li>.
• Images must have an alt attribute, even if empty (and it should be empty for images that are only decorative).

Other common tags:

• <main>: the dominant content area in a document.
• <aside>: frequently used for sidebars.
• <header>: a header for a document or section.
• <footer>: a footer for a document or section.
• <article>: a self-contained element, e.g. a post.
• <nav>: a section with navigation links.
• <section>: a standalone section.
• <blockquote>: for quotation.
• <figure>: self-contained content, e.g. photos, illustrations.

11. Implement maintainable JavaScript

• Avoid writing inline scripts, since these scripts don’t pass through the build system and cannot be reused or make use of existing features.
• Pass data for JS through data attributes. e.g. <div data-category="whitepaper">.
• Only execute a script when relevant, making sure the related elements are present on the page, e.g. if a script only applies to a particular section, then it should only be executed when that section exists in the HTML.

12. Use Bootstrap features

Many of our projects use Bootstrap. In such cases, make the most out of its features:

• Use containers and the grid system.
• Use the media query mixins for responsive breakpoints.
• Use components such as buttons, navbars, and others.
• Theme the components by setting SCSS variables.
• Use JavaScript features such as collapse, modals, and others.
• Improve the performance by only importing the features in use.

By following these guidelines, you’ll turn out the kind of flawless projects that clients love.

If you’re interested in joining our team and putting these skills to good use for one of the world’s top web development companies, see our open positions at codersclan.com, We look forward to meeting you!