Use stable architecture! Stay clear of frameworks, preprocessors and build steps. CSS is all you need! Base it for example on Herry's BEMIT and ITCSS. In addition, use very small and simple rules, meaning mainly one class you select (without nesting).
BEMIT is a naming convention, which makes sure that you can get a lot of info from the class name alone: How many elements are affected? Which role does it play? Where on the site can I find it? For example c-menu__logo--small@mq-mobile is a class name, which affects one element, located in the menu, which is a logo and makes the standard representation smaller in size. Additionally, it will only affect the mobile media-query.
ITCSS is basically establishing layers of specificity (ranging from generic to specific), which makes sure you override rules in a sane manner. Harry uses the layers Settings, Tools, Generic, Elements, Objects, Components, Utilities in that order, but you can of course define your own!
On top of that, factor-in theming from the start. I already wrote an explanation, so I'll just copy that here:
I assign a "root" theme class to the body element, like t--light
Then, every element with a theme (even if only one theme is planned) will get a t- (theme) CSS class. For example t-menu__item--active
To make it work, I prefix the CSS selectors with the root theme class. If I want to add a new theme, all I have to do is copy all theme related CSS classes, change the prefixed CSS theme class and do the actual theming
Switching the theme is as easy as removing and adding a CSS class in the body tag (either on the server or the client side).
@ben
Don't go for hype-driven development!
Use stable architecture! Stay clear of frameworks, preprocessors and build steps. CSS is all you need! Base it for example on Herry's BEMIT and ITCSS. In addition, use very small and simple rules, meaning mainly one class you select (without nesting).
BEMIT is a naming convention, which makes sure that you can get a lot of info from the class name alone: How many elements are affected? Which role does it play? Where on the site can I find it? For example
c-menu__logo--small@mq-mobile
is a class name, which affects one element, located in the menu, which is a logo and makes the standard representation smaller in size. Additionally, it will only affect the mobile media-query.ITCSS is basically establishing layers of specificity (ranging from generic to specific), which makes sure you override rules in a sane manner. Harry uses the layers Settings, Tools, Generic, Elements, Objects, Components, Utilities in that order, but you can of course define your own!
On top of that, factor-in theming from the start. I already wrote an explanation, so I'll just copy that here:
t--light
t-
(theme) CSS class. For examplet-menu__item--active
>>> Full Example
Using the above techniques allows you to very easily
Hehe, you don't have to tell me about avoiding the hype. We probably have the least hypey approach I can think of. π
Thanks a lot for the tips. Will definitely take into consideration.
Yeah, I like this approach as well. I use a modified/simpler system of BEM/ITCSS, namely:
Structured like so:
Couldn't agree more! I think my favourite ways to write css are based on BEM(IT) and SMACSS. Thanks for t he great comment.