3

I'm using ITCSS for my latest project.

The layers of the triangle are the follows:

  • Settings — used with preprocessors and contain font, colors definitions, etc. In this layer is common define the variables that can customize the template.
  • Tools — globally used mixins and functions. This layer is only used if we use a preprocessor as SASS.
  • Generic — reset and/or normalize styles, box-sizing definition, etc. It is important to note that this is the first layer of the triangle that generates CSS.
  • Elements — styling for bare HTML elements (like H1, A, header, footer, …). These come with default styling from the browser so we must to redefine them here.
  • Objects — class-based selectors which define undecorated design patterns, for example media object known from OOCSS such as list, radio-button.
  • Components — specific UI components. The components of our page, for example button, card, concrete-list, etc..
  • Utilities — utilities and helper classes with ability to override anything which goes before in the triangle.

Taken from https://dev.to/carlillo/understanding-itcss-real-case-using-itcss-in-a-ghostcms-blog-1p9b

but where do I put my css animations?

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
          opacity: 1;
     }
 }

1 and 2 must not generate CSS therefore I expect number 3 (Generic) is the right section?

Can anyone confirm?

sidonaldson
  • 24,431
  • 10
  • 56
  • 61
  • 1
    According to the article you did link yourself, they go into the utilities file. 'The utility layer is reserved as a “catch-all” in our case we have left here animations that could have gone perfectly to lower layers since they are generic but we have preferred to transfer it to utilities' – Thomas Scheffer Jun 11 '19 at 08:50
  • @ThomasScheffer yes, but I disagree wholeheartedly that animations are utilities or overrides - hence the question :) – sidonaldson Jun 11 '19 at 09:52
  • 1
    I agree. After I made the comment I did a quick search myself and found a resolution, using more of less the method from Persijn's answer(without the utilisation of the tools layer) – Thomas Scheffer Jun 11 '19 at 11:45

1 Answers1

4

Animations in itcss

If the animation is used multiple places define it in the Object layer.
If you are using a preprossor and create animations for different components put it in the Tools layer.
If its a one time only animation it should be placed in the Component layer

Persijn
  • 14,624
  • 3
  • 43
  • 72
  • I much prefer this. You could have a mixin/placeholder in tools but that would generate CSS so, therefore, I could discount that. Object for all and Component for one-offs IMO. – sidonaldson Jun 11 '19 at 09:55