blackfalcon

by Dale Sande

CSS has had a long and sordid past. A developer never sets out with the goal of making a complete and total mess of things. Their intention is not to build something that is practically illegible, impractical to maintain and is limited in scale. But somehow, this is where many inevitably end up. Luckily, all is not lost. With some simple strategies, organizational methods and out-of-the box tools, we can really help get that junk-drawer inline.

For many of us getting started with Sass, at one time or another have created a junk-drawer of files. For most, this was a rookie mistake, but for others, this is a continuing issue with our architecture and file management techniques. Sass doesn't come with any real rules for file management so developers are pretty much left to their own devices.

Large CSS files and increased complexity

CSS started out with very simple intentions, but as [tableless web design][1.1] began to really take a foothold, o

Wilto

( Conversation started here, with @murtaugh and @zeldman. )

Ah man, I got Opinions™ on this. I ususally go with something like:

<aside>
  <h1>Optional Heading</h1>
  <blockquote>
  	<p>It is the unofficial force—the Baker Street irregulars.</p>
	</blockquote>

blackfalcon

%myclass
    color: blue
    @media (min-width: 600px)
        background: red
    @media (min-width: 800px)
        font-size: 28px

.class1
    @media (min-width: 600px)
        @extend %myclass

michsch

// YAML Columns mixins
//
// Documentation:
// http://www.yaml.de/docs/index.html#yaml-columns

$ym-col1-width			: 25% !default;
$ym-col2-width			: 50% !default;
$ym-col3-width			: 25% !default;

$ym-column-layout		: 'table' !default;

stevemckinney

$white: #fff;
$black: #000;
$radius: 5px;
$sans: "Helvetica", sans-serif;
$default: #88a23d;

@mixin element-base {
	@include background-clip;
	@include transition(none);
	@include appearance(none);

Integralist

@include keyframe(fadeout) {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

bejes

/**
 * Plugin function to insert spans into text:
 * usage 
 * $(document).ready(function() {
 * $('p.charcount').charSpanCount(); });
 *  or $(document).ready(function() {
 * $('p.charcount').charSpanCount({'charcount' : 15});
 *  });
 */
(function($) {

leostratus

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

ykhs

@mixin linear-gradient($angle, $color-stops...) {
  $_angle-with-vendor-prefix: "";
  $_angle: "";
  @if $angle == "to top" or $angle == "bottom" {
    $_angle-with-vendor-prefix: bottom;
    $_angle: to top;
  } @else if $angle == "to right" or $angle == "left" {
    $_angle-with-vendor-prefix: left;
    $_angle: to right;
  } @else if $angle == "to bottom" or $angle == "top" {

brubrant

// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {

  //http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
  $sprite-image: sprite-file($map, $sprite);
  
  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
  $sprite-map: sprite-url($map);
  
  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-position