DEV Community

Discussion on: What CSS methodology should we use at dev.to?

Collapse
 
maruru profile image
Marco Alka • Edited

@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:

  1. I assign a "root" theme class to the body element, like t--light
  2. 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
  3. 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
  4. 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).

>>> Full Example


Using the above techniques allows you to very easily

  • maintain your site without fear, even after years with a completely different team
  • have self-explanatory CSS (you always want that for source code, why not for CSS?)
  • enable theming (dark mode ftw)
  • build a responsive layout easily (but please do it device-agnostic!)
Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
geoff profile image
Geoff Davis

Yeah, I like this approach as well. I use a modified/simpler system of BEM/ITCSS, namely:

.some-class.some-class--modifier
  .some-class_child

Structured like so:

sass/
  components/
  pages/
  parts/
  vendor/
  index.sass
Collapse
 
ardennl profile image
Arden de Raaij

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.