DEV Community

Ben Halpern
Ben Halpern Subscriber

Posted on

What CSS methodology should we use at dev.to?

The CSS for dev.to is fairly wild-west right now. It's mostly scaled by way of isolating parts, meaning more copying and pasting and relying on SCSS nesting, less re-usability and few true rules.

I'm wondering if there are any CSS methodologies or strict rule sets you've used that you like. I'm familiar with BEM and would lean towards that from what I know, but I'm looking for some input to bring to the team.

Latest comments (37)

Collapse
 
ahmadawais profile image
Ahmad Awais āš”ļø

Sass with scss. BEM. That's it.

Collapse
 
decahub profile image
Dan

As a previous Chemistry nerd haha I am truly a fan of Atomic Design for UI in General :)

Collapse
 
whozzawuzza profile image
'''⌐(ಠ۾ಠ)¬'''

I've been learning styled-components after listening Wes Bos' Syntax podcast on the topic and a friend suggesting a look-see at them. So far, I'm really liking it. But I'm very much one for "keep everything together and easy to find", which is a selling point: the styles for the component are right there if you need to refactor/remove something.

Collapse
 
whozzawuzza profile image
'''⌐(ಠ۾ಠ)¬'''

Or, go the other route and try vanilla-css.com

Collapse
 
geoff profile image
Geoff Davis

You should take the CSS-in-JS approach and just use random alphanumeric strings to represent styled elements/components.

Collapse
 
cdvillard profile image
Charles D. Villard

One of the easier naming conventions I've found is rscss.

Collapse
 
justgage profile image
Gage

I love Tachyons (CSS library). It basically means that you almost never have to write custom CSS. Once you've started to get used to it it's so much faster. Not only that but it solves the CSS scoping issue in plain CSS which means it doesn't matter which framework you use. It's based on a design system so I makes it easy to make everything feel very cohesive. It's also trivial to make responsive websites with it. I've used it for many if my personal and work projects and have nothing but good things to say about it.

Sorry, just a bit of a fan.

Collapse
 
dazzknowles profile image
Dazz Knowles

We like to follow the Trello CSS guide as we find that helps maintain some discipline on our larger systems.

Collapse
 
ferkungamaboobo profile image
Reid Thomas

I would look at the underlying stuff -- make the pattern library first then implement the pattern library with whatever makes sense for size and scope.

Collapse
 
theodesp profile image
Theofanis Despoudis • Edited

I like a combination of custom styles with less.js and styled components.

Collapse
 
vasilvestre profile image
Valentin Silvestre

ITCSS at it's finest ! medium.com/dev-notes/just-do-itcss...