I would use bootstrap (or similar) only for prototypes or small projects without design specifications, in a big project it becomes a limit in few months (overrides and !important hell)
There are auto-prefixers out there, you don’t want to write them manually
CSS transition or keyframes (with transform and other hardware acceleration properties) when possible
never, ever use IDs for CSS, are unique, in CSS we want to style reusable components, not unique elements :)
don’t try to generalise or reuse everything, repetition in CSS is ok, create reusable components, also small ones that includes behavior and style, don’t create reusable classes, there will always be a special case (many actually:) )
BEM is a thing, and it’s a good thing to avoid stuff like card sm-margin red in favour of card card—small card—red but also CSS modules and CSS-in-JS are a thing :)
Truth be told I recently used initializr when I had to do something super quick for a friend and it was PERFECT. I am not sure why people knock on frameworks.
Oh yes, good point about the auto-prefixers. Going to update that part in the bullet points.
Until today I always thought the best thing about CSS was showing how crazy specific by naming as many direct parent and children and classes as possible. Turns out this is not true! (womp womp)
I only became aware of scoped styles through Vue, though I have yet to build something to such a scale with so many views and templates where it becomes vastly important and convenient. One day.
Just to confirm about ids--so if I wanted to style a "unique" element, I create a different class?
And just to clarify, when you said "create reusable components" instead of classes, you meant that I should decide on what is Block, Element and Modifier (or the look of something in different states) instead of just arbitrarily creating classes for different visual elements right?
About ids yes, I would just create a different class.
Create reusable components instead of reusable classes I mean that it’s more clean and elegant, in my opinion, to reuse a component or custom element that encapsulates its own style instead of using the same class on 2 different elements, that I guess it’s the same of scoped CSS in Vuejs
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great article, thanks, very inspiring!
Those are my thoughts:
I would use bootstrap (or similar) only for prototypes or small projects without design specifications, in a big project it becomes a limit in few months (overrides and
!importanthell)There are auto-prefixers out there, you don’t want to write them manually
CSS
transitionorkeyframes(with transform and other hardware acceleration properties) when possiblenever, ever use IDs for CSS, are unique, in CSS we want to style reusable components, not unique elements :)
don’t try to generalise or reuse everything, repetition in CSS is ok, create reusable components, also small ones that includes behavior and style, don’t create reusable classes, there will always be a special case (many actually:) )
BEM is a thing, and it’s a good thing to avoid stuff like
card sm-margin redin favour ofcard card—small card—redbut also CSS modules and CSS-in-JS are a thing :)Truth be told I recently used initializr when I had to do something super quick for a friend and it was PERFECT. I am not sure why people knock on frameworks.
Oh yes, good point about the auto-prefixers. Going to update that part in the bullet points.
Until today I always thought the best thing about CSS was showing how crazy specific by naming as many direct parent and children and classes as possible. Turns out this is not true! (womp womp)
I only became aware of scoped styles through Vue, though I have yet to build something to such a scale with so many views and templates where it becomes vastly important and convenient. One day.
Just to confirm about
ids--so if I wanted to style a "unique" element, I create a different class?And just to clarify, when you said "create reusable components" instead of classes, you meant that I should decide on what is Block, Element and Modifier (or the look of something in different states) instead of just arbitrarily creating classes for different visual elements right?
About ids yes, I would just create a different class.
Create reusable components instead of reusable classes I mean that it’s more clean and elegant, in my opinion, to reuse a component or custom element that encapsulates its own style instead of using the same class on 2 different elements, that I guess it’s the same of scoped CSS in Vuejs