CSS

BEM---bem.css

/*
    Block-Element-Modifier (BEM) is a popular naming convention created to help developers understand
    the relationship between the HTML and CSS in a given project.

    BLOCK is a top-level abstraction of a new component.
    We can think of it as parent.

    ELEMENTS can be placed inside BLOCKS and are denoted by two underscores (__).
    We can think of them as children.

    MODIFIERS can manipulate the block so that we can theme or style that particular
    component without inflicting changes on a completely unrelated module.
    This is done by appending two hyphens to the name of the blocks (--).

    EVERYTHING IS A CLASS IN BEM
    NOTHING SHOULD BE NESTED!

    CODE SHOULD BE FLAT
*/

/* CSS */
/* BLOCK component */
.btn {
    border: 2px steelblue solid;
}

/* ELEMENT that depends upon the block */
.btn__price {
    color: green;
}

/* MODIFIER that changes the style of the block */
.btn--orange {
    color: orange;
}
.btn--big {
    padding: 20px;
}

/* HTML */
<a class="btn btn--big btn--orange">
    <span class="btn__price">$9.99</span>
    <span class="btn__text">Subscribe</span>
</a>

/*
    Why should we consider BEM?
    1. If we want to make a new style of a component, we can easily see
    which modifiers and children already exist.
    We might even realize we don't need to write any CSS in the first place,
    because there already exist the modifier that we needed.

    2. If we are reading the markup instead of CSS, we should be able
    to quickly get an idea of which element depends on another.

    3. Designers and developers can consistently name components for easier
    communication between team members.
    In other words, BEM gives evryone on a project a declarative syntax that they
    can share so that they're on the smae page.

    In big codebases people forget what some CSS was doing, that's why
    using BEM is a better idea, it is futureproof.

    */

    /* ILLEGAL NESTING EXAMPLE */
    /* You cannot nest .nav and .nav__listItem together. */
    .nav .nav__listItem .btn--orange {
        background-color: green;
    }

    /*
        SOME MORE RULES
        0. DON'T OVERWRITE HTML ELEMENTS!!
        1. When child can exist by itself then you don't need to add unneccessary parent element.
        2. Never override modifiers in an unrelated block.
    */

    /*
        SASS & BEM

        In SCSS we can use & symbol to introduce nesting instead of typing
        the wole name everytime, it looks much cleaner then.
    */


    .form-field {
        margin-left: 4.2rem;
        margin-top: 2.8rem;
    
        &__select {
            padding-left: 1.4rem;
        }
    
        &__input,
        &__textarea {
            &--error {
                background: var(--bg-color-base);
                border: 1px solid var(--error-color);
                border-radius: 0.6rem;
            }
        }
    }
    
    .required {
        display: inline-block;
        color: var(--asterisk-color);
    }
    
    .button-field {
        text-align: center;
        margin-top: 17rem;
        border-top: 1px solid var(--box-shadow-color);
    
        .formButton {
            margin-top: 3.5rem;
            margin-bottom: 3.5rem;
    
            &__submit {
                margin-left: 2.8rem;
            }
        }
    }
    
    .error-message {
        position: absolute;
        margin-left: 4.2rem;
        width: fit-content;
        padding: 0.4rem 1.1rem 0.4rem 1.1rem;
        background-color: var(--error-color);
        border-radius: 0.6rem;
    
        &__info {
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--bg-color-base);
        }
    }
    

cascades.css

/*
    CSS (Cascading Style Sheets) describes how HTML elements
    should be displayed.
    It can control the layout of multiple web pages all at once

    Why use it?
    To define styles for your web pages, including the design,
    layout and variations in display for different devices
    and screen sizes.

    HTML was never intended to contain tags for formatting a web pages!
    HTML was created to describe the content of a web page.

    CSS removed the style formatting from the HTML pages!


    CSS Syntax

                  declaration
selector        property:value
    h1      {       color: blue;
                    font-size: 12px;
            }

    The selector points to the HTML element you want to style.
    The declaration block contains one or more declarations separated by semicolons.
    Each declaration includes a CSS property name and a value, separated by colon.
    Multiple declarations are separated with semicolons, and declaration blocks
    are surrounded by curly braces.

    CSS Cascade
    The cascade is an algorithm that defines how to combine property values
    originating from different sources.
    It lies at the core of CSS, as emphasized by the name.

    Which CSS entities participate in the cascade?
    property:value pairs

    Origin of CSS declarations
    CSS cascade algorithm's job is to select CSS declarations in order to determine
    the correct values for CSS properties.
    CSS declarations originate from different origins:
    a) USER-AGENT STYLESHEETS
        - basic style sheet provided by browser

    b) AUTHOR STYLESHEETS
        - style sheets provided by author of the design, so our .css files

    c) USER STYLESHEETS
        - style sheets provided by user/reader, they may override those on websites!
        
    The cascading algorithm determines how to find the value to apply for each
    property for each document element.

*/