Basscss – Low-level CSS toolkit | Hacker News Reader

Basscss – Low-level CSS toolkit

basscss.com

71 pointsachairapart30 comments

  .italic  { font-style: italic }

from [0]

This is certainly odd considering how far we've come in embracing semantic markup and styling.

[0]: http://www.basscss.com/docs/utility-typography/

Considering how we build HTML from templates anyway, this form might be more useful, especially in something like React components. I.e. you build the full class string in code rather than defining separate CSS classes for each component. Your components are obviously named semantically and all relevant CSS styles / transitions / animations are defined inside the component code.

the ypeface isn't semantic so the name reflecting the typeface isn't either. emphasis has semantic value (think of the latex command \emph), but italics is styling

Classes have no semantic value.

<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">...

Another example of something that's tiny and super fast for prototyping but produces code bloat and non-semantic classes. Looks great otherwise. No SASS version?

Non-semantic classes are totally fine: http://nicolasgallagher.com/about-html-semantics-front-end-a...

- Content-layer semantics are already served by HTML elements and other attributes.

- Class names impart little or no useful semantic information to machines or human visitors.

- The primary purpose of a class name is to be a hook for CSS and JavaScript.

- Class names should communicate useful information to developers.

When using Bootstrap, I don't like to put the responsive breaks in the markup (non-semantic as you say), but rather use the mixin in my LESS file as it's the detail of its function, not its meaning.

This is what has started putting me off Bootstrap. Container -> Row -> Column - feels like table based design all over again and my HTML is no longer semantic.

I get the non-semantic classes argument, but I've never seen a solution that is generic, responsive, and semantic. Any leads?

The idea is more to write it for each site, so you have site specific design

Right. I use mixins to apply these declarations to classes. Which has its own drawbacks.

Yes there is a Sass build, see http://www.basscss.com/docs/guides/custom-builds/#sass

A common pattern is to use low level libraries like basscss to build custom sass or less libraries per project.

What code bloat are you referring to here? Do you have any data about file size to show?

What does "immutable" mean in the context of CSS?

Found their definition[0] of what immutable means. Apparently the idea is that you can trust that the rules in an immutable CSS selector will never change in the future. "Immutable" seems like a pretty confusing term for this.

[0] http://www.basscss.com/docs/reference/principles/#immutable-...

I guess after "Object-oriented CSS" it was inevitable we would get Functional CSS...

As per site description "Simple, composable typographic and layout utilities based on common scales promote faster design and development in the browser and more performant, more readable code with no side effects."

Not sure technically how this is immutable..

I think that it means that if you put a class called .block it will ONLY add the attribute display: block;

After doing that enough times, won't it basically look like a smaller version of inline css?

Multi class patters render faster in the browser than inline styles. And I also think more readable especially with a series of single purpose classes that only target one breakpoint.

I really really want to love this. I'm so close to loving it.

I'm a fan of utility classes. I don't think that classes should be named based on their content, or that we should be using stupidly specific and complex selectors so we can keep our markup clean (clean markup has nothing to do with class names or selectors); But I feel like this takes to too far.

What do I gain over inline styles? This doesn't seem to be too much more maintainable than that.

You gain a significant amount of performance. And readability. You would also lose a lot of the benefits of framework level variables with only using inline styles.

Looks nice! But I wonder, what is the reason to use this over something like bootstrap?

I initially thought, hey great that's something you simply include and have a base layout that's a great starting point for any type of project, but after looking through the document I realized that it comes with as many "modules" as bootstrap or other full-blown "css-frameworks". Wish they just made a better and more consize and proven {normalize.css reset.css base.css}

Some of the styles are nice and ready to copy though, ie. the table styles, but not sure what the intention of this project is.

→ What lightweight css-starter-kit would you choose for any of your upcoming projects? Other than reset.css or normalize.css of course :)

I don't like bootstrap and similar, because it's just too large and most people end up using all of the classes and the whole javascript instead of only the stuff they need. Bootstrap is absolutely great for projects that quickly need a whole "UI Theme" fix.

Skeleton (http://getskeleton.com) is pretty nice, as lightweight CSS frameworks go.

If you're looking for a simple, lightweight alternative to bootstrap, check out PureCSS by Yahoo:

http://purecss.io/

I like Nicolas Gallagher's SUIT CSS style foundation, utilities and components. https://suitcss.github.io/

That's completely new to me, but it looks nice. Thank you. I only knew about stylus, http://learnboost.github.io/stylus/ but that's just a preprocessor.

"low level" CSS? It's a sad day when a collection of CSS classes is referred to as "low level". Lower level than bootstrap, I assume?

Yeah, confusing. "Low level" CSS at best seems to refer to composable and minimal.

Reply on news.ycombinator.com