Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Getting Popular

    ITCSS

    Jimi Wikman
    Message added by Jimi Wikman,

    This is just a placeholder and it will be re-written soon.


    What is ITCSS?

    ITCSS stands for Inverted Triangle CSS. It helps you organize your project CSS files in such a way that you can better deal with CSS specifics like global namespace, cascade and selectors specificity.

    You can use ITCSS with preprocessors or without them and it is compatible with CSS methodologies like BEM, SMACSS or OOCSS.

    The main idea of ITCSS is that it separates your CSS codebase into several sections (called layers), which can be represented as sections of an inverted triangle:

     

    Those layers are:

    • Settings – used with preprocessors and contain font, colors definitions, etc.
    • Tools – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
    • Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
    • Elements – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.
    • Objects – class-based selectors which define undecorated design patterns, for example the media object known from OOCSS
    • Components – specific UI components. This is where most of our work takes place. We often compose UI components of Objects and Components
    • Utilities – utilities and helper classes with ability to override anything which goes before in the triangle, e.g. hide helper class

    The triangle also shows how styles appear in the resulting CSS: from generic styles to explicit ones, from low-specificity selectors to more specific ones and from far-reaching to localized ones.

     

    https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

     

    Discuss the Guide

    Recommended Comments

    There are no comments to display.



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now
     Share

    • Frontend Reference Playbook

×
×
  • Create New...