CSS

How Professional Programmers Use CSS

April 16, 2019 Posted by Programming 0 thoughts on “How Professional Programmers Use CSS”

Wrangling with CSS can be a nightmarish concept when you’re first learning front end web development. You’ll find that there are so many ways to accomplish a style that, if you don’t adhere to a guide, you’re page(s) will start to look like a disorganized string of naming conventions and attributes. When you’re first starting out, it can be tempting to ignore convention and just shoot from the hip to see if anything works. Rather than using classes, you might find that you have a thing for IDs, but the pros will telly you that that’s just bad practise. You can’t scale a stylesheet effectively if you litter IDs everywhere.

If you want to learn the proper way of doing things, it helps to learn from experienced front end developers. Recently, I came across an informal interview between a questioner and some devs in a forum post that I’ll share with you now. The interviewer first provided general CSS tips that will boost your skills. Some of these tips were:

  • if using grid, use height: 100vh to make the minimum height appear the height of the viewport

  • apply style using classes with semantic names instead of IDs or elements (i.e. .site_header instead of #header ul)

  • include cross-browser prefixes for any animations or exceptions (i.e. for drop-capitals in Safari or webkit- for Safari and moz- for Firefox and ms- for IE. Using an autoprefixer makes that easier.

  • convert any sizes to em and rem instead of px

  • Use grid or flexbox where available, always stick to a grid

 

I reformatted the responses so that they fit within the structure of a formal Q & A. Here’s the interview:

 

What do you do about responsiveness for mobiles when you get one layout?

 

 Ryosuke: Since mobile development tends to be one, maybe two col max, if I’m only provided a desktop version of the design, I just run with it and simplify/distill the design down. If there’s any elements that don’t work on mobile, they get cut out completely until the designer complains and sends over a more mobile-friendly design 😁 Unless you’re hired as the designer, or you’re included in the design process, it’s not your job to “get creative” or “invent” solutions to design problems that should have been resolved in the wireframe/mockup phase.

 

James Turner: Sometimes I get mobile designs, sometimes I just have to improvise. Normally though, that improvisation is pretty simple like just re-arranging items. I don’t often have to fully switch out interfaces from desktop when going down to mobile. That said, I normally do have a designer I can talk to if I really am not sure about what to do.

 

Frederick Jaime: You should always request a Desktop and Mobile layout at a minimum, if there is no way around it, do your best to adjust and make sure people are aware you’re a dev and not designer, so expectations are set. Hopefully by then, they will provide you with the additional layout(s). I don’t want to go down the rabbit hole how to design for devs because as a dev, you shouldn’t be designing.

 

Ryan: Way too project-dependent to answer. Since space is usually the concern, figure out which elements are essential and which can be relegated to a menu or removed entirely.

 

Ali Spittel: I’ve never worked on a team with a full time designer! I would agree though, that hamburgers and full screen layouts are usually the way to go.

 

Any particular choice on grid (4, 10 or 12 columns. 30em, 40em) ?

 

 Ryosuke:No preference on grid size really. I tend to use 5 and 24 cols, since they’re most prevalent in grid systems, but I’ll use 3/4/8/16/anything that looks right/makes the design work best.

 

James Turner:Honestly, I don’t actually use a grid layout. I have looked at them before but I haven’t found one that I’d want to stick with.

 

Frederick Jaime: I tend to lean into how frameworks create their grids, i normally create a sass mixin to output my columns, 12-grid fluid columns. I would suggest to look at Foundation or maybe Bootstrap. If this is a large project maybe import a framework, if this is a small project i would highly suggest to keep a list of handy mixins you can use in various project.

 

Ryan: I don’t use fixed-size grids, it’s too restrictive. I do like to have a centered content area of a fixed maximum width, since it’s hard to read extremely wide windows.

 

Ali Spittel: Definitely depends on the design, but I use fr’s a lot. Super helpful for a lot of layouts.

 

How many media queries do you include? How do you decide where the breakpoints are?

 

 Ryosuke: At minimum for any project, one media query (either for desktop or mobile), and the base CSS defaults to the other. If the design is more complex, I add media queries as necessary to correct issues at the problem breakpoint (usually at uber-wide resolutions if the site’s audience is rocking 4k double-wide monitors, or small fixes for absolutely positioned elements)

 

James Turner: I normally have quite a lot of media queries, it probably plays a bit into #2 about why. I write a new media query every time something “breaks” in the layout like if it overflowed off the screen horizontally or wraps in an unusual way. I am aiming for as fluid of a responsive layout as I can. I aim to get breakpoints down as low as 320px.

 

Frederick Jaime: Everyone should develop smallest-screen-first ( mobile-first ), and should start with two breakpoints, 768px and 1024px. Any additional breakpoints will be dictated by the design.

 

Ryan: As few as possible, obviously depends on design and that may not always be possible but I feel it’s best to have a single breakpoint around 480px. Why 480? Because your mobile layout will span 300-480 wide and your desktop breakpoint will span 480-800 or 900. You can have a layout that looks good at 480 that’s not cramped at 300, you can have a layout that looks good at 500 that doesn’t look empty at 800.

I think it’s fine to show/hide a couple of elements with more than one breakpoint too but you don’t want to be maintaining 3 or 4 complete separate layouts.

 

Ali Spittel: I normally make them once something looks weird. So once text is overlapping or something, I’ll add another mediaquery. I would also look up the sizes of popular devices and make sure your work looks great there.

Any opinions on using CSS vs JS for animations?

 

 Ryosuke:CSS/SASS for most animations, unless it’s so complex that it requires JS (JS functionality like checking animation frames or DOM elements, or using a lib like GreenSock). Going CSS-first usually ensures the highest level of browser compatibility, particularly since animations will work even when JS is disabled client-side.

 

James Turner: I use CSS to do all the actual heavy lifting of styling the animation. I will use JS to add/remove classes on a timed sequence if the animation is that complex. The browser can make better use of hardware rendering via CSS transforms etc.

 

Frederick Jaime: With animations i would suggest to use GSAP, this animation platform tries to leverage css first but defaults to js. Let’s be clear, when you refer to animations i am thinking of non-linear animations, something more then just a fade. Simple rollovers, effects should be in css but the fancy stuff should be with something similar to GSAP. You don’t want to add unnecessary weight to your page.

 

Ryan: CSS where possible. Not sure where I would have an animation that is only possible with JS. Not counting using JS to change an element’s style in order to cause a CSS animation.

 

Ali Spittel: Normally CSS animations are more efficient than JS ones, but really complex ones can only be done in JS. Transforms specifically go to the GPU which makes them super smooth.

 

At what point do you see it necessary to use SASS or LESS? Is BEM still a thing?

 

 Ryosuke:I use SASS when the project is so large I’ll be using variables across the app (which could be replaced with CSS vars) and when I need the power of mixins to simplify CSS generation (like grids, complex animations, or repetitive actions). Otherwise pure CSS run through a minification process (Gulp/Grunt/Webpack/Parcel) before it’s deployed to prod works fine. I tend to use BEM combined with OOCSS, so I have non-conflicting CSS styles (.HeaderMenu with .HeaderMenu > .list and .HeaderMenu .item nested classes). That way I get non-conflicting base styles, with without the verbose BEM sub-classes (.HeaderMenu__item) and my shorter CSS classnames work fine thanks to specificity. Similar to Airbnb’s CSS style guide (BEM component-style names), combined with Semantic UI’s (OOCSS).

 

James Turner: This is going to be an uncommon opinion but I’m not actually a fan of SASS/LESS etc. I do understand what it can provide like removing repetition from CSS and allowing for easier to manage complex styles (eg. variables). That said, I’ve never hit something with vanilla CSS that I consider a problem that needs a solution like SASS etc. As for BEM, I understand what it can help with but it is too verbose for my liking and I feel makes the styling actually more complicated. I guess these both can be summarized that SASS and BEM solve problems but they don’t solve my problems.

 

Frederick Jaime: I always use Sass, I like using a process to build my Sass. Most of the current frameworks allow you to add linters, in my current project we are using Gulp, created task to clean, compile, and minified my code.

Ryan: SCSS all the time! Here’s why a preprocessor like SCSS is indispensable for even small projects:

  • You can manage your theme colors with variables in one spot. If you decide to tweak some colors, makes updating the project super easy. Also makes sure you are staying on-brand and not using a bunch of slightly different shades.
  • You can use mixins for compatibility. Instead of having to write multiple lines of CSS for all vendor prefixes each time you use a single rule, you can write out the prefixes once and be cross-compatible with one line (this is especially handy with css grid)
@mixin select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

span.cant-select-this {
    @include select-none();
}

Also minification and comments! It’s good practice to comment CSS, but I don’t necessarily want my comments to be made public. So a preprocessor helps with that too.

 

Ali Spittel: Bem is still a thing a lot of people like and use! I would say SCSS has the market share for preprocessers. Would go in that direction. I use it if it’s easy to set up for the project, if not, it’s not enough of a game changer for me to get it working.

 

 

Please follow and like us:
0
Tags: ,