epigenesis

Welcome to epigenesis

epigenesis is a new code standard framework which wants to help you to develop and deploy Web Applications without syntax errors, grammar faults, duplicated content, and attributes, and with a real epigeneses experience.

But,

What is the epigenesis?

“development of a plant or animal from an egg or spore through a series of processes in which unorganized cell masses differentiate into organs and organ systems”;

That’s the base for Epigenetic Theory, which says that “chemical changes to DNA and its associated proteins—that modify gene activity without altering the genetic information itself”.

TL;DR they says that if you are changed by the environment it don’t will change your genetics itself, only your external “layout”.

This is what we think about development. The gene itself is just the litle piece of what is deployed, but, if the environment can changes and defines the “visible” you, why can’t should I make the cern better?

Yeah, this is a nonsense argument, which below are explained for a dev human, or, a AI machine, Doctor Who knows? Let’s make epigeneses.

Table of Contents

1. Structure
   • CSS Shorthand
2. Terminology
   • Rule Declaration
   • Selectors

3. Don’ts vs. Do’s

4. Best Practices

5. Others Methodologies
   • Atomic
   • BEM
   • Idiomatic
   • OOCSS
   • SMACSS
   • SUITCSS

6. References

7. Articles

Structure

Work in progress.

CSS Shorthand

Work in progress.

Terminology

Rule declaration

A selector (or a group of selectors) with an accompanying group of properties.

Example:

.class h1 {
    font-size: 18px;
    line-height: 1.2;
}

Selectors

Defines where the style properties will be set to create a custom style in the DOM tree elements which matchs the rule declaration. Can be used HTML elements, as well as an element’s class, ID, or any of its attributes.

Examples:

#id {
    /* ... */
}

.class {
    /* ... */
}

[data-link] {
    /* ... */
}

h1 {
    /* ... */
}

Don’ts vs. Do’s

Work in progress.

Best Practices

Work in progress.

Others Methodologies

Work in progress.

Atomic

Breaking down styles into atomic, or indivisible, pieces.

BEM

Short Description.

Idiomatic

Short Description.

OOCSS

Separating container and content with CSS “objects”.

SMACSS

Style-guide to write your CSS with five categories for CSS rules.

SUITCSS

Structured class names and meaningful hyphens.

References

• https://cssguidelin.es
• https://isobar-us.github.io/code-standards/
• https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS
• https://google.github.io/styleguide/htmlcssguide.html
• https://make.wordpress.org/core/handbook/best-practices/coding-standards/css
• https://codex.wordpress.org/CSS_Shorthand

Articles

• https://webdesign.tutsplus.com/articles/css-documentation-best-practices—cms-30139/
• https://css-tricks.com/bem-101/
• https://coding.smashingmagazine.com/2008/05/improving-code-readability-with-css-styleguides/
• https://coding.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/
• https://www.smashingmagazine.com/2007/05/70-expert-ideas-for-better-css-coding-2/
• https://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
• https://csswizardry.com/2012/04/my-html-css-coding-style/
• http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Got feedback?

Please create a GitHub Issue.